CardView 整理

卡片佈局 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();
    }
}

運行 效果圖如下:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章