CardView是在Android 5.0推出的新控件,为了兼容之前的版本,将其放在了v7包里面,在现在扁平化设计潮流的驱使下,越来越多的软件使用到了CardView这一控件,那么这篇文章就来看看CardView怎么使用吧

CardView的特有属性

cardBackgroundColor 背景色

cardCornerRadius 边缘弧度数

cardElevation 高度

cardMaxElevation 最大高度

cardUseCompatPadding 设置内边距

cardPreventCornerOverlap 防止卡片内容和边角的重叠

contentPadding 内边距

contentPaddingLeft 内左边距

contentPaddingRight 内右边距

contentPaddingTop 内上边距

contentPaddingBottom 内下边距

CardView使用

由于CardView的使用比较简单,这里不再过多描述

使用前导入依赖

implementation 'com.android.support:cardview-v7:25.4.0'

文字

<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"
android:gravity="center"
tools:context=".MainActivity"> <android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
app:cardBackgroundColor="@android:color/holo_green_light"
app:cardCornerRadius="8dp"
app:cardElevation="10dp"
app:contentPadding="20dp"
android:layout_margin="0dp"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"
android:text="card view text"
android:textColor="@android:color/white" />
</android.support.v7.widget.CardView> </LinearLayout>

效果如下

图片

<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"
android:gravity="center"
tools:context=".MainActivity"> <android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardElevation="10dp"
app:contentPadding="20dp"> <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher" />
</android.support.v7.widget.CardView> </LinearLayout>

效果如下

适配注意点

  1. 边框圆角效果

    5.x 图片和布局都可以很好的呈现圆角效果,图片也变圆角了

    4.x 图不能变成圆角,如果要做成5.x一样的效果:通过加载图片的时候自己去处理成圆角
  2. 阴影效果
app:cardCornerRadius="10dp"<!--圆角(半径值越大圆角就越明显)-->
app:cardElevation="10dp" <!--阴影效果(值越大阴影效果越明显)-->
  1. 5.x上有Ripple水波纹效果(低版本自定义)
android:foreground="?attr/selectableItemBackground"
android:clickable="true"
  1. 5.x实现按下的互动效果下沉,松开弹起 - Z轴位移效果(低版本自定义)
android:stateListAnimator="@drawable/translation"
android:clickable="true"
  1. 可以设置内容的内边距
app:contentPadding="5dp"

细节:

5.x上面,边距阴影比较小,需要手动添加边距16dp

4.x上面,边距太大, 手动修改边距0dp(原因:兼容包里面设置阴影效果自动设置了margin来处理16dp)

translation.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="10dp"
android:valueType="floatType" />
</item> <item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>

高级UI-CardView的更多相关文章

  1. firefox 扩展开发笔记(三):高级ui交互编程

    firefox 扩展开发笔记(三):高级ui交互编程 前言 前两篇链接 1:firefox 扩展开发笔记(一):jpm 使用实践以及调试 2:firefox 扩展开发笔记(二):进阶开发之移动设备模拟 ...

  2. Android 高级UI设计笔记07:RecyclerView 的详解

    1. 使用RecyclerView       在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...

  3. iOS开发——高级UI&带你玩转UITableView

    带你玩装UITableView 在实际iOS开发中UITableView是使用最多,也是最重要的一个控件,如果你不会用它,那别说什么大神了,菜鸟都不如. 其实关于UItableView事非常简单的,实 ...

  4. 高级UI晋升之自定义View实战(六)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从Android 自定义属性动画&Camera动画来介绍自定义V ...

  5. 高级UI晋升之布局ViewGroup(四)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从LinearLayout.RelativeLayout.FrameLa ...

  6. 高级UI晋升之常用View(三)中篇

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从ViewPager来介绍常用View:文章目录 一.简介 二.基本使用 ...

  7. 高级UI晋升之常用View(三)上篇

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将先从以下两个内容来介绍常用View: [RecycleView] [Ca ...

  8. 高级UI晋升之View渲染机制(二)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 优化性能一般从渲染,运算与内存,电量三个方面进行,今天开始说聊一聊Android ...

  9. 高级UI晋升之触摸事件分发机制(一)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 0. 前言 鉴于安卓分发机制较为复杂,故分为多个层次进行讲解,分别为基础篇.实践 ...

  10. Android 高级UI设计笔记21:Android SegmentView(分段选择控件)

    1. 分段控制(SegmentView) 首先我们先看看什么是SegmentView的效果,如下: 分段控制这个View控件是ios7的分段控制,和QQ消息页面顶部的效果一样,android没有这个控 ...

随机推荐

  1. 那些被Oracle优化的程序员

    甲骨文(中国)是一家很有趣的公司,势头强劲,却被公认为养老公司(俗称西二旗养老院).风光无限,却也走上了裁员之路. 据甲骨文员工透漏,前一天晚上还在加班改bug,第二天就通知被裁了,甚至要求被裁员工在 ...

  2. git的实际工作经验总结

    分支工作的一个较佳的实践, 即git工作的最佳实践 从最初的svn到后来的git,上来给我的感觉就是git更方便, 可以在本地进行版本的提交,回退. 后来对hash有所了解, 知道了git的每个版本其 ...

  3. Python逆向(四)—— Python内置模块dis.py源码详解

    一.前言 上一节我们对Python编译及反汇编做了讲解,大家知道dis模块可以将编译好的pyc文件中提取出来的PyCodeObject反汇编为可以阅读字节码形式.本节我们对dis模块中的源码进行详细的 ...

  4. @RestController和@GetMapping

    @RestController 可以代替@Controller使用,使用了@RestController的控制器默认所有请求方法都用了@ResponseBody注解. @GetMapping(&quo ...

  5. CSS3字体大小rem属性用法

    PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...

  6. CF1208题解

    C \(\begin{aligned}\ 0 0 1 1\\ 0 0 1 1\\ 2 2 3 3\\ 2 2 3 3\\ \end{aligned}\)将每个四方格分别加上\(0,4,8,12\) D ...

  7. [Shell]利用JS文件反弹Shell

    0x01 模拟环境 攻击: kali ip: 192.168.248.132 测试: windows 7 x64 ip: 192.168.248.136 0x02 工具地址 https://githu ...

  8. arts 打卡12周

    一 算法:  字符串转换整数 (atoi)   请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找 ...

  9. What is content-type and datatype in an AJAX request?

    https://api.jquery.com/jquery.ajax/ What is content-type and datatype in an AJAX request? contentTyp ...

  10. chrome 等浏览器不支持本地ajax请求,的问题

    XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross orig ...