Android CardView阴影详解

一、CardView简介

在Android开发中常常需要使用界面元素分割不同区域，以便于用户更好地区分各功能部分。为此，Android提供了一个名为CardView的布局控件，它可以让您通过添加阴影和圆角背景来创建具有相对深度感的卡片视图。您可以像使用其他常规布局控件一样使用CardView，可用于替代FrameLayout，因为它有更大的灵活性。

二、CardView的主要属性

1. cardBackgroundColor

CardView的背景颜色。

2. cardCornerRadius

CardView的圆角半径大小。

3. cardElevation

CardView的Z方向高度值，即阴影高度值。

4. cardMaxElevation

CardView的最大Z方向高度值，即最大阴影高度值。

5. cardUseCompatPadding

CardView是否使用CompatPadding。

6. cardPreventCornerOverlap

是否将CardView的圆角裁剪到其内容区域内。

7. contentPadding

CardView的内容填充大小。

8. contentPaddingLeft

CardView左侧内容填充大小。

9. contentPaddingRight

CardView右侧内容填充大小。

10. contentPaddingTop

CardView顶部内容填充大小。

11. contentPaddingBottom

CardView底部内容填充大小。

三、如何创建一个具有阴影效果的CardView

首先在XML文件中添加CardView布局控件，如下所示：

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@color/cardview_light_background"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="示例CardView"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="这里是CardView的内容。" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

通过设置cardCornerRadius和cardElevation属性，即可创建具有阴影效果和圆角半径的CardView。

四、如何自定义CardView的阴影效果

CardView的阴影效果是由cardElevation属性控制的。Android提供了两种CardView的阴影效果：

CAST_SHADOW：浅色阴影。
LIFTED_SHADOW：深色阴影。

如果您需要更多控制CardView的阴影效果，可以使用以下方法：

1. 使用android:elevation属性

设置android:elevation属性以自定义CardView的阴影高度值（即Z方向高度值）。例如：

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@color/cardview_light_background"
        app:cardCornerRadius="4dp"
        android:elevation="16dp">

        <!-- ... -->

    </androidx.cardview.widget.CardView>

通过设置不同的elevation值，可以获得不同的阴影效果。

2. 自定义CardView的阴影颜色

通过在CardView周围绘制阴影时，很难得到完全符合你的需求的颜色。因此，Android提供了这个方法以便于您对阴影颜色进行更灵活的控制。您可以使用setShadowColor方法来设置CardView的阴影颜色，例如：

    CardView cardView = findViewById(R.id.card_view);
    cardView.setUseCompatPadding(true);
    cardView.setPreventCornerOverlap(false);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        cardView.setOutlineSpotShadowColor(Color.RED);
    } else {
        cardView.setShadowColor(Color.RED);
    }

通过调用setShadowColor方法，即可自定义CardView的阴影颜色。

五、如何对CardView的圆角进行更精细的控制

通过修改CardView的半径大小，可以获得具有不同圆角大小的CardView。然而，如果您需要对CardView的每个角进行进一步的微调，则可以通过自定义CardView来实现。例如：

    public class CustomCardView extends CardView {

        private Path roundPath;
        private RectF rectF;

        public CustomCardView(Context context, AttributeSet attrs) {
            super(context, attrs);
            roundPath = new Path();
            rectF = new RectF();
        }

        public CustomCardView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            roundPath = new Path();
            rectF = new RectF();
        }

        private void init() {
            final float density = getResources().getDisplayMetrics().density;
            final float radius = 12 * density;
            final float offset = 0.5f * density;

            roundPath.reset();
            rectF.set(offset, offset, getWidth() - offset, getHeight() - offset);
            roundPath.addRoundRect(rectF, new float[]{radius, radius, radius, radius, 0, 0, 0, 0}, Path.Direction.CCW);
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            init();
        }

        @Override
        protected void dispatchDraw(Canvas canvas) {
            if (getChildCount() == 0) {
                return;
            }
            int color = Color.parseColor("#f5f5f5");
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            paint.setColor(color);
            canvas.drawPath(roundPath, paint);
            canvas.save();
            canvas.clipPath(roundPath);
            super.dispatchDraw(canvas);
            canvas.restore();
        }

    }

通过自定义CardView，并在其中添加roundPath和rectF两个路径，即可实现具有更灵活的圆角控制。

六、如何对CardView的Padding进行调整

在CardView中，您可以使用contentPadding属性来控制CardView内容的填充大小。例如：

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@color/cardview_light_background"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp"
        app:contentPadding="16dp">

        <!-- ... -->

    </androidx.cardview.widget.CardView>

您也可以调整CardView的每边填充大小，例如：

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@color/cardview_light_background"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp"
        app:contentPaddingLeft="16dp"
        app:contentPaddingRight="16dp"
        app:contentPaddingTop="8dp"
        app:contentPaddingBottom="8dp">

        <!-- ... -->

    </androidx.cardview.widget.CardView>

通过调整contentPadding属性，即可对CardView的填充大小进行灵活的控制。

七、小结

本文主要介绍了Android CardView阴影的基本使用方法，包括属性设置和自定义控制。当您需要创建具有阴影效果和圆角背景的视图元素时，可以考虑使用CardView来实现。

原创文章，作者：FSAIP，如若转载，请注明出处：https://www.506064.com/n/334594.html