CardView-Support Library And Material Design

轉載請註明出處:https://medium.com/@devwilly,違者必究

圖片資料均屬原公司所有

Android 5.0 Lollipop 或後續版本加入了Material design guidelines概念,引導大家進行跨平台、跨裝置的視覺、動態及互動設計,其中陰影(Elevation)Z軸位移的效果最讓我驚豔。

沿用TabLayout-Design Library 範例,我將針對App內的卡片式項目進行詳細介紹並提供相關的CardView Material design規範準則。


What’s CardView ?

Android 5.0之前若要在項目(item)上加入陰影和圓角是一件有點麻煩的事情,此時Google聽到了大家的聲音,在Android 5.0推出新的 CardView 小工具讓你可以利用卡片來顯示重要資訊且擁有一致的外觀與風格。

來源:https://developer.android.com/design/material/index.html?hl=zh-tw

CardView-Material Design

以下將針對Material Design規範中較為重要的內容進行說明,若你需要更詳細的資訊請參考Guidelines

When to Usage ?

卡片用於顯示不同類型(圖片、影片、文字)所組成的內容,其內容也可包含互動式內容,例如:+1、分享按鈕。需特別注意並非所有內容都適合使用CardView元件。

來源:https://material.io/guidelines/components/cards.html#cards-usage
來源:https://material.io/guidelines/components/cards.html#cards-usage

CardView Behavior

  • 固定的寬度及可變化的高度
  • 卡片最大高度不能超過螢幕可顯示範圍
  • 卡片不能翻轉且僅提供單面內容
  • 卡片顯示順序為:左到右、上到下
  • 支援手勢
  • 僅支援垂直滾動(Scrolling)
  • 卡片內元件焦點
卡片顯示順序
卡片元件焦點

CardView Elevation

  • 卡片預設高度:2dp
  • 卡片獲得聚焦時高度:8dp
卡片預設及聚焦時高度

How to use CardView ?

首先需要把CardView Support Library 加入專案中,將程式碼加入專案內App目錄下build.gradle中。

dependencies {
....
compile 'com.android.support:cardview-v7:25.1.1'
}

接著layout頁面中加入CardView元件,若想要設定卡片屬性可利用card_view進行調整。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardElevation="2dp"
card_view:cardMaxElevation="4dp"
card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="true"
card_view:cardCornerRadius="2dp"
card_view:cardBackgroundColor="#FFFFFF"
>
</android.support.v7.widget.CardView>

此外Ripple效果(API 21+)能帶給使用者點擊時的回饋(feedback)

CardView Ripple效果
/layout-v21/vh_item_week.xml
<android.support.v7.widget.CardView
...
android:foreground="@drawable/ripple_foreground">
</android.support.v7.widget.CardView>

/drawable-v21/ripple_foreground.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#80efefef">
</ripple>

Lift-On-Touch就是CardView最有看點的地方,利用Z軸位移產生陰影加深的效果。

CardView Z軸位移效果
/layout-v21/vh_item_week.xml
<android.support.v7.widget.CardView
...
android:stateListAnimator="@drawable/translation_selector"
</android.support.v7.widget.CardView>

/drawable-v21/translation_selector.xml
<selector>
<item android:state_pressed="true">
<set>
<objectAnimator
android:propertyName="translationZ"
android:duration="100"
android:valueTo="8dp"
android:valueType="floatType"/>
</set>
</item>
<item android:state_pressed="false">
<set>
<objectAnimator
android:propertyName="translationZ"
android:duration="100"
android:valueTo="2dp"
android:valueType="floatType"/>
</set>
</item>
</selector>

KeyPoint

(1)CardView只是加了圓角和陰影的FrameLayout

(2)並非所有畫面都適合卡片模式

(3)使用CardView xml layout attribute時請注意新的屬性支援API21+,若不針對Android 5.0以下的手機做處理(共用Layout),可能會造成舊版手機Crash。