android 5.0新特性CardView教程

CardView 是android5.0新加入的特性，大家先别着急，由于谷歌出了cardview的兼容包，也就是android.support.v7.widget.CardView包，所以在5.0以下的系统也可以运行这个效果。什么是CardView ？就是在View的外面加上一个类似如卡片的阴影，下面放代码。

  <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp" >
 
            <ImageView
                android:id="@+id/pic"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop" />
 
            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/pic"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:textColor="#212121"
                android:textSize="16sp" />
        </RelativeLayout>

这是原来的代码。下面是运行效果：

然后，只需要在Relativelayout上一行加上几行代码，就能实习卡片效果：

代码

 <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        card_view:cardBackgroundColor="@color/cardview_light_background"
        card_view:cardCornerRadius="1dp" >
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp" >
 
            <ImageView
                android:id="@+id/pic"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop" />
 
            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/pic"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:textColor="#212121"
                android:textSize="16sp" />
        </RelativeLayout>
 
    </android.support.v7.widget.CardView>

实现效果：

其中：

card_view:cardCornerRadius="1dp" 是设置圆角效果。

作为对比，我们改成

card_view:cardCornerRadius="10dp"看看

下面是效果图：

明显圆角变大了。