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。

Conclusion

Google Material Design 提供大家一個頁面設計上的規範，只需按照規範內容進行App開發設計，就能達到元件的一致性。

最後附上Sample Code

若你喜歡這篇文章歡迎推薦給你的朋友

若你喜歡我的部落格歡迎追隨我

https://play.google.com/store/apps/details?id=com.devwilly.tutorial.tablayoutex

Reference

Cards - Components - Material design guidelines

建立清單和卡片 | Android Developers

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