天天看点

每天记录学习的新知识 : 圆角卡片 CardView 使用

简介

Android 5.0 版本中新增了CardView,CardView继承自FrameLayout类,并且可以设置圆角和阴影,使得控件具有立体性,也可以包含其他的布局容器和控件。

例~~~

1.运行效果

每天记录学习的新知识 : 圆角卡片 CardView 使用

丑可以加深印象

2.布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:cardCornerRadius="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@color/colorAccent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@color/colorPrimary"
                android:text="@string/app_name" />

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

</LinearLayout>
           

使用方法

1.引入

implementation 'com.android.support:design:28.0.0'
           

2.布局

使用起来特别简单,只要把内容放在一个容器内,在嵌套上CardView即可。

属性记录

Card_view:cardCornerRadius 卡片的圆角大小

CardView_cardBackgroundColor 设置背景色

CardView_cardElevation 阴影的大小

CardView_cardMaxElevation 阴影最大值

CardView_cardUseCompatPadding 是否使用CompadPadding

设置内边距,V21+的版本和之前的版本具有一样的计算方式。

部分机器不开这个属性会导致卡片效果“消失”,如荣耀6(6.0系统)。

CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap

在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠

CardView_contentPadding 卡片内容与边距的间隔

CardView_contentPaddingLeft 卡片内容与左边的间隔

CardView_contentPaddingTop 卡片内容与顶部的间隔

CardView_contentPaddingRight 卡片内容与右边的间隔

CardView_contentPaddingBottom 卡片内容与底部的间隔

参考:

CardView 简介和使用 : https://blog.csdn.net/shawnxiafei/article/details/81568537