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/zh-tw/n/334594.html