今天说的又是一个5.0中才有的新控件——CardView(卡片视图)。这个东东其实我们早就见过了,无论是微博还是人人客户端,它都有出现。通常我们都是通过自定义一个背景图片,然后通过给layout进行设置背景样式来实现这个卡片视图。虽然现在5.0和第三方库都有了这个view,但是我还是很建议去自定义这个view,为啥?能在编译器中直观的看到效果,而且可定制度好。最重要的是自己做也不难,引入第三方库反而会增大应用的体积。总之,本篇主要讲解的还是如何使用开源库和supportV7中的cardView。

一、通过开源库来引入CardView

  在我写这篇文章的时候,这个开源库对于CardView没有做什么自定义的属性设置,也就能设置个背景色和大小。至于今后会不会有更多的属性加入呢?我感觉不太可能。这个开源库的思路就是用java和drawable进行结合产生view,这个drawable又是用图片来做的,当然没有用代码写的那么灵活了,如果要增加很多属性,只有一种办法:让作者对工程进行大刀阔斧的修改,改变自定义view的思路。

1.1 添加lib支持

首先还是下载lib,然后添加支持,并且写好命名空间。

https://github.com/navasmdc/MaterialDesignLibrary

添加lib支持后我们就可以用这个控件了,放入布局文件前还是要写命名空间的。

xmlns:app="http://schemas.android.com/apk/res-auto"

    <com.gc.materialdesign.views.Card
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />

 

如果没设定背景,那么在编辑器中是看不到大体的效果的,所以还是推荐设置个背景色,比较直观。右图是实际的效果

1.2 在布局文件中设置大小和背景色

android:layout_width="100dp"  因为CardView继承自RelativeLayout所以直接设定控件宽高就可以啦
android:layout_height="100dp"

<com.gc.materialdesign.views.Card
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:background="#ff0000" />

 android:background="@color/blue"   设置背景色,默认是白色

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="背景=#ff0000" /> <com.gc.materialdesign.views.Card
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:background="#ff0000" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="背景=@color/blue" /> <com.gc.materialdesign.views.Card
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:background="@color/blue" />

1.3 通过代码进行设置背景色

因为CardView继承自relativeLayout,所以父类的设置内边界等属性都是可以用的~

package com.example.hhh;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity; import com.gc.materialdesign.views.Card; public class CardTest extends ActionBarActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.card); Card card01 = (Card)findViewById(R.id.card01);
card01.setBackgroundColor(0xffff0000); Card card02 = (Card)findViewById(R.id.card02);
card02.setBackgroundColor(getResources().getColor(R.color.orange));
}
}

二、用google的SupportV7包中的cardView

这个CardView是google提供的,可以定制的东西就比较多啦

2.1 属性解释:

<resources>
<declare-styleable name="CardView">
<!-- Background color for CardView. -->
<!-- 背景色 -->
<attr name="cardBackgroundColor" format="color" />
<!-- Corner radius for CardView. -->
<!-- 边缘弧度数 -->
<attr name="cardCornerRadius" format="dimension" />
<!-- Elevation for CardView. -->
<!-- 高度 -->
<attr name="cardElevation" format="dimension" />
<!-- Maximum Elevation for CardView. -->
<!-- 最大高度 -->
<attr name="cardMaxElevation" format="dimension" />
<!-- Add padding in API v21+ as well to have the same measurements with previous versions. -->
<!-- 设置内边距,v21+的版本和之前的版本仍旧具有一样的计算方式 -->
<attr name="cardUseCompatPadding" format="boolean" />
<!-- Add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners. -->
<!-- 在v20和之前的版本中添加内边距,这个属性是为了防止卡片内容和边角的重叠 -->
<attr name="cardPreventCornerOverlap" format="boolean" />
<!-- 下面是卡片边界距离内部的距离-->
<!-- Inner padding between the edges of the Card and children of the CardView. -->
<attr name="contentPadding" format="dimension" />
<!-- Inner padding between the left edge of the Card and children of the CardView. -->
<attr name="contentPaddingLeft" format="dimension" />
<!-- Inner padding between the right edge of the Card and children of the CardView. -->
<attr name="contentPaddingRight" format="dimension" />
<!-- Inner padding between the top edge of the Card and children of the CardView. -->
<attr name="contentPaddingTop" format="dimension" />
<!-- Inner padding between the bottom edge of the Card and children of the CardView. -->
<attr name="contentPaddingBottom" format="dimension" />
</declare-styleable>
</resources>

2.2 小例子:

    <android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
app:cardBackgroundColor="#ff0000"
app:cardCornerRadius="10dp"
app:cardElevation="1dp"
app:cardMaxElevation="10dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true" >
</android.support.v7.widget.CardView>

具体使用方式请参考我之前的一篇文章,其实用起来也相当简单了。

Android5.0新控件CardView的介绍和使用:http://www.cnblogs.com/tianzhijiexian/p/4067308.html

Material Designer的低版本兼容实现(十四)—— CardView的更多相关文章

  1. Material Designer的低版本兼容实现(四)—— ToolBar

       Toolbar其实是一个ActionBar的变体,大大扩展了Actionbar.我们可以像对待一个独立控件一样去使用ToolBar,可以将它放到屏幕的任何位置,不必拘泥于顶部,还可以将它改变高度 ...

  2. Material Designer的低版本兼容实现(一)—— 简介 & 目录

    很长一段时间没写东西了,其实是因为最近在研究Material Designer这个东西,熬夜熬的身体也不是很好了.所以就偷懒没写东西,这回开的这个系列文章是讲如何将Material Designer在 ...

  3. Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat

    extends:http://www.cnblogs.com/tianzhijiexian/p/4087917.html 本文是对API中的方法做了介绍,如果想要看如何让这些方法兼容4.x或2.x可以 ...

  4. Material Designer的低版本兼容实现(十)—— CheckBox & RadioButton

    ChekBox的用途我们就不必多说了,算是一个很古老的控件了,何其类似的还有RadioButton,这个东西因为我目前还没写出来,所以用了别人的一个lib,这下面会说到.顺便说一句,如果你的app是在 ...

  5. Material Designer的低版本兼容实现(二)—— Theme

    Theme material主题可以定义为如下形式: @android:style/Theme.Material @android:style/Theme.Material.Light @androi ...

  6. Material Designer的低版本兼容实现(三)——Color

    在Material Designer中,色彩再一次被摆到了重要的位置上.官方文档中竟然给出了500种配色方案进行选择.就是为了给不同的手机.电视.手表上带来一直的用户体验. 更多用于控制色彩的属性,可 ...

  7. Material Designer的低版本兼容实现(十二)—— Slider or SeekBar

    Slider,我更喜欢叫他SeekBar,其实是一个东西啦,就是拖动条.5.0的拖动条和4.x上的HOLO风格完全不同,平添了一些精致.此外还加入了数值指示器,让用户在滑动的时候就能知道现在到了什么位 ...

  8. Material Designer的低版本兼容实现(十三)—— ProgressBar

    进度条我们都很常见了,新的设计规范中提出了各式各样的进度条,本篇就会介绍大部分进度条的实现.实现方式和规范的示例图可能略有差异,还是那句话根据具体需求进行改变吧. PS:本文较长 参考文档:http: ...

  9. Material Designer的低版本兼容实现(十一)—— Switch

    5.0中的switch和之前完全不同了,漂亮不漂亮咱们另说,总之4.x上是没有这样的效果了.实现方式有两种,一种是用这个兼容包来做类似的效果,一种是用传统的checkbox来代替.我感觉兼容包的效果是 ...

随机推荐

  1. 兼容到ie10的js文件导出、下载到本地

    话不多说,上代码: try { let reader = new FileReader(); let blob = new Blob([res.data], { type: 'application/ ...

  2. Flume分布式日志收集系统

    1.flume是分布式的日志收集系统,把收集来的数据传送到目的地去.2.flume里面有个核心概念,叫做agent.agent是一个java进程,运行在日志收集节点.通过agent接收日志,然后暂存起 ...

  3. React Native之原生模块的开发(Android)学习笔记

      目录 1.为什么我们需要原生模块开发 2.开发Android原生模块的主要流程 3.原生模块开发实战   1.为什么我们需要原生模块开发? 我们在用RN开发App的时候,有时候需要用到一些原生模块 ...

  4. 迈出第一步,Hexo博客搭建

    很早之前看到别人的博客就总想着自己之后也要搭一个,最近突然来了干劲,就开始搭起了博客.不过搭博客还真是一个累活,失败了不下十次,用了好几天的时间,感觉自己在浪费时间,但是看到现在博客终于能用了,非常开 ...

  5. java数组反射实现动态的判断一个对象是否是数组并且对数组进行拆包输出

    public static Map<String, String> maptoMapString(Map<String, ?> map) { return map.entryS ...

  6. git使用姿势

    IDEA 整合Git 可以在IDEA中Terminal中进行git操作 下面所说的快捷键操作都只是对于IDEA中 拉取提交代码 git pull 从远程仓库更新代码 (ctrl+t) git comm ...

  7. NOIP练习赛题目6

    长途旅行 难度级别:A: 运行时间限制:3000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 JY 是一个爱旅游的探险家,也是一名强迫症患者.现在JY 想要在C ...

  8. hdu 4452 37届金华赛区 K题

    题意:给一个n*n的格子,1在左上角,2在右下角,每个人有一个初始速度和方向,若遇到边缘,则朝相反方向前进,若两个人相遇则交换方向(注意方向改变后,人仍然需要移动),同时,每个人每过t1,t2时间就会 ...

  9. 一键安装LNMP/LAMP

    安装步骤:1.使用putty或类似的SSH工具登陆VPS或服务器: 登陆后运行:yum install screen安装  screen screen -S lnmp创建一个名字为lnmp的会话 2. ...

  10. FireDAC 下的 Sqlite [5] - 数据的插入、更新、删除

    先在空白窗体上添加: TFDConnection.TFDPhysSQLiteDriverLink.TFDGUIxWaitCursor.TFDQuery.TDataSource.TDBGrid(并在设计 ...