Android CardView的使用

一.概述

CardView是support.v7包中的一个类，继承自FrameLayout,今天来看看如何使用。首先我们需要导入相关的库

二.代码

布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_green_dark"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
>
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="@android:color/white"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="24dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/cat"
android:layout_centerHorizontal="true"
android:scaleType="fitCenter" />
<TextView
android:id="@+id/text_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img"
android:layout_centerHorizontal="true"
android:text="This is a card view"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<SeekBar
android:layout_below="@+id/card_view"
android:id="@+id/seek1"
android:layout_marginTop="10dp"
android:layout_width="150dp"
android:layout_height="30dp"
/>
<SeekBar
android:layout_below="@+id/seek1"
android:id="@+id/seek2"
android:layout_marginTop="10dp"
android:layout_width="150dp"
android:layout_height="30dp"
/>
</RelativeLayout>

首先我们引入了命名空间：

xmlns:card_view="http://schemas.android.com/apk/res-auto"

然后设置背景颜色为白色

card_view:cardBackgroundColor="@android:color/white"

设备边角的弧度以及阴影宽度

card_view:cardCornerRadius="10dp"
card_view:cardElevation="24dp"

public class CardViewActivity extends AppCompatActivity {
private CardView cardView;
private SeekBar seekBar1;
private SeekBar seekBar2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cardView = (CardView) findViewById(R.id.card_view);
seekBar1 = (SeekBar) findViewById(R.id.seek1);
seekBar2 = (SeekBar) findViewById(R.id.seek2);
seekBar1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
if(fromUser){
cardView.setCardElevation(progress);
}
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
seekBar2.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
if(fromUser){
cardView.setRadius(progress);
}
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
}

效果图



接下来我们用layer-list来实现一个类似的效果，先看效果图



布局文件如下

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/background"
android:orientation="vertical"
android:layout_marginTop="20dp"
tools:context="com.example.administrator.myapplication.MainActivity">

<TextView
android:id="@+id/textview"
android:text="您的体现失败，请重新申请，给您带来的不便请谅解"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_marginTop="20dp"
android:text="赶街官网 发布于 2016-4-4"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

重点在这个背景

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- 阴影部分 -->
<!-- 个人觉得更形象的表达：top代表下边的阴影高度，left代表右边的阴影宽度。其实也就是相对应的offset，solid中的颜色是阴影的颜色，也可以设置角度等等 -->
<item
android:left="2dp"
android:top="2dp">
<shape android:shape="rectangle" >

<gradient
android:angle="270"

android:endColor="#0F0"
android:startColor="#0F0" />

<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>

<!-- 背景部分 -->
<!-- 形象的表达：bottom代表背景部分在上边缘超出阴影的高度，right代表背景部分在左边超出阴影的宽度（相对应的offset） -->
<item
android:bottom="3dp"
android:right="3dp">
<shape android:shape="rectangle" >

<gradient
android:angle="270"
android:endColor="#FF00FF"
android:startColor="#FF00FF" />

<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>
</layer-list>