Material Design之CardView的使用

原创 2015年07月10日 14:11:16

本文介绍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就是那么简单!!!




版权声明:本文为博主原创文章,未经博主允许不得转载。转载注明出处:Sunzxyong

相关文章推荐

使用Material Design Tint和视图详解

视图首先来讲Material Design 视图的概念,在新的api中,新添加了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系,z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重,这里有...

hdu 6115 Factory(lca暴力)

我们将A省简化为由N个城市组成,某些城市之间存在双向道路,而且A省的交通有一个特点就是任意两个城市之间都能通过道路相互到达,且在不重复经过城市的情况下任意两个城市之间的到达方案都是唯一的。聪明的你一定...

hdu 1078 fatmouse and cheese

思想记忆化搜索还有的搜索方式是状态搜索状态搜索,是进行状态映射,以便得知某个状态是否已经搜索过了,是为了避免重复搜索, 状态搜索应用的场景是,简单地标记哪个点有没有走过,已经不再满足需求了。或者说,无...

排序之直接插入排序

直接插入排序简介直接插入排序最适合的场景如下:对于一个有序的序列来说,当我们将另外一个数字添加到该有序序列中的时候,依次从该序列的右边开始比较,如果要插入的值小于序列中当前位置的值,那么序列中该位置的...

自定义控件三部曲视图篇(三)——瀑布流容器WaterFallLayout实现

前言:只要在前行,梦想就不再遥远 前面两节讲解了有关ViewGroup的onMeasure、onLayout的知识,这节我们深入性地探讨一下,如何实现经常见到的瀑布流容器,本节将实现的效果图如下:从效...

边缘检测算法

clear all; I = imread('airplane.jpg'); I=rgb2gray(I); BW1 = edge(I,'sobel');   %利用Sobel算子进行边缘检测 ...

Hive学习之Hive数据库DDL

Hive提供了与SQL相似的数据定义语言(DDL),对于熟悉SQL的人来说,学习Hive的DDL是非常容易得,即使从未接触过SQL的人,学习也不是一件很难的事情。虽然本人对SQL有一定的了解,但绝不敢...

idea maven 配置spring mvc mybatis

http://blog.csdn.net/yege2006/article/details/51377674

Dubbo框架 - 3 - 服务器部署(2)

PC2/PC3上部署 1、在PC2,PC3部署hadoop,Hadoop+flume用来收集日志. 1)/data/hadoop/下解压文件。 2)在 /etc/profile 后面配置 HAD...

python 安装setuptools时出现错误

Traceback (most recent call last):   File "./setup.py", line 3, in     from setuptools import set...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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