Android基础控件—CardView

最新推荐文章于 2024-05-18 17:23:33 发布

ZackChu

最新推荐文章于 2024-05-18 17:23:33 发布

阅读量643

点赞数

本文链接：https://blog.csdn.net/zackchu/article/details/57075109

版权

本文介绍了Android中的CardView控件，它是一个用于创建卡片式布局的容器，常见于ListView和RecyclerView的Item中。CardView提供设置背景色、圆角大小、阴影等属性，便于自定义卡片样式。文章还展示了如何在代码中实现CardView，并提供了一个模拟身份证的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的源代码地址：点击打开链接