安卓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.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/purple_200"
        app:cardCornerRadius="10dp"
        app:contentPadding="20dp">

        <TextView
            android: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.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="60dp">

        <TextView
            android: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.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

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

            <TextView
                android: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.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/purple_200"
            android:orientation="vertical">

            <TextView
                android: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.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:background="#440000ff"
        app:cardBackgroundColor="#44ff0000"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <TextView
            android: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.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ff0000"
        android:background="#00ff00"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000ff"
            android:text="设置卡片背景"
            android:textColor="#000" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C#Csharp,SharpPcap网络抓包程序及源码（适合网络分析直接使用或源码二次开发）

C#Csharp,SharpPcap网络抓包程序及源码（适合网络分析直接使用或源码二次开发）

目录 1.程序简介2.程序截图3.程序源码 1.程序简介 C#Csharp,SharpPcap网络抓包程序及源码&#xff08;适合网络分析直接使用或源码二次开发&#xff09; 2.程序截图 3.程序源码 https://download.csdn.net/download/xzzteach/89325817
阅读更多...
BOM..

BOM..

区别&#xff1a;
阅读更多...
html5 笔记01

html5 笔记01

01 表单类型和属性 input的type属性 单行文本框: typetext 电子邮箱 : typeemail 地址路径 : type url 定义用于输入数字的字段: typenumber 手机号码: typetel 搜索框 : typesearch 定义颜色选择器 : typecolor 滑块控件 : typerange 定义日期 :typedate 定义输入时间的控件…
阅读更多...
【OceanBase诊断调优】—— 直连普通租户时遇到报错：Tenant not in this server

【OceanBase诊断调优】—— 直连普通租户时遇到报错：Tenant not in this server

本文介绍了直连 OceanBase 数据库中的普通租户时&#xff0c;出现报错&#xff1a;ERROR 5150 (HY000) : Tenant not in this server 的处理方法。 问题描述 在 n-n 或者 n-n-n (n>1) 的部署架构中&#xff0c;使用 2881 端口 直连 OceanBase 集群的普通租户&#xff0c;可…
阅读更多...
首都师范大学聘请旅美经济学家向凌云为客座教授

首都师范大学聘请旅美经济学家向凌云为客座教授

2024年4月17日&#xff0c;首都师范大学客座教授聘任仪式在首都师范大学资源环境与旅游学院举行。首都师范大学资源环境与旅游学院院长吕拉昌主持了仪式&#xff0c;并为旅美经济学家向凌云教授颁发了聘书。 吕拉昌院长指出&#xff0c;要贯彻教育部产学研一体化战略&#xff0…
阅读更多...
给树莓派配置静态IP地址

给树莓派配置静态IP地址

第一步&#xff1a;查找默认网关 打开windowr&#xff1b;输入cmd&#xff0c; 输入 最后一行就是默认网关 ipconfig第二步&#xff1a;确定分配好给树莓派的IP地址 要注意&#xff1a;&#xff08;1&#xff09;静态ip地址与路由器网段保持一致&#xff08;2&#xff09;与…
阅读更多...
知乎广告推广开户最低需要多少钱？

知乎广告推广开户最低需要多少钱？

精准高效的广告推广&#xff0c;是企业成功的关键&#xff0c;知乎作为知识分享与交流的高端平台&#xff0c;汇聚了大量高质量用户群体&#xff0c;无疑是品牌传播与产品推广的黄金之地。云衔科技作为您数字营销旅程中的得力伙伴&#xff0c;正以专业的知乎广告开户及代运营服…
阅读更多...
Qt快速入门到熟练(电子相册项目(一))

Qt快速入门到熟练(电子相册项目(一))

经过一段时间的学习&#xff0c;相信大家对QT的基本用法都有所了解&#xff0c;从这篇文章开始&#xff0c;我准备记录一下电子相册的项目的一个学习过程。 实现项目创建功能 对于这个电子相册的项目&#xff0c;我并没有在一开始就把所有可能用到的功能模块去事无巨细的考虑周…
阅读更多...
作为 App 开发者会推荐安装的 Mac App

作为 App 开发者会推荐安装的 Mac App

Xcode&#xff0c;作为 App 开发者&#xff0c;必须安装的工具。当然&#xff0c;有经验的开发者不会从 Mac App Store 下载&#xff0c;而是从网站下载&#xff0c;除了安装过程更可控&#xff0c;也方便多版本共存。此外&#xff0c;我不信任任何第三方下载方式&#xff1a; …
阅读更多...
在gitlab CICD中 小试 hooks:pre_get_sources_script 功能

在gitlab CICD中 小试 hooks:pre_get_sources_script 功能

参考链接&#xff1a; hooks:pre_get_sources_script 功能简介 hooks:pre_get_sources_script 是gitlab CICD中的一个功能&#xff0c;该功能可以指定在克隆 Git 仓库和任何子模块之前要在执行器上执行的某些命令。例如&#xff1a; 调整 Git 配置导出跟踪变量 下来简单给…
阅读更多...
Vivado IP核的快速入门 官方手册和例程

Vivado IP核的快速入门 官方手册和例程

在IP Catalog中选择要使用的IP核&#xff0c;可以查看支持的器件与资料。 在设计源sources页面中选中配置完成的IP核点击右键选择 Open IP Example Design&#xff0c;等待工程加载完成即可&#xff0c;可以点击Run Simulation进行功能仿真进行IP核的学习。 参考&#xff1…
阅读更多...
Android开发环境基础

Android开发环境基础

1.Android版本与SDK/API版本、JDK对应关系 参考博文&#xff1a; Android版本与SDK/API版本、JDK对应关系_minsdk 23对应安卓版本-CSDN博客 2.Android studio版本对用的gradle版本和插件版本&#xff08;注意事项&#xff09; 参考博文&#xff1a; Android studio版本对用的…
阅读更多...
CentOS-9配置静态IP地址

CentOS-9配置静态IP地址

查看配置命令nmcli CentOS 9 使用 nmcli 命令行工具进行网络配置。以下是配置静态 IP 地址的步骤和示例代码&#xff1a;相对以前centos7之类的&#xff0c;9版本的默认的网络是NetworkManager&#xff0c;网络配置也有较大改变 nmcli con show用vim进行编辑配文件 cd /etc/…
阅读更多...
vue3(一) - 结构认识

vue3(一) - 结构认识

通过之前博客应该已经完成了vue脚手架的认识和创建&#xff08;地址&#xff09;&#xff0c;这节我们简单介绍一下需要使用的一些关键技术&#xff0c;后续在详细介绍 结构目录 创建脚手架时&#xff0c;我选择了TypeScript,store,route这三个选项 index.html入口 node_mo…
阅读更多...
期中考复现

期中考复现

1.php渗透 用dirsearch 来扫描一下&#xff0c;发现了index.phps,访问一下 下载得到一个文件&#xff0c;打开看看&#xff0c;发现是一段php代码 分析得到&#xff0c; GET传参idadmin&#xff0c;主当$ GET[id] urldecode($ GET[id])时返回flag。即条件为 idadmin(urldecode…
阅读更多...
数据可视化第十天（爬虫爬取某瓣星际穿越电影评论，并且用词云图找出关键词）

数据可视化第十天（爬虫爬取某瓣星际穿越电影评论，并且用词云图找出关键词）

开头提醒 本次爬取的是用户评论&#xff0c;只供学习使用&#xff0c;不会进行数据的传播。希望大家合法利用爬虫。 获得数据 #总程序 import requests from fake_useragent import UserAgent import timefuUserAgent()headers{User-Agent:fu.random }page_listrange(0,10) …
阅读更多...
《QT实用小工具·六十五》基于QPropertyAnimation实现的移动动画和控件覆盖

《QT实用小工具·六十五》基于QPropertyAnimation实现的移动动画和控件覆盖

1、概述 源码放在文章末尾 该项目基于QPropertyAnimation实现了控件平移动画和控件之间的相互覆盖效果&#xff0c;项目demo演示如下所示&#xff1a; 项目解析&#xff1a; new QPropertyAnimation(ui.SingleOcclusion, “pos”); //创建动画对象&#xff0c;第一个参数传…
阅读更多...
二.常见算法--贪心算法

二.常见算法--贪心算法

&#xff08;1&#xff09;单源点最短路径问题 问题描述&#xff1a; 给定一个图&#xff0c;任取其中一个节点为固定的起点&#xff0c;求从起点到任意节点的最短路径距离。 例如&#xff1a; 思路与关键点&#xff1a; 以下代码中涉及到宏INT_MAX,存在于<limits.h>中…
阅读更多...
Vue从入门到实战 Day08~Day10

Vue从入门到实战 Day08~Day10

智慧商城项目 1. 项目演示 目标&#xff1a;查看项目效果&#xff0c;明确功能模块 -> 完整的电商购物流程 2. 项目收获 目标&#xff1a;明确做完本项目&#xff0c;能够收获哪些内容 3. 创建项目 目标&#xff1a;基于VueCli自定义创建项目架子 4. 调整初始化目录 目…
阅读更多...
基于springboot实现的校园博客系统

基于springboot实现的校园博客系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven…
阅读更多...
最新文章

Copyright @ 2022~2023