一、先来看下效果图
二、解决的场景
1、UI经常设计一些不是黑色的Shadow阴影,仅仅通过elevation是无法满足需求的,Android 原装Shadow颜色在Android 9及以上才可通过outlineSpotShadowColor进行设置,设置颜色有版本限制
2、即便是通过outlineSpotShadowColor来设置,四个边的宽度无法自由调整
三、实现思路与原理
1、阴影可以通过渐变色来实现,在布局上绘制渐变线条即可实现阴影
2、首先绘制四个边通过给Paint设置shader来实现,LinearGradient是成线性渲染,所以使用它最为简单,以下以底边为例展示
//绘制底部阴影
float[] ptsBottom = new float[4];
ptsBottom[0] = shadowMaxLength / 2f + shadowRadius;
ptsBottom[1] = height - shadowMaxLength / 2f;
ptsBottom[2] = width - shadowMaxLength / 2f - shadowRadius;
ptsBottom[3] = height - shadowMaxLength / 2f;
LinearGradient linearGradient = new LinearGradient(0, height - shadowRadius - shadowMaxLength / 2f, 0, height, gradientColors, gradientPositions, Shader.TileMode.CLAMP);
mBgPaint.setShader(linearGradient);
canvas.drawLines(ptsBottom, mBgPaint);
3,然后绘制四个角通过给Paint设置shader来实现,RadialGradient是成放射状渲染,所以使用它渲染四个角可以和四个边完美契合,以下以左下角为例展示
//绘制左下角阴影
RectF leftBottomRectF = new RectF(shadowMaxLength / 2f, height - shadowRadius * 2 - shadowMaxLength / 2f, shadowRadius * 2 + shadowMaxLength / 2f, height - shadowMaxLength / 2f);
RadialGradient radialGradient = new RadialGradient(shadowMaxLength / 2f + shadowRadius,height - shadowRadius - shadowMaxLength / 2f,radialGradientRadius, gradientColors,gradientPositions,Shader.TileMode.CLAMP);
mBgPaint.setShader(radialGradient);
canvas.drawArc(leftBottomRectF, 90, 90, false, mBgPaint);
4,如此把四个角和四条辨分开绘制即可形成Shadow阴影效果,再通过给ShadowLayout设置不同的padding即可实现效果
四、使用方式
1、在xml布局中使用,在您布局外部嵌套ShadowLayout来增加Shadow阴影
<com.flyjingfish.shadowlayoutlib.ShadowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="5dp"
android:paddingTop="5dp"
android:paddingBottom="9dp"
android:layout_marginStart="10dp"
app:shadow_start_color="@color/test_start_color"
app:shadow_max_length="9dp"
app:shadow_inscribed_radius="15dp"
>
<FrameLayout
android:layout_width="90dp"
android:layout_height="90dp"
android:visibility="visible"
android:background="@drawable/bg_in_shadow">
</FrameLayout>
</com.flyjingfish.shadowlayoutlib.ShadowLayout>
2、特别注意通过设置padding来调整四个边的阴影显示宽度