CardView 簡介和使用

時間 2019-11-11

標籤 cardview 簡介使用简体版

原文原文鏈接

CardView 簡介

本文連接： https://blog.csdn.net/ShawnXiaFei/article/details/81568537
CardView 是 Google 官方發佈 MD 風格卡片佈局控件，開發者能夠很方便的使用它將佈局作成卡片效果。在使用 CardView 以前，多少應該對它有必定的瞭解，下面將對其實現作簡單的介紹。

自定義屬性
CardView 繼承自 FrameLayout，並在其基礎上添加了圓角和陰影等效果。爲了更方便的使用這些效果，Google 提供了一系列的自定義屬性，這些屬性在類註釋中都有列出來，以下：

/**
* @attr ref android.support.v7.cardview.R.styleable#CardView_cardBackgroundColor
* @attr ref android.support.v7.cardview.R.styleable#CardView_cardCornerRadius
* @attr ref android.support.v7.cardview.R.styleable#CardView_cardElevation
* @attr ref android.support.v7.cardview.R.styleable#CardView_cardMaxElevation
* @attr ref android.support.v7.cardview.R.styleable#CardView_cardUseCompatPadding
* @attr ref android.support.v7.cardview.R.styleable#CardView_cardPreventCornerOverlap
* @attr ref android.support.v7.cardview.R.styleable#CardView_contentPadding
* @attr ref android.support.v7.cardview.R.styleable#CardView_contentPaddingLeft
* @attr ref android.support.v7.cardview.R.styleable#CardView_contentPaddingTop
* @attr ref android.support.v7.cardview.R.styleable#CardView_contentPaddingRight
* @attr ref android.support.v7.cardview.R.styleable#CardView_contentPaddingBottom
*/
public class CardView extends FrameLayout {

這些屬性的做用和用法以下：

CardView_cardBackgroundColor        設置背景色
CardView_cardCornerRadius           設置圓角大小
CardView_cardElevation              設置z軸陰影
CardView_cardMaxElevation           設置z軸最大高度值
CardView_cardUseCompatPadding       是否使用CompadPadding
設置內邊距，V21+的版本和以前的版本具備同樣的計算方式。
部分機器不開這個屬性會致使卡片效果「消失」，如榮耀6（6.0系統）。

CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
在V20和以前的版本中添加內邊距，這個屬性爲了防止內容和邊角的重疊

CardView_contentPadding             內部邊距，子View與CardView的距離
CardView_contentPaddingLeft         內部左側邊距
CardView_contentPaddingTop          內部頂部邊距
CardView_contentPaddingRight        內部右側邊距
CardView_contentPaddingBottom       內部底部邊距

CardViewImpl 接口
跟着源碼往下看，接下來就是作多 API 版本適配的代碼，這段代碼使得不一樣版本的 Android 能達到相同或者類似的效果，儘量的作到了兼容。這裏 CardViewImpl 的幾個子類實現請自行查閱，這裏很少說了。

private static final CardViewImpl IMPL;

static {
    if (Build.VERSION.SDK_INT >= 21) {
        IMPL = new CardViewApi21Impl();
    } else if (Build.VERSION.SDK_INT >= 17) {
        IMPL = new CardViewApi17Impl();
    } else {
        IMPL = new CardViewBaseImpl();
    }
    IMPL.initStatic();
}
上面這段代碼頗有意思，首先它是static{}包裹的靜態代碼塊，而靜態代碼塊是屬於類的，只會在類被加載到內存時執行一次，之後無論如何實例化，new 出多少實例對象，靜態代碼塊都不會再執行了。其次，IMPL 對象是是static final修飾的，這就意味着 IMPL 對象也是屬於類，而且只能被初始化一次。

final 修飾的對象，如果基本類型+String，則其值不能修改；如果複雜類型，則其引用不能修改。
基本類型+String的值、複雜類型的引用，存儲在棧中；複雜類型的實體類容存儲在堆中。final 是指明棧中的類容不能修改。

那麼，一旦 CardView 被加載到內存，IMPL 對象（地址）就不會再變化了，也就會被後續系統中全部實例化的 CardView 對象共享。而縱觀整個 CardView 的源碼，咱們會發現 IMPL 對象幾乎出如今 CardView 的全部方法中，那麼是否是系統中全部的 CardView 實例化對象都會有相同的表現呢？

實際使用中咱們發現，即使一個APP內部的多個CardView也能有不一樣的表現，更不用說整個系統上的全部APP了，那這又是怎麼作到的呢？

咱們接着看下 CardViewImpl 接口的定義：

/**
* Interface for platform specific CardView implementations.
*/
interface CardViewImpl {
    void initialize(CardViewDelegate cardView, Context context, ColorStateList backgroundColor,
            float radius, float elevation, float maxElevation);
    void setRadius(CardViewDelegate cardView, float radius);
    float getRadius(CardViewDelegate cardView);
    void setElevation(CardViewDelegate cardView, float elevation);
    float getElevation(CardViewDelegate cardView);
    void initStatic();
    void setMaxElevation(CardViewDelegate cardView, float maxElevation);
    float getMaxElevation(CardViewDelegate cardView);
    float getMinWidth(CardViewDelegate cardView);
    float getMinHeight(CardViewDelegate cardView);
    void updatePadding(CardViewDelegate cardView);
    void onCompatPaddingChanged(CardViewDelegate cardView);
    void onPreventCornerOverlapChanged(CardViewDelegate cardView);
    void setBackgroundColor(CardViewDelegate cardView, @Nullable ColorStateList color);
    ColorStateList getBackgroundColor(CardViewDelegate cardView);
}
不難發現，這裏面幾乎全部方法都有一個參數——CardViewDelegate，在CardView的方法調用時，會經過早已初始化的 IMPL 調用對應的方法，並傳入一個mCardViewDelegate對象，並經過它進行下一步操做。如：

/**
* Updates the background color of the CardView
*
* @param color The new color to set for the card background
* @attr ref android.support.v7.cardview.R.styleable#CardView_cardBackgroundColor
*/
public void setCardBackgroundColor(@ColorInt int color) {
IMPL.setBackgroundColor(mCardViewDelegate, ColorStateList.valueOf(color));
}
CardViewDelegate 代理
接下來就簡單說下 CardViewDelegate 對象是如何工做的。
首先是定義，這一系列方法定義與 CardView 提供的方法迷之類似。

/**
* Interface provided by CardView to implementations.
* <p>
* Necessary to resolve circular dependency between base CardView and platform implementations.
*/
interface CardViewDelegate {
    void setCardBackground(Drawable drawable);
    Drawable getCardBackground();
    boolean getUseCompatPadding();
    boolean getPreventCornerOverlap();
    void setShadowPadding(int left, int top, int right, int bottom);
    void setMinWidthHeightInternal(int width, int height);
    View getCardView();
}
而後 CardViewDelegate 的實例化是在 CardView 中進行的，在 CardView 代碼末尾可看到其實現：

private final CardViewDelegate mCardViewDelegate = new CardViewDelegate() {
······
}
這裏沒有使用 static，那麼這個 mCardViewDelegate 對象在 CardView 實例化時也會 new 一個新的，而後經過不一樣 mCardViewDelegate 對象，就作到了一個系統上不一樣CardView有不一樣表現。

最後這一系列操做的示意圖大體是這樣的：

這一系列的操做，將 CardView 的實現分紅多個類，各個類只處理和本身相關的邏輯，簡化了 CardView 自身邏輯。同時，能很方便的作到多平臺適配，不須要將各個平臺特定的實現代碼所有擠在 CardView 內部。並且能很方便進行擴展，如添加新平臺、新特性，並且不會對 CardView 的代碼形成很大改動，只須要添加新的 IMPL，並在static{}中添加新分支便可。

CardView 使用
添加依賴庫
CardView 是隨 MD 推出的補充庫，並不是 SDK 的內容，所以在使用 CardView 時，必須先引入依賴庫：

implementation 'com.android.support:cardview-v7:xx.x.x'
1
使用 CardView 佈局
前面已經介紹了，CardView 繼承自 FrameLayout，那麼咱們就能夠直接在佈局中，將CardView做爲容器，放入其它控件便可。
若是已有現成的佈局，想再引入卡片效果，也只須要在已有佈局最外層添加 CardView 便可。
舉個栗子：

<android.support.v7.widget.CardView 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="wrap_content"
    android:layout_margin="@dimen/dp8"
    android:orientation="vertical"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="@dimen/dp8"
    app:cardElevation="@dimen/dp8"
    app:cardUseCompatPadding="true"
    app:contentPadding="@dimen/dp8">

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

前面介紹屬性已經說了，部分機器（如榮耀6，6.0系統）若是不打開 cardUseCompatPadding，將不會呈現出卡片效果。所以建議打開。

效果以下：

相似效果

要實現卡片效果，除了用 CardView 之外，還有其它方法，好比使用shape+elevation。
舉個栗子：
先定義一個shape，用做背景。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">//shape樣式
    //圓角
    <corners android:radius="@dimen/dp8" />
    //邊框
    <stroke
        android:width="1dp"
        android:color="@color/divider" />
    //內邊距
    <padding
        android:bottom="@dimen/dp8"
        android:left="@dimen/dp8"
        android:right="@dimen/dp8"
        android:top="@dimen/dp8" />
    //內部填充
    <solid android:color="@color/white" />
</shape>

而後在佈局中引用：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|center_horizontal"
    android:layout_margin="@dimen/dp8"
    android:background="@drawable/shape"
    android:elevation="@dimen/dp8"    //z軸高度，控制陰影效果
    android:text="測試\n卡片\n效果"
    android:textSize="@dimen/sp32" />
運行效果：

能夠看到，與前面使用 CardView 的效果幾乎同樣。
可是，elevation屬性也是隨MD出來的，它只支持 5.0+（也就是API21+）的系統。所以，若是要卡片效果能想兼容低版本系統，那仍是應該優先考慮用 CardView。
————————————————