material design(一)CardView的使用详解

本文介绍了Android 5.0中引入的CardView组件及其使用方法。详细讲解了CardView的属性,如背景颜色、圆角大小、阴影效果等,并提供了一个简单的示例布局。

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

前言:

android5.0发布的material design是一整套设计思想,同时也发布了相关的新的控件,CardView顾名思义,就像一个卡片一样,使用起来十分简单,主要是xml布局的时候需要针对不同的诸多属性进行配置即可。
使用起来很简单,build进项目中:

compile 'com.android.support:cardview-v7:25.2.0'

后面的版本号最好和其他引用的版本号一致。

我们来看看有哪些属性:

app:contentPadding    设置内容的padding 
app:contentPaddingLeft    设置内容的左padding 
app:contentPaddingTop     设置内容的上padding 
app:contentPaddingRight    设置内容的右padding 
app:contentPaddingBottom    设置内容的底padding

app:cardBackgroundColor    这是设置背景颜色 
app:cardCornerRadius   这是设置圆角大小 
app:cardElevation  这是设置z轴的高度
app:cardMaxElevation  这是设置z轴的最大高度值 
app:cardUseCompatPadding    设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式
app:cardPreventCornerOverlapV20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠

像这些以app开头的命名控件的属性主要是考虑到5.0一下系统的兼容性,其他android开头的属性和一般的控件类似。CardView类似FrameLayout,Z轴的高度产生的阴影效果是其最大特色,其他效果通过shape出drawable可以实现。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    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="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp"
    app:contentPadding="10dp"
    app:cardPreventCornerOverlap="true">

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

        <ImageView
            android:id="@+id/fruit_image"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="120dp"/>

        <TextView
            android:id="@+id/fruit_name"
            android:layout_margin="5dp"
            android:layout_gravity="center_horizontal"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

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

简单效果为:
这里写图片描述

推荐大家用这些符合material design设计的控件。
CardView是很简单,比较容易掌握的控件,下一篇将会将到RecycleView,作为取代listview的强大控件,强烈推荐使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值