Material Design 入门(二)——CardView

原创 2016年08月29日 17:32:37

上一章我们分享了TextInputLayout和TextInputEditText的使用方法,比较简单,下面我们再来分享一个小控件CardView的用法。

1、CardView的介绍和属性

1)官方介绍:

java.lang.Object
   ↳ android.view.View

   ↳ android.view.ViewGroup


   ↳ android.widget.FrameLayout



   ↳ android.support.v7.widget.CardView

CardView是Android 5.0中新出的一个控件,从上面的继承结构树中可以看出它的父类是FrameLayout,其实CardView就是在FrameLayout的基础上添加了圆角和阴影的效果。它通常被用在ListView和RecyclerView中,作为他们的itemView出现。


2)CardView介绍:

  • CardView_cardBackgroundColor 设置背景色
  • CardView_cardCornerRadius 设置圆角大小
  • CardView_cardElevation 设置z轴阴影
  • CardView_cardMaxElevation 设置z轴最大高度值
  • CardView_cardUseCompatPadding 是否使用CompadPadding
  • CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
  • CardView_contentPadding 内容的padding
  • CardView_contentPaddingLeft 内容的左padding
  • CardView_contentPaddingTop 内容的上padding
  • CardView_contentPaddingRight 内容的右padding
  • CardView_contentPaddingBottom 内容的底padding
补充:

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

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

上面是CardView的一些常用的属性,比较容易理解,直接上代码。

2、CardView的使用

1)添加CardView依赖库:

 compile 'com.android.support:cardview-v7:24.2.1'

2)在xml中使用CardView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:clickable="true"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp">

    <LinearLayout
        style="@style/CardView.Content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/ivBook"
            android:layout_width="109dp"
            android:layout_height="135dp"
            android:src="@mipmap/ic_launcher"
            android:transitionName="书籍"/>

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

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Title"
                android:textColor="@android:color/darker_gray"/>

            <TextView
                android:id="@+id/tvDesc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="描述"
                android:textColor="@android:color/darker_gray"/>
        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>

3)效果如图:


效果还是不错的,也比较简单,大家可以动手试一下,以后再有圆角的需求就不用那么麻烦了呢。推荐大家看下这篇文章 http://www.jianshu.com/p/20ba212a5f0c

Material Design之CardView的使用

本文介绍CardView这个控件的使用,CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包,可在下载的sdk文件夹中找到。。。 使...
  • u010687392
  • u010687392
  • 2015年07月10日 14:11
  • 3473

Android Material Design学习之四CardView

CardView的使用
  • fxDes
  • fxDes
  • 2016年03月05日 22:26
  • 1981

Material Design——CardView的简单使用

作用卡片布局,有阴影、圆角、在V7包中添加CardView的依赖:compile 'com.android.support:cardview-v7:25.0.0'在XML中使用CardView: ...
  • xf616510229
  • xf616510229
  • 2016年11月25日 16:24
  • 376

android嵌套滑动- Material Design

一,android的嵌套滑动机制可以实现滑动事件的从子传递到父,并且也可以从父传递到子 嵌套滑动的类主要有  NestedScrollingChild, NestedScrollingChildH...
  • a465456465
  • a465456465
  • 2017年02月16日 19:42
  • 370

Material Design (二) ToolBar的使用

前言       在之前还TooBar还没出现之前,因为ActionBar并不是那么好用一直都没用用过,现在ActionBar已经过时了,Material Desgin 风格的ToolBar 在视觉动...
  • tonghua516
  • tonghua516
  • 2017年01月24日 11:26
  • 213

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

什么是CardViewCardView顾名思义就是一个卡片型的View,它是在Android5.0引入的一个控件,作为一个容器使用,它本身继承于FrameLayout,可以说它的使用和FrameLay...
  • Chay_Chan
  • Chay_Chan
  • 2017年08月02日 16:25
  • 491

手把手教你打造一个Material Design风格的App(四)

——接上文。 3.3实现导航抽屉菜单项的选择 尽管导航抽屉已经实现了,但是你会发现选择抽屉列表项并没有反应,这是因为我们还没有实现RecycleView items的点击监听。 因为我们在导航抽屉里...
  • u014738140
  • u014738140
  • 2015年05月27日 00:04
  • 2324

Android Material Design系列之主题样式介绍说明等

今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个项目时,系统自带了三个属性的颜色,现在就...
  • loongggdroid
  • loongggdroid
  • 2016年07月26日 10:52
  • 2107

手把手教你打造一个Material Design风格的App(二)

——接上文。 3.1添加ToolBar(ActionBar) 添加ToolBar非常简单,你需要做的仅仅是为toolbar创建一个单独的layout布局,如果你想在哪里展示toolbar,只要...
  • u014738140
  • u014738140
  • 2015年05月26日 23:45
  • 2671

Android最佳实践之Material Design

Material概述及主题学习地址:http://developer.android.com/training/material/get-started.html 使用material design...
  • ada_dengpan
  • ada_dengpan
  • 2016年04月09日 23:53
  • 4859
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Material Design 入门(二)——CardView
举报原因:
原因补充:

(最多只允许输入30个字)