卡片佈局 CardView
屬性 | 描述 |
---|---|
app:cardCornerRadius | 設置圓角半徑 |
app:cardElevation | 設置陰影大小 |
app:cardBackgroundColor | 設置背景顏色 |
app:cardMaxElevation | 設置最大陰影大小 |
app:cardPreventCornerOverlap | 設置添加內邊距,防止重疊。默認 true |
app:cardUseCompatPadding | 是否使用Padding |
app:contentPadding | 設置Padding大小 |
app:contentPaddingLeft | 設置左Padding大小 |
app:contentPaddingRight | 設置右Padding大小 |
app:contentPaddingTop | 設置上Padding大小 |
app:contentPaddingBottom | 設置下Padding大小 |
依賴必不可少
implementation ‘com.android.support:cardview-v7:28.0.0’
佈局文件
<?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"
tools:context="com.example.test.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.CardView
android:id="@+id/cardview"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_margin="15dp"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/gray"
app:cardMaxElevation="30dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:contentPaddingLeft="10dp"
app:contentPaddingRight="10dp"
app:contentPaddingTop="10dp"
app:contentPaddingBottom="10dp"
>
<ImageView
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg"
android:scaleType="centerInside"
/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_margin="10dp"
>
<SeekBar
android:id="@+id/seekbar_one"
android:layout_width="match_parent"
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="50dp"
android:orientation="vertical"
android:layout_margin="10dp"
>
<SeekBar
android:id="@+id/seekbar_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="調整陰影大小"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
CardView 中包裹了一張圖片,並設置了相應的屬性。
通過SeekBar控制圓角大小和陰影
代碼中如下:
public class MainActivity extends AppCompatActivity {
@BindView(R.id.seekbar_one)
SeekBar mSeekbarOne;
@BindView(R.id.seekbar_two)
SeekBar mSeekbarTwo;
@BindView(R.id.cardview)
CardView mCardview;
private Unbinder mUnbinder;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mUnbinder = ButterKnife.bind(this);
initView();
}
private void initView() {
mSeekbarOne.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
mCardview.setRadius(progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
mSeekbarTwo.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
mCardview.setCardElevation(progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
@Override
protected void onDestroy() {
super.onDestroy();
mUnbinder.unbind();
}
}
運行 效果圖如下: