本文介绍CardView这个控件的使用,CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包,可在下载的sdk文件夹中找到。。。

使用CardView可以实现卡片式布局效果,非常好看,卡片还可以包含圆角、阴影、背景。CardView是一个ViewGroup,布局时包含其它的View从而实现优雅界面效果。

首先来看看个界面效果:

是不是很漂亮啊!其实使用起来很简单,把它作为一个普通的Layout使用即可。如下:

 <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="10dp"
        app:cardElevation="8dp">
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="40dp"
            android:text="CardView"
            android:textSize="20sp" />
    </android.support.v7.widget.CardView>

这个对应的效果就是刚刚图片上的第一个效果。

其它的亦是如此,就不多说了,这里为了看看CardView效果就只简单的加了一个TextView作为演示。

整个布局activity_main.xml:

<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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="10dp"
        app:cardElevation="8dp">
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="40dp"
            android:text="CardView"
            android:textSize="20sp" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/card_view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#303069"
        app:cardCornerRadius="10dp"
        app:cardElevation="8dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="40dp"
            android:text="CardView"
            android:textSize="20sp" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/card_view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="8dp"
        app:cardElevation="5dp">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@mipmap/bg" />
    </android.support.v7.widget.CardView>

</LinearLayout>

设置CardView的点击事件和其它控件一样:

CardView mCardView = (CardView) findViewById(R.id.card_view);
        mCardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"点击了CardView",Toast.LENGTH_LONG).show();
            }
 });

下面主要介绍一下在CardView中比较重要的常用属性:

  • app:cardElevation 阴影的高度
  • app:cardMaxElevation 阴影最大高度
  • app:cardBackgroundColor 卡片的背景色
  • app:cardCornerRadius 卡片的圆角大小
  • app:contentPadding 卡片内容于边距的间隔
    • app:contentPaddingBottom
    • app:contentPaddingTop
    • app:contentPaddingLeft
    • app:contentPaddingRight
    • app:contentPaddingStart
    • app:contentPaddingEnd
  • app:cardUseCompatPadding 设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式
  • app:cardPreventConrerOverlap 在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠

前几个属性的意思都很好理解,就不说了。

contentPadding 这个意思我们来看一张效果图你就明白了:

设置:

app:contentPadding="20dp"

效果:

cardUseCompatPadding

设置:

app:cardUseCompatPadding="true"

效果:

我们从布局预览中可以看出,设置这个后布局往里面缩小了一点,即有一点填充。

好了,CardView就是那么简单!!!

Material Design之CardView的使用的更多相关文章

  1. Android Material Design 兼容库的使用

    Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...

  2. ANDROID L——Material Design详解(UI控件)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  3. 直接拿来用!十大Material Design开源项目

    来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 介于拟物和扁平之间的Material Design自面 ...

  4. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  5. Material Design UI Widgets

    Android L 开发者预览支持库提供两个新的Widgets,RecyclerView和CardView.使用这两个Widgets可以显示复杂的Listview和卡片布局,这两个Widgets默认使 ...

  6. Android5.0新特性——Material Design简介

    Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...

  7. Material Design For Xamarin.Forms

    最近,升级 Xamarin.Forms 到最新版本后,发现Droid 项目下引入了以下几个依赖包: Xamarin.Android.Support.DesignXamarin.Android.Supp ...

  8. Android Material Design之Toolbar与Palette

    转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如 ...

  9. ANDROID L——Material Design综合应用(Demo)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...

随机推荐

  1. 排查Full GC

    我们的Java应用因频繁FULL GC导致性能降低很多,经过多人的定位也没有结论,于是我自主请命,经过一天的研究终于搞定了,现把经验与大家共享,相关的gc日志如下: 4.758: [Full GC [ ...

  2. 新浪微博Oauth2.0授权认证及SDK、API的使用(Android)

    ---------------------------------------------------------------------------------------------- [版权申明 ...

  3. [系统运维]Supervisord安装和启动程序

    supervisord 是client/server 系统 把不是守护进程的进程变成守护进程 监控它自己启动的进程,类似于看门狗 可以作为开机启动的一种封装 可以精确控制进程的状态,而不是pidfil ...

  4. Servlet - 会话跟踪

    Servlet 标签 : Java与Web 会话跟踪 HTTP本身是"无状态"协议,它不保存连接交互信息,一次响应完成之后即连接断开,下一次请求需要重新建立连接,服务器不记录上次连 ...

  5. React Native实现一个自定义模块

    概述 在 前期介绍React Native 项目结构的时候,我们讲解过React的项目组成,其中说过 node_modules 文件夹,这是一个存放 node 模块的地方.我们知道React是用npm ...

  6. JobTracker,TaskTracker简述

    JobTracker 负责接收用户提交的作业,负责启动.跟踪任务执行.JobSubmissionProtocol是JobClient与JobTracker通信的接口.InterTrackerProto ...

  7. 4.关于QT中的QFile文件操作,QBuffer,Label上添加QPixmap,QByteArray和QString之间的区别,QTextStream和QDataStream的区别,QT内存映射(

     新建项目13IO 13IO.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets network CON ...

  8. 03SpringMVC,Spring,Hibernate整合(Date时间转换)

     项目结构 2 web.xml的配置内容如下: <?xmlversion="1.0"encoding="UTF-8"?> <web-app ...

  9. CMake搜索Boost1.57失败及解决

    CMake更新到3.1.0,Boost更新到1.57,结果CMake搜索Boost失败: Unable to find the Boost header files.  Please set BOOS ...

  10. 如何判断webview是不是滑到底部

    getScrollY()方法返回的是当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离. getHeight()或者getBottom()方法都返回当前webview这个容器的高度 ge ...