安卓CardView使用

目录

  • 前言
  • 一、基础使用
    • 1.1 依赖导入
    • 1.2 CardView的常用属性
    • 1.3 CardView继承关系
  • 二、关于Z轴的概念
  • 三、CardView效果
    • 3.1 圆角 CardView
    • 3.2 阴影 CardView
    • 3.3 设置卡片背景
    • 3.4 设置卡片背景（内部颜色）
    • 3.5 同时设置背景颜色

前言

CardView是Android支持库中提供的一个视图容器，用于在界面中显示卡片式布局。它可以让开发者轻松地创建具有阴影效果和圆角边框的卡片，使界面看起来更加美观和现代化。

一、基础使用

1.1 依赖导入

要在项目中使用CardView，首先需要在build.gradle文件中添加支持库的依赖：

implementation 'androidx.cardview:cardview:1.0.0'

或者

implementation 'com.google.android.material:material:1.10.0'

com.google.android.material:material:1.10.0: 这个支持库提供了 Material Design 风格的 UI 组件，包括按钮、文本框、菜单、底部导航栏等。Material Design 是 Google 推出的一种设计语言，旨在提供一致、直观、美观的用户界面体验。使用这个支持库可以快速构建符合 Material Design 标准的界面。
androidx.cardview:cardview:1.0.0: 这个支持库提供了 CardView 视图容器，用于创建卡片式布局。
material包含cardview。

1.2 CardView的常用属性

XML 属性方法描述
app:cardBackgroundColorsetCardBackgroundColor(int color)设置背景颜色
app:cardCornerRadiussetRadius(float radius)设置圆角大小
app:cardElevationsetCardElevation(float elevation)设置 z 轴的阴影
app:cardMaxElevationsetMaxCardElevation(float maxElevation)设置 z 轴的最大高度值
app:cardUseCompatPaddingsetUseCompatPadding(boolean useCompatPadding)是否使用 CompatPadding 默认值为 false
app:cardPreventCornerOverlapsetPreventCornerOverlap(boolean preventCornerOverlap)是否给 content 添加 padding，来阻止与圆角重叠，默认值为 true
app:contentPaddingsetContentPadding(int left, int top, int right, int bottom)设置内容的内边距 padding
app:contentPaddingLeftsetContentPadding(int left, int top, int right, int bottom)设置内容的左边距 padding
app:contentPaddingTopsetContentPadding(int left, int top, int right, int bottom)设置内容的上边距 padding
app:contentPaddingRightsetContentPadding(int left, int top, int right, int bottom)设置内容的右边距 padding
app:contentPaddingBottomsetContentPadding(int left, int top, int right, int bottom)设置内容的底边距 padding

需要注意的是有的前缀是 app ，而不是 android 。

1.3 CardView继承关系

在布局文件中创建 CardView 控件，使用方法跟 ViewGroup 一致，因为CardView继承自FrameLayout ,而FrameLayout 继承自ViewGroup 。

public class CardView extends FrameLayout {
public class FrameLayout extends ViewGroup {

可以在 CardView 中添加一系列的子控件。一般情况下，把 CardView 当做一个父容器，里面可以包含其他子 View，在 ListView 或者 RecyclerView 中充当 item 布局使用，使每一个item圆角化、美观。

二、关于Z轴的概念

Android5.0 引入了Z轴的概念，可以让组件呈现3D效果.
看下面这幅图：
在这里插入图片描述
图中的FAB（FloatingActionButton）很明显是浮在界面上的，这就是Z轴的效果.

Z属性可以通过elevation和translationZ进行修改
Z＝ elevation＋translationZ

android:elevation=" "  设置该属性使控件有一个阴影，感觉该控件像是“浮”起来一样，达到3D效果
android:translationZ=""  设置该组件阴影在Z轴（垂直屏幕方向）上的位移

像FloatingActionButton就可以通过app:elevation=" “使用Z属性，
CardView可以通过app:cardElevation=” " 来使用。

app:cardCornerRadius=" " 
圆角的半径，效果就是上面四个角的弧度

app:cardElevation=" " 
阴影大小

点击之后的涟漪效果

android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"

三、CardView效果

3.1 圆角 CardView

cardCornerRadius圆角大小，contentPadding内容内边距

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:background="@color/purple_200"app:cardCornerRadius="10dp"app:contentPadding="20dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="圆角 CardView "android:textColor="@color/black" /></androidx.cardview.widget.CardView>
</LinearLayout>

在这里插入图片描述

3.2 阴影 CardView

cardElevation的效果。

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"app:cardCornerRadius="10dp"app:cardElevation="60dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="20dp"android:text="阴影 CardView"android:textColor="@color/black" /></androidx.cardview.widget.CardView>
</LinearLayout>

在这里插入图片描述

3.3 设置卡片背景

cardBackgroundColor的效果

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"app:cardBackgroundColor="@color/purple_200"app:cardCornerRadius="10dp"app:cardElevation="20dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000"android:text="设置卡片背景" /></LinearLayout></androidx.cardview.widget.CardView>
</LinearLayout>

在这里插入图片描述

3.4 设置卡片背景（内部颜色）

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"app:cardCornerRadius="10dp"app:cardElevation="20dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/purple_200"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="设置卡片背景"android:textColor="#000" /></LinearLayout></androidx.cardview.widget.CardView>
</LinearLayout>

在这里插入图片描述

3.5 同时设置背景颜色

同时设置 app:cardBackgroundColor 和 android:background。

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"android:background="#440000ff"app:cardBackgroundColor="#44ff0000"app:cardCornerRadius="10dp"app:cardElevation="20dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#440000ff"android:text="设置卡片背景"android:textColor="#000" /></androidx.cardview.widget.CardView>
</LinearLayout>

在这里插入图片描述

无透明度

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"app:cardBackgroundColor="#ff0000"android:background="#00ff00"app:cardCornerRadius="10dp"app:cardElevation="20dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#0000ff"android:text="设置卡片背景"android:textColor="#000" /></androidx.cardview.widget.CardView>
</LinearLayout>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/13576.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安卓调试问题记录

安卓调试问题记录

将之前Qt开发安卓时遇到的一些报错记录下 问题1 FAILURE: Build failed with an exception. What went wrong: A problem occurred configuring root project ‘android-build’. ​ >Could not resolve all files for configuration ‘:classpath’. ​ >Could not dow…
阅读更多...
ubuntu rk3399 自启脚本

ubuntu rk3399 自启脚本

systemd 默认读取 /etc/systemd/system 下的配置文件&#xff0c;该目录下的文件会链接/lib/systemd/system/下的文件。 执行 ls /lib/systemd/system 你可以看到有很多启动脚本&#xff0c;其中就有我们需要的 rc.local.service 打开脚本内容&#xff08;如果没有就创建&…
阅读更多...
WXML模板语法-数据绑定

WXML模板语法-数据绑定

1.数据绑定的基本原则 (1)在data中定义数据 (2)在WXML中使用数据 2.在data页面中定义数据&#xff1a;在页面对应的.js文件中&#xff0c;把数据定义在data对象中即可 &#xff08;这里打错了 应该是数组类型的数据... 报意思啊&#xff09; 3.Mustache语法的格式 把data中的…
阅读更多...
低代码开发平台：开启企业数字化转型的快捷通道

低代码开发平台：开启企业数字化转型的快捷通道

低代码开发平台&#xff08;Low-Code Development Platform&#xff09;是近年来企业数字化转型中备受瞩目的技术工具&#xff0c;其被誉为加速业务上线的利器。随着信息技术的迅猛发展&#xff0c;企业对于数字化的需求与日俱增&#xff0c;但传统的软件研发流程往往耗时耗力&…
阅读更多...
MATLAB|【免费】融合正余弦和柯西变异的麻雀优化算法SCSSA-CNN-BiLSTM双向长短期记忆网络预测模型

MATLAB|【免费】融合正余弦和柯西变异的麻雀优化算法SCSSA-CNN-BiLSTM双向长短期记忆网络预测模型

目录 主要内容 部分代码 部分结果一览 下载链接 主要内容 该程序实现多输入单输出预测&#xff0c;通过融合正余弦和柯西变异改进麻雀搜索算法&#xff0c;对CNN-BiLSTM的学习率、正则化参数以及BiLSTM隐含层神经元个数等进行优化&#xff0c;并对比了该改进算法…
阅读更多...
PHP质量工具系列之phpunit

PHP质量工具系列之phpunit

安装 composer require phpunit/phpunit --dev编写用咧 单元测试 以下是一个thinkphp6/8的示例&#xff0c;可根据实际情况修改&#xff0c;一般是放在项目目录的tests文件夹中&#xff0c;tests文件夹和public同级 <?php declare (strict_types 1);namespace tests;u…
阅读更多...
摄像头应用测试

摄像头应用测试

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…
阅读更多...
LLM 大模型学习必知必会系列(八)：10分钟微调专属于自己的大模型

LLM 大模型学习必知必会系列(八)：10分钟微调专属于自己的大模型

LLM 大模型学习必知必会系列(八)&#xff1a;10分钟微调专属于自己的大模型 1.环境安装 # 设置pip全局镜像 (加速下载) pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ # 安装ms-swift pip install ms-swift[llm] -U# 环境对齐 (通常不需要运行. …
阅读更多...
Linux 信号捕捉与处理

Linux 信号捕捉与处理

&#x1f493;博主CSDN主页:麻辣韭菜&#x1f493;   ⏩专栏分类&#xff1a;Linux知识分享⏪   &#x1f69a;代码仓库:Linux代码练习&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Linux知识   &#x1f51d; ​ 目录 前言 1. 信号的处理时机 1.1用户…
阅读更多...
【排版问题解决】word加入公式时字间距突然变大

【排版问题解决】word加入公式时字间距突然变大

出现以下问题 解决方案 第一步:选择段落 第二步 段落括起来后右键选择“段落”- 第三步 “换行和分页”-在换行里打勾“允许西文在单词中间换行”。 恢复格式
阅读更多...
vue.js状态管理和服务端渲染

vue.js状态管理和服务端渲染

状态管理 vuejs状态管理的几种方式 组件内管理状态&#xff1a;通过data&#xff0c;computed等属性管理组件内部状态 父子组件通信&#xff1a;通过props和自定义事件实现父子组件状态的通信和传递 事件总线eventBus&#xff1a;通过new Vue()实例&#xff0c;实现跨组件通…
阅读更多...
LP-MSPM03507学习资料汇总

LP-MSPM03507学习资料汇总

（因对MSPM0研究不够深入，故暂不开启浏览权限，权当记录学习。但愿尽快掌握供大家免费阅读。有意者可私信我共同学习） 一、延时函数 1、滴答定时器SYSTICK 1.1 SysConfig配置 配置1ms延时函数，并开启中断 1.2 编写延时函数delay_ms unsigned int utick = 0;//滴答定时器中…
阅读更多...
57. UE5 RPG 处理AI敌人转向以及拾取物品的问题

57. UE5 RPG 处理AI敌人转向以及拾取物品的问题

在上一篇文章中&#xff0c;我们实现了使用AI行为树控制敌人进行移动&#xff0c;它们可以一直跟随玩家&#xff0c;虽然现在还未实现攻击。但在移动过程中&#xff0c;我发现了有两个问题&#xff0c;第一个是敌人转向的时候很僵硬&#xff0c;可以说是瞬间转向的&#xff0c;…
阅读更多...
Vue3实战笔记（39）—封装页脚组件，附源码

Vue3实战笔记（39）—封装页脚组件，附源码

文章目录 前言一、封装页脚组件二、使用组件总结 前言 在Web开发中&#xff0c;页脚组件是一个重要的部分&#xff0c;它为用户提供关于网站的信息、导航链接以及版权声明等。而封装页脚组件则是一种高效的方法&#xff0c;可以提高代码的可重用性和可维护性。 一、封装页脚组…
阅读更多...
重生之我要精通JAVA--第五周笔记

重生之我要精通JAVA--第五周笔记

文章目录 APIJDK7时间Date时间类CalendarSimpleDateFormat 类SimpleDateFormat 类作用 JDK8时间Zoneld时区 包装类Integer成员方法 Arrays Lambda表达式标准格式注意点好处省略写法 集合进阶Collection迭代器遍历Collection集合获取迭代器Iterator中的常用方法细节注意点 增强f…
阅读更多...
c++/c语法基础【2】

c++/c语法基础【2】

目录 1.memset 数组批量赋值 2.字符数组 ​编辑输入输出： 字符数组直接输入输出%s： gets！ string.h 1.strlen：字符串去掉末尾\0的长度
阅读更多...
机器学习势系列教程（3）：cp2k的安装

机器学习势系列教程（3）：cp2k的安装

大家好&#xff0c;我是小马老师。 本文继续介绍机器学习势相关内容&#xff1a;cp2k的安装。 和abacus一样&#xff0c;cp2k也是一款开源的第一性原理模拟软件&#xff0c;模拟的数据也可作为机器学习势的训练数据集。 cp2k安装方法也很多&#xff0c;常见的有docker安装、…
阅读更多...
2024年中国电机工程学会杯数学建模思路 - 案例：最短时间生产计划安排

2024年中国电机工程学会杯数学建模思路 - 案例：最短时间生产计划安排

# 前言 2024电工杯(中国电机工程学会杯)数学建模思路解析 最新思路更新(看最新发布的文章即可): https://blog.csdn.net/dc_sinor/article/details/138726153 最短时间生产计划模型 该模型出现在好几个竞赛赛题上&#xff0c;预测2022今年国赛也会与该模型相关。 1 模型描…
阅读更多...
安当SLA操作系统双因素认证——成功解决Windows远程桌面登录的安全问题

安当SLA操作系统双因素认证——成功解决Windows远程桌面登录的安全问题

Windows远程桌面登录的安全风险主要包括以下几个方面&#xff1a; 弱密码和暴力破解&#xff1a;如果远程桌面用户使用了弱密码&#xff0c;或者密码被泄露&#xff0c;攻击者可能会使用暴力破解技术来尝试猜测密码&#xff0c;从而获取远程桌面的访问权限。中间人攻击&#x…
阅读更多...
Sublime Text 基础教程（个人总结）

Sublime Text 基础教程（个人总结）

Sublime Text 是一款广受欢迎的代码编辑器&#xff0c;以其简洁的界面和强大的功能而著称。它支持多种编程语言&#xff0c;具有高效的代码编辑和管理功能。本教程将详细介绍如何使用 Sublime Text&#xff0c;从安装到高级使用技巧&#xff0c;帮助你充分利用这款工具。 目录…
阅读更多...
最新文章

Copyright @ 2022~2023