Android 5.0 版本中新增了CardView，CardView 繼承自FrameLayout類，并且可以設置圓角和陰影，使得控件具有立體性，也可以包含其他的布局容器和控件。
CardView.gif
配置build.gradle
如果SDK低于5.0，仍舊要引入v7包。
dependencies {
implementation 'com.android.support:appcompat-v7:26.1.0'
compile "com.android.support:cardview-v7:26.1.0"
}
使用CardView
xml布局代碼
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.siomt.cardviewdemo.MainActivity">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardCornerRadius="4dp"
app:cardElevation="5dp"
app:cardMaxElevation="10dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp">
<ImageView
android:layout_width="150dp"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_margin="5dp"
android:src="@drawable/img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="CardView"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="CardView的簡單例子" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<TextView
android:id="@+id/tv_max"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設置最大的陰影:10dp" />
<SeekBar
android:id="@+id/sb_max_elevation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="10" />
<TextView
android:id="@+id/tv_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設置陰影值:5" />
<SeekBar
android:id="@+id/sb_card_elevation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="5" />
<TextView
android:id="@+id/tv_radius"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設置邊緣弧度數:4dp" />
<SeekBar
android:id="@+id/sb_corner_radius"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="4" />
</LinearLayout>
java 代碼
package com.siomt.cardviewdemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.widget.SeekBar;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private CardView cardView;
private SeekBar sbElevation;
private SeekBar sbCornerRadius;//邊緣弧度數
private SeekBar sbMaxElevation;
private TextView tvMax;
private TextView tvNow;
private TextView tvRadius;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
cardView = findViewById(R.id.card_view);
sbElevation = findViewById(R.id.sb_card_elevation);
sbMaxElevation = findViewById(R.id.sb_max_elevation);
sbCornerRadius = findViewById(R.id.sb_corner_radius);
tvMax = findViewById(R.id.tv_max);
tvNow = findViewById(R.id.tv_now);
tvRadius = findViewById(R.id.tv_radius);
sbElevation.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
cardView.setCardElevation(progress);
tvNow.setText("設置陰影值:"+progress+"dp");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
sbMaxElevation.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
cardView.setMaxCardElevation(progress);
tvMax.setText("設置最大的陰影:"+progress+"dp");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
sbCornerRadius.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
cardView.setRadius(progress);
tvRadius.setText("設置邊緣弧度數:"+progress+"dp");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
}
相關屬性
- app:cardCornerRadius="4dp" 設置圓角半徑
- app:cardElevation="5dp" 設置陰影的大小
- app:cardMaxElevation="10dp" 設置最大陰影的大小
- app:cardPreventCornerOverlap="true" 是否使用PreventCornerOverlap
- app:cardBackgroundColor="@color/colorPrimary" 設置背景顏色
- app:cardUseCompatPadding="true" 是否使用CompatPadding設置內邊距
- app:contentPadding="" Card View的padding沒有用，要使用這個
- app:contentPaddingLeft="" 內容的左padding
- app:contentPaddingTop="" 內容的上padding
- app:contentPaddingRight="" 內容的右padding
- app:contentPaddingBottom="" 內容的下padding
