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,一起学习研讨。










你可能感兴趣的:(android,控件)