Android進階之路 - CardView卡片化效果

好吧，老生常談，2-3年前看的東西，當時沒做筆記，現在抽時間又瞭解了一下，做個筆記造福如當年的我一般的新手朋友吧 ~

衆所周知Android5.0的特性主要是突顯在用戶交互的UI效果方面，CardView就是其一 ~

其實在我認爲開發中CardView用到的場景並不多，因爲同等效果下我們完全可以使用Shape實現大部分的效果~

對了，目前已有的陰影效果，只要設置陰影就四邊都有，沒有擴展到設置單獨某一邊有陰影效果 ~

CardView追一層之後，你會發現CardView就是一款繼承自FrameLayout的自定義控件，作爲自定義控件，那麼內部肯定有一些自定義的屬性，這些自定義屬性就是讓我們在寫xml中更方便使用 ~

Demo效果

關於已有的自定義屬性有以下這些 - -！~

// 設置背景顏色 
app:cardBackgroundColor
// 設置圓角大小 
app:cardCornerRadius
// 設置z軸的陰影 、陰影的高度
app:cardElevation 
// 設置z軸的最大高度值 、 陰影最大高度
app:cardMaxElevation
// 是否使用內邊距
app:cardUseCompatPadding
// 這個屬性爲了防止內容和邊角的重疊
app:cardPreventCornerOverlap
// 設置內容的padding 
app:contentPadding 
// 設置內容的左padding 
app:contentPaddingLeft 
// 設置內容的上padding 
app:contentPaddingTop 
// 設置內容的右padding 
app:contentPaddingRight 
// 設置內容的底padding
app:contentPaddingBottom

注意

• 若不顯示陰影效果，可嘗試開啓硬件加速

 //硬件加速
 android:hardwareAccelerated="true"

• 使用shape+elevation效果兼容不到5.0以下（也就是API21+）的系統 ，可根據場景使用CardView，因爲系統已經自帶向下兼容了 ~

• 關於CardView的使用場景很多，有層疊的、有設置單邊陰影的、當然還有其它各種各樣的，關於這些呢都可以自行去 Github 找找，看是否有自己需要的 > < ~

Code Please ~

ok,ok,言歸正傳，CardView來自5.0特性，同時對應的庫就是design庫咯，所以需要導入下方依賴 ~

 implementation  'com.android.support:design:28.0.0'

MainActivity

package nkwl.com.cardview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="背景+圓角：Boy go ~" />

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:background="#fa1"
        android:orientation="vertical"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="LinearLayout包裹CardView"
            android:textColor="#f00" />

        <android.support.v7.widget.CardView
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            app:cardBackgroundColor="#ffffff"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="背景+圓角+陰影：Boy go ~" />

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

        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:layout_marginBottom="5dp"
            app:cardBackgroundColor="#ffffff"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp"
            app:contentPadding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="背景+圓角+陰影+內邊距：Boy go ~" />

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="30dp"
        android:layout_marginRight="10dp"
        app:cardBackgroundColor="#df2"
        app:cardCornerRadius="10dp"
        app:cardElevation="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="10dp"
                android:text="CardView包裹LinearLayout ~ 然後包裹CardView 等等控件~~~" />


            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                app:cardBackgroundColor="#f00"
                app:cardCornerRadius="10dp"
                app:cardElevation="8dp"
                app:contentPadding="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="背景+圓角+陰影+內邊距：Boy go ~" />

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

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

</LinearLayout>