一個能夠配置陰影方向和顏色的類 CardView 控件 SCardView

1、控件簡述

　　今天給你們推薦一個控件 SCardView ，看名字就很容易纔出來它其實就是一個 CardView 。把它拿出來，是由於它解決了一些 CardView 沒法實現的需求以及簡化了 CardView 的使用。其實就是 CardView 的一個改良版。下面咱們來介紹它：

　　1. 實現圓角陰影效果，並能夠設置陰影的方向

　　　　CardView 也能夠實現圓角陰影效果，可是 CardView 的陰影方向是咱們沒法設置的。爲何強調陰影方向這個條件呢，由於 CardView 在 API 21 以後，陰影的顯示效果在屏幕的各個位置是不一致的。若是你在屏幕中使用了多個 CardView ，可是 UI 美眉告訴你這幾個CardView 的陰影不同，太難看，須要統一，而且讓測試提成了一個 BUG 。怎麼解決，這就是SCardView 出現的來源。

　　　　看下 CardView 形成的陰影不一致的效果：

　　　　SCardView 經過 cardLightDirection 屬性來配置光源的位置來控制陰影的顯示，以下：

<com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@android:color/holo_orange_dark"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="left">  <!--光源位置在左側，則陰影出如今反方向右側 -->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="left"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

　　　　在 cardLightDirection 中提供四面八方的值，足夠知足你的需求：

<attr name="cardLightDirection">
            <enum name="left" value="1" /> <!-- 設置光源位置爲左側，陰影在右側 -->
            <enum name="right" value="2" /> <!-- 陰影在左側-->
            <enum name="top" value="3" /> <!-- 陰影在下部-->
            <enum name="bottom" value="4" /> <!-- 陰影在上部 -->
            <enum name="LT" value="5" /> <!-- 陰影在右下角-->
            <enum name="RT" value="6" /> <!-- 陰影在左下角-->
            <enum name="LB" value="7" /> <!-- 陰影在右上角 -->
            <enum name="RB" value="8" /> <!-- 陰影在左上角 -->
            <enum name="none" value="9" /> <!-- 光源位置在正上方 -->
        </attr>

　　2. 給陰影設置顏色

　　　　看到一些比較漂亮的UI，陰影都有其自身的顏色，雖然不符合天然現象，可是好看啊。出了這樣的設計圖，除了和UI美眉要一張有陰影的背景圖片，還能夠經過 SCardView 來實現，來看下效果：

中間一行的第一個和第三個都設置有陰影，確實挺好看的。

　　3. 扔掉 CardView 對不一樣 Android 版本適配的過程

　　　　使用 CardView 開發，須要注意的一點是 CardView 在不一樣 API 的Android 手機上顯示效果會有大小的差別。 CardView 提供了 cardUseCompatPadding 、cardPreventCornerOverlap 等屬性來作版本的適配。具體怎麼在開發中適配，自行搜索一下。若是不想考慮這些，那就直接使用 SCardView 。來看一下，照成差別的源碼：

/**
     * CardView adds additional padding to draw shadows on platforms before Lollipop.
     * <p>
     * This may cause Cards to have different sizes between Lollipop and before Lollipop. If you
     * need to align CardView with other Views, you may need api version specific dimension
     * resources to account for the changes.
     * As an alternative, you can set this flag to <code>true</code> and CardView will add the same
     * padding values on platforms Lollipop and after.
     * <p>
     * Since setting this flag to true adds unnecessary gaps in the UI, default value is
     * <code>false</code>.
     *
     * @param useCompatPadding <code>true></code> if CardView should add padding for the shadows on
     *      platforms Lollipop and above.
     * @attr ref android.support.v7.cardview.R.styleable#CardView_cardUseCompatPadding
     */
    public void setUseCompatPadding(boolean useCompatPadding) {
        if (mCompatPadding != useCompatPadding) {
            mCompatPadding = useCompatPadding;
            IMPL.onCompatPaddingChanged(mCardViewDelegate);
        }
    }

　　　　差別形成的緣由主要由於 Google開發者在實現 CardView 的陰影效果在 API 21以前和以後實現方式不同，例如源碼中所示：

static {
        if (Build.VERSION.SDK_INT >= 21) {
            IMPL = new CardViewApi21Impl();
        } else if (Build.VERSION.SDK_INT >= 17) {
            IMPL = new CardViewApi17Impl();
        } else {
            IMPL = new CardViewBaseImpl();
        }
        IMPL.initStatic();
    }

　　　　SCarView 直接去掉了 CardViewApi21Impl 這個實現方式，去掉適配了的麻煩，固然這樣好像有點不太好，可是還有前面兩個緣由，仍是值得的。這三點基本就說明了 SCardView 出現的原因，以爲怎麼樣。若是能夠就繼續往下了解，看看如何在項目中使用它。

2、使用 SCardView

　　怎麼使用 SCardView ，那這個就很是簡單了。添加一個依賴，而後在佈局中使用便可。

　　添加依賴：

implementation 'io.github.meetsl:SCardView:1.0'

　　Xml中使用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_margin="20dp"
        android:onClick="jump"
        app:cardBackgroundColor="@android:color/holo_blue_light"
        app:cardShadowStartColor="#3733B5E5"
        app:cardShadowEndColor="#0333B5E5"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="none">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="none"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@android:color/holo_orange_dark"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="left">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="left"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="right">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="right"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_centerVertical="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="#1ADB99"
        app:cardShadowStartColor="#671ADB99"
        app:cardShadowEndColor="#041ADB99"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="top">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="top"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@color/colorPrimary"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="bottom">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="bottom"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardShadowStartColor="#57FF4081"
        app:cardShadowEndColor="#03FF4081"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="LT">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="LT"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_alignParentBottom="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="#85BC49"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="LB">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="LB"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="#80B3FF"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="RT">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="RT"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="@dimen/card_size"
        android:layout_height="@dimen/card_size"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="#40337D"
        app:cardCornerRadius="5dp"
        app:cardElevation="@dimen/cardview_elevation"
        app:cardLightDirection="RB">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="5dp"
            android:text="RB"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/home_back" />
    </com.meetsl.scardview.SCardView>
</RelativeLayout>

View Code

　　效果圖以下，有木有很漂亮：

　　

---------- 更新：2018/10/9

3、控件新特性：邊角控制

　　SCardView 添加了對邊角的控制，可能知足某些需求，上圖查看效果：

　　新特性是對邊角添加了控制，就正如上圖所示，一共添加了 6 種效果：

<attr name="cardCornerVisibility">
     <enum name="noLeftCorner" value="1" />
     <enum name="noRightCorner" value="2" />
     <enum name="noTopCorner" value="3" />
     <enum name="noBottomCorner" value="4" />
     <enum name="noLT_RBCorner" value="5" />
     <enum name="noRT_LBCorner" value="6" />
     <enum name="none" value="7" />
</attr>

　　這樣的特性有吸引到你麼！！！這個新特性是添加在 1.1 版本上的，要使用這個特性，添加依賴：

implementation 'io.github.meetsl:SCardView:1.1'

 

　　SCardView 源碼放置在 GitHub 上 ，你們想看具體實現能夠到這裏查看：歡迎 Mark 收藏，後續會添加其餘特性

　　https://github.com/meetsl/SCardView-master

 

 

---------- 更新 2019/9/12

implementation 'io.github.meetsl:SCardView:1.2'

1. 支持代碼中動態設置陰影顏色

　　/**
     * Updates the shadow color of the CardView
     *
     * @param startColor The new startColor to set for the card shadow
     * @param endColor The new endColor to set for the card shadow
     */
    fun setCardShadowColor(@ColorInt startColor: Int, @ColorInt endColor: Int)

    /**
     * update the both of background color and shadow color of the card view
     */
    fun setColors(@ColorInt backgroundColor: Int, @ColorInt shadowStartColor: Int, @ColorInt shadowEndColor: Int)