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最佳体验(2): 使用RecyclerView、CardView、SwipeRefreshLayout实现下拉刷新列表

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

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...

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:利用RecyclerView CardView实现新闻卡片样式

转载 请注明 明桑Android 主要介绍:`RecyclerView` 和 `CardView`的用法,通过RecyclerView和CardView实现新闻卡片样式...

Material Design - RecyclerView和CardView篇

1 简介2014年07月23日Google在I/O 2014上推出了新的设计语言Material Design。到现在已经2年半了,我才开始学习Material Design,甚是惭愧啊。2 目录Ma...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Material Design之CardView的使用
举报原因:
原因补充:

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