阿超 > 安卓阴影实现

安卓阴影实现

2024-04-28

java

除了实践以外，没有别的办法可以识别错误。——狄德罗

首先网上找了一圈方案，要么是用UI切图的方式，要么是说用背景或者自带的阴影，这篇文章也说了

阴影组件化，解决安卓不统一问题 - 掘金

UI切图/制作点9图的方式：

这种方式应该是完美还原蓝湖设计图的方式，但不是从技术角度实现

下面还有几个

1. elevation（组件属性）

优点：绘制效率高，使用自带的api不用添加多余的drawable文件，并且支持 translationZ 动画方便实现点击的动画效果；不占位

缺点：低版本不显示，方向颜色不可控，自带的属性设置参数有限；

注意：View要带透明度，否则是没有效果；

2. CardView（组件自带）

优点：CardView是自带阴影的是Materail设计的组件，效率高；不占位

缺点：阴影方向颜色不可控；

注意：CardView模拟的光源在屏幕中心正上方阴影显示角度会有所差异；

3. Shape（作为背景绘制所以会占位，它的绘制原理是一层层的由深到浅的形状作为阴影）

优点：颜色方向可控制；占位

缺点：没有模糊效果阴影不自然有点生硬(较弱的阴影不太容易看出来)；

注意：占位的阴影要考虑预留出阴影的空间；

4. SCardView

同CardView显示效果，可通过代码调整边角光源调整阴影方向和颜色，但需考虑版本兼容性问题；

5. 自定义View

理论上我们想要的阴影效果都可以实现，但是如果脱离了系统原生属性就需要考虑的太多；

自定义阴影针对特殊的载体样式和阴影，代码实现较为复杂，绘制成本较高，非必要情况下不建议；

作者：owlling
链接：https://juejin.cn/post/6844904122433404941
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

然后这里我采取的是这篇文章的方式

https://xiaozhuanlan.com/topic/6538724091

最后的xml布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<com.ruben.customviews.ShadowViewCard
    android:id="@+id/shadow"
    android:layout_width="@dimen/dp_86"
    android:layout_height="@dimen/dp_42"
    app:layout_constraintBottom_toBottomOf="@+id/img"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/img"
    app:shadowBottomHeight="@dimen/dp_3"
    app:shadowCardPaddingHeight="@dimen/dp_5"
    app:shadowCardPaddingWidth="@dimen/dp_10"
    app:shadowColors="#A3D8FF"
    app:shadowLeftHeight="0dp"
    app:shadowOffsetX="0dp"
    app:shadowOffsetY="@dimen/dp_2"
    app:shadowRadius="25"
    app:shadowRightHeight="0dp"
    app:shadowRound="@dimen/dp_15"
    app:shadowTopHeight="@dimen/dp_1">

    <com.noober.background.view.BLTextView
        android:id="@+id/label"
        android:layout_width="@dimen/dp_66"
        android:layout_height="@dimen/dp_29"
        android:layout_marginLeft="@dimen/dp_0"
        android:layout_marginTop="@dimen/dp_0"
        android:gravity="center"
        android:text="领取"
        android:textColor="@color/setup_But_Color"
        android:textSize="15sp"
        android:textStyle="bold"
        app:bl_corners_radius="@dimen/dp_20"
        app:bl_gradient_endColor="#3EA7E3"
        app:bl_gradient_startColor="#A3D8FF"
        app:bl_padding_left="@dimen/dp_0"
        app:bl_padding_top="@dimen/dp_0" />


</com.ruben.customviews.ShadowViewCard>

然后是代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
package com.ruben.customviews;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.FrameLayout;

import com.namaste.hsswcom.rubens ShadowViewCard extends FrameLayout {
    private static final int DEFAULT_VALUE_SHADOW_COLOR = R.color.shadow_default_color;
    private static final int DEFAULT_VALUE_SHADOW_CARD_COLOR = R.color.shadow_card_default_color;
    private static final int DEFAULT_VALUE_SHADOW_CARD_PADDING_WIDTH = 0;
    private static final int DEFAULT_VALUE_SHADOW_CARD_PADDING_HEIGHT = 0;
    private static final int DEFAULT_VALUE_SHADOW_ROUND = 0;

    private static final int DEFAULT_VALUE_SHADOW_RADIUS = 10;
    private static final int DEFAULT_VALUE_SHADOW_TOP_HEIGHT = 5;
    private static final int DEFAULT_VALUE_SHADOW_LEFT_HEIGHT = 5;
    private static final int DEFAULT_VALUE_SHADOW_RIGHT_HEIGHT = 5;
    private static final int DEFAULT_VALUE_SHADOW_BOTTOM_HEIGHT = 5;
    private static final int DEFAULT_VALUE_SHADOW_OFFSET_Y = 0;
    private static final int DEFAULT_VALUE_SHADOW_OFFSET_X = DEFAULT_VALUE_SHADOW_TOP_HEIGHT / 3;

    private int shadowRound;
    private int shadowColor;
    private int shadowCardColor;
    private int shadowCardPaddingHeight;
    private int shadowCardPaddingWidth;
    private int shadowRadius;
    private int shadowOffsetY;
    private int shadowOffsetX;
    private int shadowTopHeight;
    private int shadowLeftHeight;
    private int shadowRightHeight;
    private int shadowBottomHeight;

    public ShadowViewCard(Context context) {
        this(context, null);
    }

    public ShadowViewCard(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ShadowViewCard(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ShadowViewCard);
        shadowRound = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowRound, DEFAULT_VALUE_SHADOW_ROUND);
        shadowColor = a.getColor(R.styleable.ShadowViewCard_shadowColors, getResources().getColor(DEFAULT_VALUE_SHADOW_COLOR, null));
        shadowCardColor = a.getColor(R.styleable.ShadowViewCard_shadowCardColor, getResources().getColor(DEFAULT_VALUE_SHADOW_CARD_COLOR, null));
        shadowTopHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowTopHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_TOP_HEIGHT));
        shadowRightHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowRightHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_RIGHT_HEIGHT));
        shadowLeftHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowLeftHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_LEFT_HEIGHT));
        shadowCardPaddingHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowCardPaddingHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_CARD_PADDING_HEIGHT));
        shadowCardPaddingWidth = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowCardPaddingWidth, dp2px(getContext(), DEFAULT_VALUE_SHADOW_CARD_PADDING_WIDTH));
        shadowBottomHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowBottomHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_BOTTOM_HEIGHT));
        shadowOffsetY = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowOffsetY, dp2px(getContext(), DEFAULT_VALUE_SHADOW_OFFSET_Y));
        shadowOffsetX = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowOffsetX, dp2px(getContext(), DEFAULT_VALUE_SHADOW_OFFSET_X));
        shadowRadius = a.getInteger(R.styleable.ShadowViewCard_shadowRadius, DEFAULT_VALUE_SHADOW_RADIUS);
        a.recycle();
        setPadding(shadowCardPaddingWidth, shadowCardPaddingHeight, shadowCardPaddingWidth, shadowCardPaddingHeight);
        setLayerType(LAYER_TYPE_SOFTWARE, null);
    }

    public static int dp2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        // 创建画笔，设置画笔的颜色，风格
        Paint shadowPaint = new Paint();
        shadowPaint.setColor(shadowCardColor);
        shadowPaint.setStyle(Paint.Style.FILL);
        shadowPaint.setAntiAlias(true);
        // 获取绘画的范围：ShadowCard的范围减去需要的阴影的范围，假如阴影的宽度为45px，则在ShadowCard内部的45px内进行绘制
        float left = shadowLeftHeight + shadowCardPaddingWidth;
        float top = shadowTopHeight + shadowCardPaddingHeight;
        float right = getWidth() - shadowRightHeight - shadowCardPaddingWidth;
        float bottom = getHeight() - shadowBottomHeight - shadowCardPaddingHeight;
        shadowPaint.setShadowLayer(shadowRadius, shadowOffsetX, shadowOffsetY, shadowColor);
        // 创建RectF，最后开始绘画。
        RectF rectF = new RectF(left, top, right, bottom);
        // 给画笔设置阴影的颜色，阴影的模糊度，模糊度值越大越模糊，且不能为0
        canvas.drawRoundRect(rectF, shadowRound, shadowRound, shadowPaint);
        canvas.save();
        super.dispatchDraw(canvas);
    }
}

最后实现效果：