CardView的使用

Material Design中有一種很個性的設計概念：卡片式設計（Cards），Cards擁有自己獨特的UI特征，關于Cards的設計規(guī)范可以參考官網(wǎng)介紹：
cards-usage
Google在v7包中引進了一種全新的控件CardView，用來實現(xiàn)這種 Cards UI 的設計.


CardView繼承自FrameLayout，它是一個帶圓角背景和陰影的FrameLayout.
CardView官方文檔

一、簡單使用

使用前添加依賴：

compile 'com.android.support:cardview-v7:25.3.1'
1、使用

CardView本質上屬于FrameLayout，不同的是，它多了很多"特效"（圓角、陰影等）.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        app:cardCornerRadius="12dp"
        app:cardElevation="12dp" >
       
        <ImageView
            android:layout_width="284dp"
            android:layout_height="228dp"
            android:scaleType="fitXY"
            android:src="@mipmap/zy" />
    </android.support.v7.widget.CardView>

</RelativeLayout>

可以看見，被CardView包裹的ImageView有明顯的圓角和陰影，這就是CardView最重要的兩條屬性了.

app:cardCornerRadius=" " 
圓角的半徑，效果就是上面四個角的弧度

app:cardElevation=" " 
陰影大小
2、關于Z軸的概念

Android5.0 引入了Z軸的概念，可以讓組件呈現(xiàn)3D效果.
看下面這幅圖：


圖中的FAB（FloatingActionButton）很明顯是浮在界面上的，這就是Z軸的效果.

Z屬性可以通過elevation和translationZ進行修改
Z＝ elevation＋translationZ

android:elevation=" "  設置該屬性使控件有一個陰影，感覺該控件像是“浮”起來一樣，達到3D效果

android:translationZ=""  設置該組件陰影在Z軸（垂直屏幕方向）上的位移

在5.0之前，我們如果想給View添加陰影效果，以體現(xiàn)其層次感，通常的做法是給View設置一個帶陰影的背景圖片.
在5.0之后，我們只需要簡單的修改View的Z屬性，就能讓其具備陰影的層次感，不過要求版本至少5.0 Lollipop,也就是API21.

在Android Design Support Library和support -v7中一些組件已經(jīng)封裝好了Z屬性，不需要5.0 就可以使用.

像FloatingActionButton就可以通過app:elevation=" "使用Z屬性，CardView可以通過app:cardElevation=" " 來使用.
關于Z軸的更多介紹，可以觀看官方：定義陰影與裁剪視圖.

二、CardView的常用屬性

1、設置背景顏色

app:cardBackgroundColor=" "

2、設置padding

app:contentPadding=" "
app:contentPaddingTop=" "
app:contentPaddingBottom=" "
app:contentPaddingLeft=" "
app:contentPaddingRight=" "

Tips:上面是CardView設置背景顏色和padding的方式，如果你直接通過android:padding=" " 和android:background=" "設置，是無效的.

3、設置Z軸的最大高度

app:cardMaxElevation=" "

4、點擊之后的漣漪效果

android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"

Tips:如果你給CardView設置了點擊事件，就不需要設置android:clickable="true"了

如果你的CardView是可點擊的，可以通過foreground屬性使用系統(tǒng)定義好的RippleDrawable: selectableItemBackground，從而達到在5.0及以上版本系統(tǒng)中實現(xiàn)點擊時的漣漪效果（Ripple），如圖：


這個漣漪效果在5.0以上版本中才能展示，在低版本上是一個普通的點擊變暗的效果.

三、兼容性問題

1、邊距問題

看下面兩幅圖:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="12dp"
        app:cardElevation="12dp" >

        <ImageView
            android:layout_width="284dp"
            android:layout_height="228dp"
            android:scaleType="fitXY"
            android:src="@mipmap/zy" />
    </android.support.v7.widget.CardView>
</RelativeLayout>

在5.0之前的版本中設置了 app:cardElevation=" "后 CardView 會自動留出空間供陰影顯示，而5.0之后的版本中沒有預留空間.
官網(wǎng)也介紹了這種情況:

Before Lollipop, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

所以給CardView設置 Margin時需要兼容一下，否則在低版本上每個卡片之間的距離會特別大，浪費屏幕空間.
解決方法1:
在res/values/dimens中設置一個0dp的margin，這是為5.0之前版本使用的

<dimen name="cardview_margin">0dp</dimen>

在res/values-v21/dimens中設置一個適合的margin，為陰影預留空間，這是為5.0之后版本使用的

<dimen name="cardview_margin">12dp</dimen>

最后，給CardView設置外邊距android:layout_margin="@dimen/cardview_margin"，這樣就解決了低版本中邊距過大浪費屏幕空間的問題了.
解決方法2:直接給CardView設置該屬性：

app:cardUseCompatPadding="true"  
讓CardView在不同系統(tǒng)中使用相同的padding值，為陰影預留空間
2、圓角問題

看下面兩幅圖:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/colorPrimary"
        app:cardCornerRadius="12dp"
        app:cardElevation="12dp" >

        <ImageView
            android:src="@mipmap/zy"
            android:scaleType="fitXY"
            android:layout_width="284dp"
            android:layout_height="228dp" />

</RelativeLayout>

在>=5.0（Lollipop API 21）的版本，CardView會直接裁剪內容元素滿足圓角的需求.
在<5.0（Lollipop API 21）的版本，CardView為了使內容元素不會覆蓋CardView的圓角，會添加一個padding，這樣一來，如果CardView設置了背景顏色，就很難看了.
解決方法：給CardView設置該屬性：

app:cardPreventCornerOverlap="false"

這條屬性的意思是：是否阻止圓角被覆蓋，默認為true
設為false后，padding效果就不存在了，同時圓角也被覆蓋了
該屬性對5.X設備沒什么影響.
app:cardPreventCornerOverlap="false"

四、小結

總的來說，如果在高版本中使用CardView還是很舒服的，很容易實現(xiàn)各種效果，低版本上兼容性還不是很好.

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容