android 5.0版本中新增了CardView, CardView繼承自FrameLayout類，可以在一個(gè)卡片布局中一致性的顯示內(nèi)容，卡片可以包含圓角和陰影。也可以布局其他View。
如果sdk低于5.0我們?nèi)耘f要引入v7包，我用的是android studio所以我們需要在build.gradle加入如下代碼用來自動導(dǎo)入support-v7包，記得配置完后重新Build一下工程。
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.1.0'
}
先看看布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".CardViewActivity"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="@+id/tv_item"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_centerInParent="true"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="20dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/itachi85"
android:scaleType="centerInside"
/>
<TextView
android:layout_width="150dp"
android:layout_height="50dp"
android:text="android必勝"
android:textSize="20sp"
android:layout_gravity="center"
android:textColor="@android:color/white"/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<SeekBar
android:id="@+id/sb_1"
android:layout_width="200dp"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制圓角大小"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<SeekBar
android:id="@+id/sb_2"
android:layout_width="200dp"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制陰影大小"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<SeekBar
android:id="@+id/sb_3"
android:layout_width="200dp"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制圖片間距"/>
</LinearLayout>
</LinearLayout>
這里有兩個(gè)CardView的重要的屬性：
card_view:cardCornerRadius用來設(shè)置圓角的半徑。
card_view:cardElevation用來設(shè)置陰影的半徑。
接著來看看java代碼的調(diào)用：
public class CardViewActivity extends AppCompatActivity {
private CardView mCardView;
private SeekBar sb1;
private SeekBar sb2;
private SeekBar sb3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card_view);
assignViews();
}
private void assignViews() {
mCardView = (CardView) findViewById(R.id.tv_item);
sb1 = (SeekBar) findViewById(R.id.sb_1);
sb2 = (SeekBar) findViewById(R.id.sb_2);
sb3= (SeekBar) findViewById(R.id.sb_3);
sb1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
mCardView.setRadius(i);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
sb2.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
mCardView.setCardElevation(i);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
sb3.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
mCardView.setContentPadding(i,i,i,i);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
我在這里設(shè)置了三個(gè)seekBar分別來設(shè)置CardView:
mCardView.setRadius()設(shè)置圓角的半徑
mCardView.setCardElevation()設(shè)置陰影的半徑
mCardView.setContentPadding()設(shè)置CardView中的子控件和父控件的距離。
運(yùn)行效果：
