Material Design - MaterialShapeDrawable

本篇将介绍Material Design下的MaterialShapeDrawable

Material Design

Material Design - MaterialShapeDrawable

依赖

1
implementation "com.google.android.material:material:1.3.0"

介绍

Google介绍：材质形状的基本可绘制类，用于处理生成路径的阴影、高度、比例和颜色。

我的理解就是可动态改变Drawable的绘制路径

使用

  1. 创建一个MaterialShapeDrawable

    1
    2
    3
    private val backgroundShapeDrawable: MaterialShapeDrawable by lazy(LazyThreadSafetyMode.NONE) {
            MaterialShapeDrawable(this,null,R.attr.bottomSheetStyle,0)
    }

    MaterialShapeDrawable()的构造函数接收4个参数，第一个为Context、第二个为attrs资源属性文件、第三个为defStyleAttr样式、第四个为defStyleRes

  2. 设置Drawable内容

    MaterialShapeDrawable创建完了，那么接下就要设置来里面的Drawable的内容了

    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
    private val foregroundShapeDrawable: MaterialShapeDrawable by lazy(LazyThreadSafetyMode.NONE) {
            MaterialShapeDrawable(
                this,
                null,
                R.attr.bottomSheetStyle,
                0
            ).apply {
                // 设置填充颜色
                fillColor = ColorStateList.valueOf(
                    ContextCompat.getColor(
                        this@ListScalingActivity,
                        R.color.gray
                    )
                )
                // 设置阴影大小
                elevation = dpToPixel(16f)
                // 是否启用假阴影
                shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_NEVER
                // 初始化Drawable叠加功能
                initializeElevationOverlay(this@ListScalingActivity)
                // 设置Drawable的绘制路径
                shapeAppearanceModel = shapeAppearanceModel.toBuilder()
                    .setTopEdge(// 在边缘处理
                        SemiCircleEdgeCutoutTreatment(// 绘制一个圆形
                            dpToPixel(8f),
                            dpToPixel(24f),// 半径
                            0F,// 圆形的位置
                            dpToPixel(32f)
                        )
                    )
                    .build()
            }
        }

    这里我为了方便设置属性，使用了apply扩展函数

    fillColor：填充背景的颜色

    elevation：阴影高度

    dpToPixel：这个是扩展函数，用于将px转换为dp

    shapeAppearanceModel：Drawable绘制路径

    initializeElevationOverlay()：初始化Drawable的叠加功能

    shapeAppearanceModel.setTopEdge()：在顶部边缘上进行处理

    SemiCircleEdgeCutoutTreatment()：在边缘上的任意一个地方绘制一个圆形

  3. 设置完成之后在添加给控件

    效果如下：

    image-20210817105344089

    将会得到一个中间下凹的背景(我在中间加入了一张图片)

  4. 动态改变

    我们可以使用MaterialShapeDrawable.interpolation()方法来还原

    1
    foregroundShapeDrawable.interpolation = progress

    MaterialShapeDrawable.interpolation()方法表示设置路径的插值，介于0-1之间，1表示一个完全渲染的路径，0表示一个完整修复的路径。也就是是0表示不变，1表示恢复原状

    然后可以通过监听滑动值来进行动态更改

  5. 将会得到如下效果

    MaterialShapeDrawable这里的效果是通过BottomSheetBehavior+MaterialShapeDrawable+图片缩放达成的，可以看到效果非常不错

    如果想要了解使用BottomSheetBehavior那么可以去看看我的另一篇文章Material Design - BottomSheetBehavior