Android基础控件—CardView

来源：互联网发布：mac登陆酷狗微信账户编辑：程序博客网时间：2024/05/21 16:56

1.CardView是什么？

CardView最开始是流行在Google+上的，后来越来越多的APP也使用了这样一种新特性引入了Card的这样一种新的布局方式(卡片式布局)，因此在Android5.0系统上，随着Material Design的一种设计理念的推出，Google就索性提供了CardView控件，方便开发者的使用。

其实CardView也是一个容器类布局，不同的是它提供了卡片这样的一种形式，开发者可以定义卡片的大小与视图的高度，并且设置圆角的角度，这就相当于FragmentLayout布局控件然后添加圆角及阴影的效果。CardView作为一种容器使用，经常会用在ListView和RecyclerView的Item布局中。

2.代码中具体实现

CardView是一个新增加的UI控件，通过查看源码我们可以知道CardView继承自FrameLayout，所以CardView实际上就是一个ViewGroup，既然是ViewGroup我们就可以在CardView中添加控件和布局， CardView还有一些新增的属性：

app:cardBackgroundColor 设置背景色
app:cardCornerRadius 设置圆角大小
app:cardElevation 设置z轴阴影
app:cardMaxElevation 设置z轴最大高度值
app:cardUseCompatPadding 是否使用CompadPadding
app:cardPreventCornerOverlap 是否使用PreventCornerOverlap
app:contentPadding 内容的padding
app:contentPaddingLeft 内容的左padding
app:contentPaddingTop 内容的上padding
app:contentPaddingRight 内容的右padding
app:contentPaddingBottom 内容的底padding

下面就利用这些新增的属性模仿绘制一张身份证，在AndroidStudio中想要使用CardView就需要先在Gradle中添加CardView包的依赖。

实现后的效果：

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {        exclude group: 'com.android.support', module: 'support-annotations'    })    compile 'com.android.support:appcompat-v7:25.0.1'    compile 'com.android.support:cardview-v7:25.0.0'    testCompile 'junit:junit:4.12'}

然后就可以在XML中进行相关的布局，需要注意的是在布局文件中使用CardView之前需要引入一个新的名字空间—xmlns:app="http://schemas.android.com/apk/res-auto"来添加，这样才可以通过自定义的名字空间来引用它的属性

<?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:orientation="vertical"    android:paddingBottom="16dp"    android:paddingLeft="16dp"    android:paddingRight="16dp"    android:paddingTop="16dp"    tools:context="com.example.chupeng.cardviewdemo.MainActivity">    <android.support.v7.widget.CardView        android:id="@+id/cardView"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:cardCornerRadius="10dp"        app:cardBackgroundColor="@color/floralWhite"        app:cardElevation="20dp">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical"            android:paddingBottom="16dp"            android:paddingLeft="16dp"            android:paddingRight="16dp"            android:paddingTop="16dp">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:orientation="horizontal">                <LinearLayout                    android:layout_width="0dp"                    android:layout_height="wrap_content"                    android:layout_weight="4"                    android:orientation="vertical">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="wrap_content"                        android:orientation="horizontal">                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:textColor="@color/colorPrimary"                            android:text="姓名" />                        <TextView                            android:id="@+id/Name"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="20dp"                            android:textColor="@color/Black"                            android:text="小 哼" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="wrap_content"                        android:layout_marginTop="5dp"                        android:orientation="horizontal">                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:textColor="@color/colorPrimary"                            android:text="性别" />                        <TextView                            android:id="@+id/Gender"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="20dp"                            android:textColor="@color/Black"                            android:text="男" />                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="50dp"                            android:textColor="@color/colorPrimary"                            android:text="民族" />                        <TextView                            android:id="@+id/Nationality"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="20dp"                            android:textColor="@color/Black"                            android:text="汉" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="wrap_content"                        android:layout_marginTop="5dp"                        android:orientation="horizontal">                        <TextView                            android:id="@+id/textView"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:textColor="@color/colorPrimary"                            android:text="出生" />                        <TextView                            android:id="@+id/Year"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="20dp"                            android:textColor="@color/Black"                            android:text="1990" />                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:textColor="@color/colorPrimary"                            android:text="年" />                        <TextView                            android:id="@+id/Month"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="5dp"                            android:textColor="@color/Black"                            android:text="1" />                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:textColor="@color/colorPrimary"                            android:text="月" />                        <TextView                            android:id="@+id/Day"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="5dp"                            android:textColor="@color/Black"                            android:text="1" />                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:textColor="@color/colorPrimary"                            android:text="日" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="wrap_content"                        android:layout_marginTop="5dp"                        android:orientation="horizontal">                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:textColor="@color/colorPrimary"                            android:text="住址" />                        <TextView                            android:id="@+id/Address"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="20dp"                            android:textColor="@color/Black"                            android:text="西安市碑林区XXXXXXXXXXXXX" />                    </LinearLayout>                </LinearLayout>                <ImageView                    android:layout_width="0dp"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:src="@mipmap/ic_launcher" />            </LinearLayout>            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="10dp"                android:orientation="horizontal">                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:textColor="@color/colorPrimary"                    android:text="公民身份证号码" />                <TextView                    android:id="@+id/IDCardNumber"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="20dp"                    android:textColor="@color/Black"                    android:text="123456789012345678" />            </LinearLayout>        </LinearLayout>    </android.support.v7.widget.CardView></LinearLayout>

此时还需要加一个点击效果，需要监听CardView被按下和松开的事件，当手指触摸屏幕按下CardView时，取消CardView在Z轴上的阴影，当手指离开CardView时，添加CardView在Z轴上的阴影，通过这样的方式就可以模拟点击效果

package com.example.chupeng.cardviewdemo;/** * Created by ChuPeng on 2017/2/25. */import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.CardView;import android.view.MotionEvent;import android.view.View;import android.view.Window;public class MainActivity extends AppCompatActivity{    private CardView cardView;    protected void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        cardView = (CardView) findViewById(R.id.cardView);        cardView.setOnTouchListener(new View.OnTouchListener()        {            public boolean onTouch(View view, MotionEvent motionEvent)            {                switch (motionEvent.getAction())                {                    //当手指按下CardView                    case MotionEvent.ACTION_DOWN:                        cardView.setCardElevation(0);                        break;                    //当手指松开CardView                    case MotionEvent.ACTION_UP:                        cardView.setCardElevation(20);                        break;                }                return true;            }        });    }}

3.总结

CardView使用的难度不是很大，但是实用性和效果还是很好的，我们可以通过CardView将所要显示的内容以卡片式的方式呈现出来。

以上Demo的源代码地址：点击打开链接

0 0