ChayChan
ChayChan

MaterialDesign学习篇(七)，CardView卡片式布局的使用

什么是CardView

CardView顾名思义就是一个卡片型的View，它是在Android5.0引入的一个控件，作为一个容器使用，它本身继承于FrameLayout，可以说它的使用和FrameLayout差不多，也是用来包裹一些子View，只不过它可以添加圆角和阴影的效果，经常在ListView或RecyclerView的item布局中作为容器使用，使内容看起来更加突出和显眼。

如何使用CardView

先看下效果，未使用CardView时:

MaterialDesign学习篇(七)，CardView卡片式布局的使用_第1张图片

使用CardView时的效果:

MaterialDesign学习篇(七)，CardView卡片式布局的使用_第2张图片

导入依赖

compile 'com.android.support:cardview-v7:26.0.0-alpha1'

布局文件中，使用CardView

和使用FrameLayout一样，直接用CardView作为容器包裹，其中app:contentPadding="5dp"指定了卡片内容于边距的间隔为5dp，app:cardElevation="5dp"指定了卡片阴影的大小为5dp，app:cardCornerRadius="5dp"指定了卡片的圆角大小为5dp。是不是看起来有种卡片的形状，相比没有添加CardView,是不是显得比较好看。

CardView的一些属性说明

   属性                             说明

cardBackgroundColor              卡片的背景颜色

cardCornerRadius                 卡片的圆角大小

cardElevation                    阴影的大小

cardMaxElevation                 阴影最大高度

cardUseCompatPadding             设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式

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

contentPadding					 卡片内容于边距的间隔

contentPaddingTop 				 卡片内容与顶部的边距

contentPaddingBottom			 卡片内容与底部的边距

contentPaddingLeft				 卡片内容与左边的边距

contentPaddingRight				 卡片内容与右边的边距

本文对CardView做了简单的介绍，并演示了它的效果，需要源码的可以查看:

https://github.com/chaychan/MaterialDesignExercise

下一篇将为大家介绍RecyclerView和SwipeRefreshLayout，感兴趣的朋友可以继续查看：

MaterialDesign学习篇(八)，掌握RecyclerView和SwipeRefreshLayout

你可能感兴趣的:(material-design)

  • 关于material-design的笔记 案玉璃青
    颜色颜色不宜过多。选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。Appbar背景使用主色，状态栏背景使用深一级的主色或20%透明度的纯黑。小面积需要高亮显示的地方使用辅助色。其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。黑色：[87%普通文字][54%减淡文字][26%禁用状态/提示文字][12
  • 【转】Material-Design深色的主题 薯条你哪里跑
    转自大火炬的公众号业余体验设计今年谷歌开发者大会新增Darktheme并更新了Material-DesignColor章节，Darktheme内容非常翔实，详细指导设计师一步一步适配Darktheme，大量案列说明包括一整套设计组件规范。深色主题是一种低光环境UI，主要显示黑色界面。**用法**深色主题在大部分界面显示黑色。它常常作为产品默认主题的备用选项。深色主题降低了设备屏幕发出光的亮度，但是
  • Material design 和 iOS 10 手机交互上的相同和区别 友交互
    https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/https://material.io/guidelines/material-design/introduction.html1、结构两家叫法不同，大体上都是4个栏，顶部状态栏。状态栏下是放带有页面名称的一栏。底部的导航栏。位
  • Top 15 - Material Design框架和类库(译) 凯凯刘
    Materialdesign是Google开发的，目的是为了统一公司的web端和手机端的产品风格。它是基于很多的原则，比如像合适的动画，响应式，以及颜色和阴影的使用。完整的指南详情请看这http://www.google.com/design/spec/material-design/introduction.html。虽然Google的设计看起来主要是应用在Android上的应用，但是也是个很好
  • Material Design之主题样式 leigo MaterialDesign
    中文版：http://wiki.jikexueyuan.com/project/material-design/英文版：https://www.google.com/design/spec/material-design/introduction.html@color/primary@color/primary_dark@color/accent
  • 大量 Material Design 学习资源 funny06
    汇集MaterialDesigh相关的各种资源.MaterialDesign介绍：http://www.google.com/design/spec/material-design/introduction.htmlMaterialDesign中文文档官方放出的大量Demo，含MaterialDesign相关设计资源https://github.com/google/material-design
  • Android常用UI系列(上) 水月沐風
    UI模块淘宝天猫使用的UI框架viewpager炫酷画廊效果炫酷定制输入框折纸view过渡动画炫酷动效控件库基本项目开发框架炫酷滑动翻页效果侧拉菜单的友好优雅的引导页清新的扩展页面内容预加载阴影效果幸运转盘效果炫酷的cardview交互友好的文字动画时光轴(流程步骤)效果viewpager转换效果一个万能的android下拉上拉刷新的框架material-design搜索框可伸拉隐藏显示的scro
  • Material-design icon生成插件 九尾狐狸 Android
    在使用androidstudio开发android应用的过程，会遇到一些很不错的插件，其中android-material-design-icon-generator-plugin是一个Materialdesign风格的icon生成器，虽然公司有美术，这个插件没啥用，但要是自己个人的项目，就用处大大的。这个原作者的插件，我使用起来总觉得不太好用，想要添加自己想要的功能：-记忆功能（能够保存最后的配
  • Android开发中的资料收集 QiMenger android日常学习笔记
    materaildegisn设计中文网：http://wiki.jikexueyuan.com/project/material-design/图片选择第三方compile'com.github.LuckSiege.PictureSelector:picture_library:v2.2.2'时间选择控件：//时间选择器compile'com.feezu.liuli:timeselector:1.
  • Android开发必备的“80”个开源库，分类整理！ 「已注销」
    AndroidDeveloperhttps://developer.android.google.cn/AndroidTraining中文版http://hukai.me/android-training-course-in-chinese/index.htmlMaterialDesign中文版http://wiki.jikexueyuan.com/project/material-design/
  • MaterialDesign设计风格之自定义toolbar的简单实现 HIManH Android
    MaterialDesign是Google在2014I/O年发布的一种设计风格.android5.0也是开始使用这种设计风格英文文档：http://www.google.com/design/spec/material-design/中文网站：http://wiki.jikexueyuan.com/project/material-design/今天我们主要学习toolbar，还有Google提供
  • Material design 帅气的欧巴
    GoogleI/O2014发布了MaterialDesign设计语言GoogleDesign：https://design.google.com/AndroidDesign:http://developer.android.com/design/index.html中文翻译：http://wiki.jikexueyuan.com/project/material-design/百科介绍Materi
  • Material Design LightDreams
    从Android5.0开始，Google推出了全新设计语言、MaterialDesign材质设计，官网提供了超过900个Materialicon设计可以让更多设计同学了解Material设计准则，认同并遵守设计规范。拒绝一昧的崇尚iOS风。(o)/https://material.io/icons/http://www.mobileui.cn/material-design/http://topi
  • Top 15 - Material Design框架和类库 前端学习123321123
    _Materialdesign_是Google开发的，目的是为了统一公司的web端和手机端的产品风格。它是基于很多的原则，比如像合适的动画，响应式，以及颜色和阴影的使用。完整的指南详情请看这里（http://www.google.com/design/spec/material-design/introduction.html）虽然Google的设计看起来主要是应用在Android上的应用，但是也
  • Material Design是什么？ Pixel32
    http://www.google.com/design/spec/material-design/introduction.html1、专为跨平台体验的一致性而设计。2、三维空间，z轴垂直于屏幕，用来表现元素的层叠关系。z值(海拔高度)越高，元素离界面底层(水平面)越远，投影越重。默认所有的元素的厚度都是1dp。对元素进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同
  • Elevation & shadows 出走的三毛
    官网地址：https://material.io/guidelines/material-design/elevation-shadows.htmlObjectsinmaterialdesignpossesssimilarqualitiestoobjectsinthephysicalworld.material的对象具有与物理世界的实际物品相似的特点。Inthephysicalworld,obje
  • 使用WPF实现的 喜马拉雅FM 资源下载工具 xhznl
    因为喜马拉雅pc网站上没有提供下载功能，之前有个同事问我有没有办法将资源下载到本地，当然通过浏览器F12也能找到下载地址，但挺麻烦。正好最近想学wpf，周末在家也没事，于是对着百度撸了下代码。当然只能下载免费资源，付费的还是支持正版吧。。。直接上图：其中使用到的一些开源库：material-design风格UI——MaterialDesignThemeshttps://github.com/Mat
  • Enviroment 出走的三毛
    官网地址：https://material.io/guidelines/material-design/environment.htmlMaterialdesignisathree-dimensionalenvironmentcontaininglight,material,andcastshadows.Materialdesign是一个包含了光，材质，以及投影的三维环境。Allmaterialo
  • Material Design kim_liu
    关于MaterialDesign的各种详细的介绍，极客学院的wiki写的非常清楚了：http://wiki.jikexueyuan.com/project/material-design/那么我们现在就开始撸代码本文目录1.控制项目全局样式1.1无论是使用AS还是ADT，都要引入appcompat-v7,AS使用下面这一句代码引入，解决Android碎片化开发的问题，碎片化开发，就是在不同版本上的
  • Android UI-Material Design-阴影效果 twinsnan
    阴影效果根据MaterialDesign的官方介绍，如下网址，在设计的时候我们可以通过设置Z轴的高度的阴影效果来模拟比较真实的控件效果。http://www.google.com/design/spec/material-design/http://wiki.jikexueyuan.com/project/material-design/Material环境是一个三维的空间，这意味着每个对象都有x
  • Android Color Palette 番茄尼个西红柿
    androidmaterialdesign中文版地址：http://wiki.jikexueyuan.com/project/material-design/https://wcc723.gitbooks.io/google_design_translate/content/style-icons.htmlPaste_Image.pngPaste_Image.pngPaste_Image.pngP
  • material design学习资料 一行code
    极客学院：http://wiki.jikexueyuan.com/project/material-design/CSDN博文：http://blog.csdn.net/xyz_lmn/article/details/48055919博文：http://www.jianshu.com/p/1e6eed09d48b15个优秀的materialdesign设计：http://www.cnblogs.c
  • MATERIAL DESIGN 鋼鉄侠
    MATERIALDESIGN干货http://www.uisdc.com/tag/material-design新版MATERIALDESIGN官方动效指南（一）http://www.uisdc.com/material-motion-design-guideline新版MATERIALDESIGN官方动效指南（二）http://www.uisdc.com/material-motion-desi
  • Material properties 出走的三毛
    官网地址：https://material.io/guidelines/material-design/material-properties.htmlMaterialhascertainimmutablecharacteristicsandinherentbehaviors.Material拥有某些一成不变的特点和固有的行为。Understandingthesequalitiesofmateri
  • Material-Design lizewenhh
    Material-Design介绍Materialdesign的相关控件在开发中使用##概述对于开发人员，Android21新增了许多新控件和新特性，这些控件和特性都是基于MaterialDesign的设计理念的，这一篇就来讲讲MaterialDesign给Android开发带来的变化。##主题和布局Material提供了下面三种主题@android:style/Theme.Material(da
  • 知乎日报客户端--每日看看板块 uweii 知乎日报客户端各个功能的实现Android知识碎碎片
    看完这一篇你应该学会：如何展示照片墙，并且保存图片到本地。效果图：上一篇讲的是：知乎日报板块的实现这一篇的知识点有：Okhttp，Picasso，CardView，动态请求权限，创建文件，文件夹，保存图片。先来布局：material-design，用得CardView，使用CardView记得添加com.android.support:cardview-v7:27.0.2依赖主代码：publicc
  • android design crazydane
    androiddesignmaterialhttps://material.io/guidelines/material-design/introduction.htmlchangetextappearancetextAppearancehttps://plus.google.com/+AndroidDevelopers/posts/gQuBtnuk6iGandroid:textAppearanc
  • Material Design设计规范学习笔记（一） SaraGao
    设计规范链接：http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html一、概述MaterialDesign设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。光效、表面质感、运动感（动效）这三点是解释物体运动规律、交互方式、空间关系的关键。借鉴传统印刷设计---排
  • 十大Material Design开源项目 战斗鸡排
    FYI:http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.htmlhttp://www.csdn.net/article/2014-11-21/2822753-material-design-libsallowtransparency="true"frameborder="0
  • Android 5.x新特性之elevation(阴影),tinting（着色）以及clipping（剪裁） 笨笨丫头~双
    快过年了，公司也没事做了，自己也闲了下来，一天天呆着真没意思，闲来没事自己研究研究了GoogleI/O2014发布 MaterialDesign设计，人性化的风格，丰富的色彩，使人机交互更完美。中文学习地址http://wiki.jikexueyuan.com/project/material-design/(这个好像是极客学院翻译的)，当然如果你的引文OK的话，也可以去看官方英文文档http:/
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他