Android5.0新特性：CardView卡片式设计

CardView卡片式设计

Android 5.0最主要的变化就是采用了全新的Material Design界面。Material Design就是材质化设计，材质化设计指的是物体是有质地的，两个控件之间室友实体的，不允许互相穿墙，并且引入了Z轴的概念。

本篇主要讲解android 5.0新特性中的控件 CardView.,即卡片式设计的使用。

一. CardView的简介：

CardView和LinearLayout、Framelayout一样都是ViewGroup,即控件容器，内部可以放其他控件。并且，CardView其实是继承自FrameLayout,又因为CardView的独特性，也可以这么介绍CardView： 一个带圆角和阴影背景的FrameLayout.

二.CardView的属性：

因为CardView继承与FrameLayout，所以CardView具备FrameLayout的属性，另外还有自己独特的属性：

1. 在API21（Android L）等级以上拥有属性elevation，意为CardView的Z轴阴影，只有在Android 5.0有效。只能通过xml中的elevation属性指定；
2.  cardBackgroundColor：意为CardView的卡片颜色，只能通过xml的cardBackgroundColor属性进行指定；
3.  cardConerRadius：意为CardView卡片的四角圆角矩形程度，单位dimen（dp px sp），可以通过xml指定，也可以通过代码中的setRadius指定。
   

三.CardView的使用步骤：

1.添加依赖：

compile 'com.android.support:cardview-v7:25.0.0'

2.ui布局：

使用方法：想要将哪一部分控件显示为卡片效果，就用CardView作为父控件将这一部分控件包裹起来即可。

代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#e8e8e8"
    tools:context="com.example.star.cardview.activity.MainActivity">

    <!--CardView包裹TextView-->
    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="2dp"
        android:elevation="10dp">
        <TextView
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="CardView"/>
    </android.support.v7.widget.CardView>

    <!--普通TextView-->
    <TextView
        android:background="#fff"
        android:gravity="center"
        android:layout_marginTop="20dp"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:text="TextView"/>

    <!--CardView包裹的Button-->
    <android.support.v7.widget.CardView
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="2dp"
        android:elevation="10dp">
        <Button
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:text="CardViewButton"/>
    </android.support.v7.widget.CardView>

    <!--普通Button-->
    <Button
        android:layout_marginTop="20dp"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:text="Button"/>
</LinearLayout>

ui 代码中有被CadView包裹的TextView，即卡片式效果的TextView,还有 普通的TextView；有被CardView包裹的 Button，即卡片式效果的Button，还有普通的Button；

然后是显示的界面效果：

一作对比，就很明显了，使用CardView作为父控件的确实有卡片效果，而普通的就显得很单调。

文章到此就结束了，如有疑问，请在评论区留言，或者加本人QQ：2235792398，一起学习研讨。