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的属性,另外还有自己独特的属性:
- 在API21(Android L)等级以上拥有属性elevation,意为CardView的Z轴阴影,只有在Android 5.0有效。只能通过xml中的elevation属性指定;
- cardBackgroundColor:意为CardView的卡片颜色,只能通过xml的cardBackgroundColor属性进行指定;
- 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,一起学习研讨。