詳解Android如何實(shí)現(xiàn)陰影效果

更新時(shí)間：2022年06月20日 11:43:05 作者：JulyYu

這篇文章主要為大家詳細(xì)介紹了Android是如何實(shí)現(xiàn)陰影效果的，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Android有一定的幫助，需要的可以參考一下

實(shí)現(xiàn)形式

elevation

Material Design提供了View的陰影效果設(shè)置。主要由兩個(gè)屬性決定：elevation和translationZ。

Z = elevation + translationZ

PS:這種實(shí)現(xiàn)方式只有API21以及以上才能支持實(shí)現(xiàn)。

elevation屬性表示View高度加上高度就會(huì)有陰影效果。 translationZ屬性表示給View增加一個(gè)Z軸的變換效果。配合elevation屬性一起使用陰影效果更突出。

<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_margin="15dp"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/holo_blue_bright"
    android:elevation="10dp"
    android:translationZ="10dp"
    android:paddingBottom="10dp"
    />

官網(wǎng)介紹

CardView屬性

CardView是Android提供的官方控件自身支持設(shè)置陰影效果。陰影實(shí)現(xiàn)由cardElevation和cardMaxElevation實(shí)現(xiàn)。

<androidx.cardview.widget.CardView
    android:layout_margin="15dp"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:outlineAmbientShadowColor="@android:color/holo_blue_bright"
    android:outlineSpotShadowColor="@android:color/holo_red_dark"
    app:cardElevation="5dp"
    app:cardMaxElevation="10dp"
    />

shadow屬性

若是TextView則可以通過(guò)shadow屬性實(shí)現(xiàn)陰影效果

<TextView
android:id="@+id/test_shadow"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:shadowColor="#aa22ff22"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="10"
android:text="Test Shadow"
android:textColor="#cc000000"
android:textSize="60sp" />

layer配置文件

通過(guò)配置xml的layer屬性文件實(shí)現(xiàn)陰影效果。使用layer-list實(shí)現(xiàn)兩層不同背景色實(shí)現(xiàn)疊加實(shí)現(xiàn)像是陰影的效果，但最終實(shí)現(xiàn)效果并不是例如CardView的漸變陰影效果。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 陰影圖片，android:left表示陰影圖片左邊到背景圖片左邊的距離
    android:top表示陰影圖片上邊到背景圖片上邊的距離-->
    <item android:left="5dp"
        android:top="5dp">
        <shape>
            <solid android:color="#60000000"/>
        </shape>
    </item>
    <!-- 背景圖片，android:right表示陰影圖片右邊到背景圖片右邊的距離
    android:bottom表示陰影圖片下邊到背景圖片下邊的距離-->
    <item android:bottom="5dp"
        android:right="5dp">
        <shape>
            <solid android:color="#000000"/>
        </shape>
    </item>
</layer-list>

自定義實(shí)現(xiàn)

自定義形式是通過(guò)自定義Drawable實(shí)現(xiàn)，該形式實(shí)現(xiàn)目標(biāo)View必須關(guān)閉硬件加速。自定義Drawable主要通過(guò)重寫(xiě)draw方法繪制矩形或圓形形狀增加陰影效果。

@Override
public void draw(@NonNull Canvas canvas) {
    if (mBgColor != null) {
        if (mBgColor.length == 1) {
            mBgPaint.setColor(mBgColor[0]);
        } else {
            mBgPaint.setShader(new LinearGradient(mRect.left, mRect.height() / 2, mRect.right,
                    mRect.height() / 2, mBgColor, null, Shader.TileMode.CLAMP));
        }
    }

    if (mShape == SHAPE_ROUND) {
        canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mShadowPaint);
        canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mBgPaint);
    } else {
        canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, mShadowPaint);
        canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, mBgPaint);
    }
}

完整版代碼

小結(jié)

實(shí)現(xiàn)方式	優(yōu)缺點(diǎn)
elevation	優(yōu)點(diǎn)：自帶功能實(shí)現(xiàn)簡(jiǎn)單缺點(diǎn)：不可自定義顏色
CardView	優(yōu)點(diǎn)：自帶功能實(shí)現(xiàn)簡(jiǎn)單缺點(diǎn)：自帶圓角不一定可適配所有需求
Textshadow	優(yōu)點(diǎn)：自帶功能實(shí)現(xiàn)簡(jiǎn)單缺點(diǎn)：只可在TextView中使用
layer	優(yōu)點(diǎn)：實(shí)現(xiàn)形式簡(jiǎn)單缺點(diǎn)：效果一般
自定義實(shí)現(xiàn)	優(yōu)點(diǎn)：實(shí)現(xiàn)效果好可配置能力高缺點(diǎn)：需要開(kāi)發(fā)者自行開(kāi)發(fā)

到此這篇關(guān)于詳解Android如何實(shí)現(xiàn)陰影效果的文章就介紹到這了,更多相關(guān)Android陰影效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: