《进阶之光》笔记(2)——CardView

最新推荐文章于 2025-12-15 14:43:46 发布

转载最新推荐文章于 2025-12-15 14:43:46 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3620480/blog/1510854

文章标签：

#移动开发

本文详细介绍了Android中CardView控件的使用方法，包括如何设置圆角、阴影、背景色等属性，并通过SeekBar实时调整这些参数，展示了CardView在UI设计中的灵活性。

package com.zjw.chapter1androidnewcharacteristics;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.widget.SeekBar;

import butterknife.BindView;
import butterknife.ButterKnife;

//p14 2.使用CardView
/*
 app:cardCornerRadius="20dp"圆角半径
 app:cardElevation="20dp"阴影半径
 */
/*
其他属性：
cardBackgroundColor:设置背景色
cardElevation:设置Z轴阴影
cardMaxElevation:设置Z轴最大高度
cardUseCompatPadding:是否使用CompatPadding
cardPreventCornerOverlap:是否使用PreventCornerOverlap
contentPadding:内容的padding,
还有contentPadding上下左右
 */
public class MainActivity extends AppCompatActivity {

    @BindView(R.id.cv)
    CardView mCv;
    @BindView(R.id.sb1)
    SeekBar mSb1;
    @BindView(R.id.sb2)
    SeekBar mSb2;
    @BindView(R.id.sb3)
    SeekBar mSb3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initView();
    }

    private void initView() {
        mSb1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                mCv.setRadius(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
        mSb2.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                mCv.setCardElevation(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
        mSb3.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                mCv.setContentPadding(progress, progress, progress, progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

布局

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    >

    <android.support.v7.widget.CardView
        android:id="@+id/cv"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="20dp"
        >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:scaleType="centerInside"/>

    </android.support.v7.widget.CardView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <SeekBar
            android:id="@+id/sb1"
            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/sb2"
            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/sb3"
            android:layout_width="200dp"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="控制图片间距"/>

    </LinearLayout>
</LinearLayout>

转载于:https://my.oschina.net/u/3620480/blog/1510854