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>