首页 > 代码库 > Material Design之CardView的使用

Material Design之CardView的使用

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

使用CardView能够实现卡片式布局效果,很好看。卡片还能够包括圆角、阴影、背景。

CardView是一个ViewGroup,布局时包括其他的View从而实现优雅界面效果。

首先来看看个界面效果:

技术分享

技术分享

是不是非常美丽啊!事实上使用起来非常easy。把它作为一个普通的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="http://www.mamicode.com/@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的使用