Android基础CardView的使用

什么是CardView

Android5.0中向我们介绍了一个全新的控件–CardView,从本质上看,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果。请注意:CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为一种容器使用。 顾名思义就是卡片view,可以设置阴影,圆角,等等。。
有一种简约的美,在V7包中引入。
CardView应该被使用在显示层次性的内容时;在显示列表或网格时更应该被选择,因为这些边缘可以使得用户更容易去区分这些内容。
比如ListView/RecyclerView的Item。

如何使用CardView

添加依赖包:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.2.0'

    
    compile 'com.android.support:cardview-v7:24.0.+'
}

布局文件引用:

通过源码知道CardView其实就是扩展于FrameLayout:

来个最简单的调用:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        >
    </android.support.v7.widget.CardView>

</RelativeLayout>

这里写图片描述

一点点的阴影效果。

记得导入:由于使用自定义属性-具体原因查看–自定义View

        xmlns:card_view="http://schemas.android.com/apk/res-auto"

下面CardView的属性:

  • CardView_cardBackgroundColor 设置背景色
  • CardView_cardCornerRadius 设置圆角大小
  • CardView_cardElevation 设置z轴阴影
  • CardView_cardMaxElevation 设置z轴最大高度值
  • CardView_cardUseCompatPadding 是否使用CompadPadding
  • CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
  • CardView_contentPadding 内容的padding
  • CardView_contentPaddingLeft 内容的左padding
  • CardView_contentPaddingTop 内容的上padding
  • CardView_contentPaddingRight 内容的右padding
  • CardView_contentPaddingBottom 内容的底padding

测试:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginTop="5dp"
        card_view:cardBackgroundColor="@android:color/white"
        card_view:cardCornerRadius="10dp"
        card_view:cardElevation="24dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_gravity="center">

            <ImageView
                android:id="@+id/img"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:scaleType="fitCenter"
                android:src="@mipmap/ic_launcher"
                />

            <TextView
                android:id="@+id/text_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/img"
                android:layout_centerHorizontal="true"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:text="This is a card view" />
        </LinearLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

这里写图片描述

大概就是这样用。具体设置一下属性即可。

发布了85 篇原创文章 · 获赞 40 · 访问量 24万+

猜你喜欢

转载自blog.csdn.net/lw_zhaoritian/article/details/52599362