Material Components中的Shape、ShapeableImageView、MaterialButton

Material Components中的Shape、ShapeableImageView、MaterialButton

Material Components 是Google官方对Material Design的最佳实践，最近增加了不少东西，这里记录一下

引入包

首先，我们先要依赖material库

implementation 'com.google.android.material:material:1.2.1'

Shape

MaterialShapeDrawable类提供了很多有用的api，我们可以指定其为任意的边缘(Edge)和形状(Corner)。

这些形状可以使用差值浮动属性来控制，以允许角和边缘的动画。

val shapePathModel = ShapeAppearanceModel.builder()
    .setAllCorners(RoundedCornerTreatment())
    .setAllCornerSizes(10F)
    .build()
val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply {
    setTint(Color.parseColor("#bebebe"))
    paintStyle = Paint.Style.FILL
}
binding.img01.background = backgroundDrawable

当然，我们也可以设置形状(Corner)为切割

val shapePathModel = ShapeAppearanceModel.builder()
    //.setAllCorners(RoundedCornerTreatment())
    //.setAllCornerSizes(10F)
    .setAllCorners(CornerFamily.CUT, 20F) //相当于setAllCorners和setAllCornerSizes一起使用
    .build()
val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply {
    setTint(Color.parseColor("#bebebe"))
    paintStyle = Paint.Style.FILL
}
binding.img01.background = backgroundDrawable

当然，我们也可以设置角(Edge)的效果

val shapePathModel = ShapeAppearanceModel.builder()
    .setAllCorners(RoundedCornerTreatment())
    .setAllCornerSizes(10F)
    .setAllEdges(TriangleEdgeTreatment(8F, true))
    .build()
val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply {
    setTint(Color.parseColor("#bebebe"))
    paintStyle = Paint.Style.FILL
}
binding.img01.background = backgroundDrawable

我们可以给这个形状边框设置一个单独的颜色

val shapePathModel = ShapeAppearanceModel.builder()
    .setAllCorners(RoundedCornerTreatment())
    .setAllCornerSizes(10F)
    .setAllEdges(TriangleEdgeTreatment(8F, true))
    .build()
val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply {
    setTint(Color.parseColor("#bebebe"))
    paintStyle = Paint.Style.FILL_AND_STROKE
    strokeWidth = 2F
}
binding.img01.background = backgroundDrawable

在源码中，已经有很多不同类型的对于Edge和Corner的处理，对于大多数场景都可以满足，如果满足不了，也可以自定义CornerTreatment或EdgeTreatment来处理。

详见官方文档 https://github.com/material-components/material-components-android/blob/master/docs/theming/Shape.md

ShapeableImageView

知道了MaterialShapeDrawable后，我们再来看下ShapeableImageView

首先，我们再布局中，声明ShapeableImageView

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:scaleType="centerCrop"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.circle"
        app:srcCompat="@mipmap/img_001" />

接着，在style.xml中声明ShapeAppearance.circle这个style

<style name="ShapeAppearance.circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">10%</item>
</style>

当然，这里cornerSize单位可自定义。

我们也可以在代码中设置

val model =ShapeAppearanceModel.builder().setAllCornerSizes(ShapeAppearanceModel.PILL).build()
binding.shapeableImg02.shapeAppearanceModel = model

MaterialButton

MaterialButton继承AppCompatButton，在原有Button的基础上进行了扩展。

属性	描述
app:backgroundTint	背景着色
app:backgroundTintMode	背景着色模式
app:strokeColor	描边颜色
app:strokeWidth	描边宽度
app:cornerRadius	圆角大小
app:rippleColor	水波纹颜色
app:icon	内置icon
app:iconSize	内置icon大小
app:iconGravity	内置icon位置
app:iconTint	内置icon着色
app:iconTintMode	内置icon着色模式
app:iconPadding	内置icon和文本之间的间距
android:insetTop、android:insetBottom	MaterialButton的上下边，默认有6dp边距，这是MD的设计规范，可自行修改
app:shapeAppearance	和ShapeableImageView的用法一样，借此可自定义按钮形状

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_00"
        style="@style/Widget.MaterialComponents.Button"
        android:backgroundTint="@color/teal_200"
        app:cornerRadius="25dp"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:text="Button" />

MaterialButton自带的Style

属性	描述
@style/Widget.MaterialComponents.Button	默认样式，有填充色、有阴影
@style/Widget.MaterialComponents.Button.UnelevatedButton	有填充色、没有阴影
@style/Widget.MaterialComponents.Button.OutlinedButton	透明背景、彩色文字、有轮廓，没有阴影
@style/Widget.MaterialComponents.Button.TextButton	透明背景、彩色文字、没有轮廓，没有阴影
@style/Widget.MaterialComponents.Button.Icon	有填充色、有阴影、使用图标

MaterialButtonToggleGroup

可以用来代替RadioGroup，提供了更多的Material Design的元素。

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.button.MaterialButtonToggleGroup
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:id="@+id/button_tab_group"
            app:checkedButton="@+id/button_tab_1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:singleSelection="true">

            <com.google.android.material.button.MaterialButton
                android:id="@+id/button_tab_1"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ONE" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/button_tab_2"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TWO" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/button_tab_3"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="THREE" />
        </com.google.android.material.button.MaterialButtonToggleGroup>

    </androidx.constraintlayout.widget.ConstraintLayout>

监听选中的话用addOnButtonCheckedListener

binding.buttonTabGroup.addOnButtonCheckedListener { group, checkedId, isChecked -> }

MaterialButtonToggleGroup还有几个主要的属性：

• singleSelection：是否单选
• selectionRequired：是否必须要选中
• checkedButton：默认选中的ID
• orientation：排列方式

其他

感谢

https://xuyisheng.top/mdc-shape/

https://xuyisheng.top/mdc_shapeableimageview/

https://xuyisheng.top/mdbutton/