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

相关文章推荐

Android——ViewPager实现3D画廊效果(ViewPager的加载动画)

这里写链接内容这个例子相信很多人已经接触过了,我今天觉得好玩自己写了写,参照了网上大家的一些例子,现在总结下自己的感受吧。 ViewPager的用法 android:clipChildren=”fal...

Materail Design 入门(十)—— RecyclerView的使用(一)

墨迹了这么久终于写到了Material Design系列的最后一篇了。这篇RecyclerView的使用仅作是知识的回顾吧。本章节我们一起来复习下Recyclerview布局的设置(竖向列表,横向列表...

Material Design UI Widgets —— CardView 卡片视图

本文转自:http://blog.csdn.net/xyz_lmn/article/details/35644799     Android L 开发者预览支持库提供两个新的Widgets,Rec...

安卓日记——玩转Material Design(RecyclerView+CardView篇)

前面安卓日记——玩转Material Design(伸缩顶部篇)提到要想用顶部伸缩必须要RecyclerView的配合,今天就给大家介绍一下RecyclerView的用法,顺带介绍一下CardView...

Material Design最佳体验(2): 使用RecyclerView、CardView、SwipeRefreshLayout实现下拉刷新列表

RecyclerView是support-v7库提供的一个强大的滚动控件,它可以说是一个增强版的ListView,不仅可以轻松实现和ListView同样的效果,还优化了ListView中存在的各种不足...

Android CardView 和Material Design风格设计学习

这篇文章主要介绍一下我自己对于CardView和Material Design学习的过程。学习途径主要是通过书本和网上资料学习。效果图: 说明一下,通过下拉可以让我们宇宙的图片拉伸延展出来,通过上滑...

Material Design之CardView

CardView 扩展 FrameLayout 类别并让您能够显示卡片内的信息,这些信息在整个平台中拥有一致的呈现方式。CardView 组件可拥有阴影和圆角。 如果要使用阴影创建卡片,请使用 car...

Android Material Design之在RecyclerView中嵌套CardView实现

第一眼就爱上了Android的Material Design风格。以前倒对Android的界面风格不那么喜欢,扁平化的界面设计真是好看。其实,这个嵌套操作在实现上并没有什么难点。可是,我还在Eclip...

Material Design之CardView与RecyclerView

最近一直在看material design,在这里记录一下,当我们使用material design的时候,首先需要在build.gradle中引入cardView与recyclerView的jar包...

Android Material Design系列之RecyclerView和CardView

去年很早之前,我就讲解过RecyclerView的使用,今天我们就在讲解CardView的时候,顺便再把RecyclerView同时讲解一下。RecyclerView、CardView为用于显示复杂视...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Material Design 入门(二)——CardView
举报原因:
原因补充:

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