CardView詳解

導讀

本篇文章將介紹Android 5.0新增的組件CardView (繼承於FrameLayout)

以及本人在開發中遇到的詭異問題

控件私有屬性說明

屬性	說明
android.support.v7.cardview:cardBackgroundColor	背景顏色
android.support.v7.cardview:cardCornerRadius	邊緣圓角大小
android.support.v7.cardview:cardElevation	z軸的陰影
android.support.v7.cardview:cardMaxElevation	z軸陰影的最大高度值
android.support.v7.cardview:cardPreventCornerOverlap	是否防止CardView 裏的內容和和圓角重疊 (Api<=20)
android.support.v7.cardview:cardUseCompatPadding	是否給CardView這個控件設置內邊距 (Api>=21)
android.support.v7.cardview:contentPadding	內容(子View)的padding
android.support.v7.cardview:contentPaddingBottom	內容(子View)的底部padding
android.support.v7.cardview:contentPaddingLeft	內容(子View)的左側padding
android.support.v7.cardview:contentPaddingRight	內容(子View)的右側padding
android.support.v7.cardview:contentPaddingTop	內容(子View)的上部padding

控件使用說明

準備工作: moudle的bulid.gradle 添加依賴庫

    compile 'com.android.support:cardview-v7:26.0.0-alpha1'

XML文件靜態使用

        <!--card_view:cardBackgroundColor  背景顏色-->
        <!--card_view:cardCornerRadius  邊緣圓角大小-->
        <!--card_view:cardElevation   z軸的陰影-->
        <!--card_view:cardMaxElevation  z軸陰影的最大高度值-->
        <!--card_view:cardUseCompatPadding  是否給CardView這個控件設置內邊距 API>=21-->
        <!--card_view:cardPreventCornerOverlap  是否防止內容和圓角重疊 API<=20-->
        <!--card_view:contentPadding  內容(子View)的padding-->
        <!--card_view:contentPaddingLeft  內容(子View)的左側padding-->
        <!--card_view:contentPaddingTop  內容(子View)的上部padding-->
        <!--card_view:contentPaddingRight 內容(子View)的右側padding-->
        <!--card_view:contentPaddingBottom 內容(子View)的底部padding-->
        <android.support.v7.widget.CardView
            android:id="@+id/cardview_def"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            card_view:cardBackgroundColor="@color/colorPurple"
            card_view:cardCornerRadius="30dp"
            card_view:cardElevation="10dp"
            card_view:cardMaxElevation="10dp"
            card_view:cardPreventCornerOverlap="true"
            card_view:cardUseCompatPadding="true"
            card_view:contentPadding="@dimen/content_padding"
            card_view:contentPaddingBottom="@dimen/content_padding"
            card_view:contentPaddingLeft="@dimen/content_padding"
            card_view:contentPaddingRight="@dimen/content_padding"
            card_view:contentPaddingTop="@dimen/content_padding"

            >

           //dosomting

        </android.support.v7.widget.CardView>

代碼動態使用

在Activity類,findViewById 找到CardView組件,然後設置相應的屬性即可

        <!--card_view:cardCornerRadius  邊緣圓角大小-->
        mCardView.setRadius(float);

        <!--card_view:cardElevation   z軸的陰影-->
        mCardView.setCardElevation(float); 或 mCardView.setElevation();  爲了兼容性,建議使用前者

        <!--card_view:cardMaxElevation  z軸陰影的最大高度值-->
        mCardView.setMaxCardElevation(float);

        <!--card_view:cardUseCompatPadding  是否給CardView這個控件設置內邊距 API>=21-->
        mCardView.setUseCompatPadding(boolean);

        <!--card_view:cardPreventCornerOverlap  是否防止內容和圓角重疊 API<=20-->
        mCardView.setPreventCornerOverlap(boolean);

        <!--card_view:contentPadding  內容(子View)的padding-->
        mCardView.setContentPadding(int,int,int,int)

==爬坑指南==

1. 在CardView中 android:padding 用於偏移陰影的內容,因此,要設置content(子View)的padding屬性,需要在XML文件設置card_view:contentPadding或代碼中使用setContentPadding(int,int,int,int).

2. 如果您爲CardView指定了精確尺寸,因爲陰影其內容區域在Lollipop之前和之後的平臺之間不同.我們可以通過使用api版本特定的資源值避免這些更改.

3. 如果希望CardView在平臺Lollipop上添加內部填充,可以調用setUseCompatPadding(true).

4. 爲了兼容星要用setCardElevation,如果直接使用setElevation,5.0之前的版本,系統會出錯(api<21沒有陰影效果,我們可以自己模仿寫一個自定義控件實現類似效果)

5. 在低版本中設置了Elevation之後CardView會自動留出空間供陰影顯示,而Android 5.0之後需要手動設置Margin邊距來預留空間,因此如果設置Elevation稍大,4.0系統的邊距會顯得很大,顯示效果不好

解決:

創建/res/value 和/res/value-21 資源文件

1./res/value 設置dimens.xml文件,參數設爲0
<dimen name="cardview_margin">0dp</dimen>

2./res/value-21 設置dimens.xml文件,參數按需設置
<dimen name="cardview_margin">5dp</dimen> 

3.在佈局文件的CardView控件加上該屬性
android:layout_margin="@dimen/cardview_margin"

---

Genymotion模擬器 測試得到的一些奇怪現象

Api<20(Android 4.4)模擬器測試

• 靜態設置card_view:cardElevation有效果,動態設置mCardView.setCardElevation(float)沒效果

• 靜態設置card_view:cardMaxElevation,效果類似給CardView設置了andorid:layout_magin屬性

• 如果card_view:cardCornerRadius設置過大,content(子View)會覆蓋CardView,設置card_view:cardPreventCornerOverlap=”true”後,content(子View)會自動適配CardView,保持居中顯示內容

• 設置了card_view:cardUseCompatPadding沒效果,設置card_view:MaxElevation可以實現它的效果

• 動態設置了mCardView.setRadius(float);子View內容會自動適配CardView

---

Api>20 (Android 5.0+)模擬器測試

• 靜態設置card_view:cardMaxElevation有反應,動態設置沒反應(要同時設置cardUseCompatPadding=”true”才行)

• 如果card_view:cardCornerRadius和mCardView.setRadius(float);設置過大,CardView會覆蓋content(子View)

總結

• 實際開發中,在真機測試時,注意下我在Genymotion上遇到的現象,代碼動態設置和XML靜態設置有什麼不同,如果覺得Google提供的CardView 奇怪的bug略多,或者滿足不了自己的開發需要,強烈建議同學們自行自定義控件

本篇文章到此結束,歡迎關注,後續有補充的會即時更新,有問題也歡迎評論,共同成長