1.MaterialButton

我们平时写布局，当遇到按钮需要圆角、或者描边等，通常的方法是新建一个xml文件，在shape标签下写，然后通过android:background或setBackground(drawable)设置。如果我们每个界面都新建个xml写shape，那么后期项目大了，维护起来就像无底洞。那么有没有这样一个控件，能在xml直接配置圆角、描边属性，满足平时开发的基本UI需求？刚好MaterialButton控件符合上面的要求。

直接使用

      <com.google.android.material.button.MaterialButton
          android:id="@+id/material_button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="MaterialButton"/>

公开属性如下：

关于insetTop、insetBottom
看下面的代码：

<com.google.android.material.button.MaterialButton
	android:id="@+id/btn1"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:textColor="@android:color/white"
    android:textSize="18sp"
/>

xml预览图：

有没有感觉怪怪的？貌似button上下多了一个padding！咦！代码里面明明没有设置padding啊！看了源码发现，MaterialButton默认在style指定了insetTop和insetBottom为6dp，使得height看起来并没有Button实际设置值一样高，可以在xml将MaterialButton的insetTop和insetBottom都设置为0dp，这样MaterialButton的高度就和实际设置的高度一致了。

关于阴影
MD组件默认都是自带阴影的，MaterialButton也不例外。但是有时候我们并不想要按钮有阴影，那么这时候可以指定style为
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"，这样就能去掉阴影，让视图看起来扁平化。

2.MaterialButtonToggleGroup

MaterialButtonToggleGroup可包含一组button

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true">
      <Button
          style="?attr/materialButtonOutlinedStyle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/cat_button_label_private"/>
      <Button
          style="?attr/materialButtonOutlinedStyle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/cat_button_label_team"/>
      <Button
          style="?attr/materialButtonOutlinedStyle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/cat_button_label_everyone"/>
      <Button
          style="?attr/materialButtonOutlinedStyle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/cat_button_label_custom"/>
    </com.google.android.material.button.MaterialButtonToggleGroup>

由app:singleSelection="true"控制是否可多选
MaterialButtonToggleGroup具有addOnButtonCheckedListener回调，该回调在选中按钮时触发。

3.ShapeableImageView

以往我们实现图片圆角、描边等需求，多数时候是使用第三方或者自定义，Glide也有个扩展库，能很轻松帮我们实现。不过在Material Design1.2.0中，已经有了一套官方的实现方案。那就是ShapeableImageView。

ShapeableImageView继承自ImageView，可以为image添加描边大小、颜色，以及圆角、裁切等，这得益于它新增了一个属性shapeAppearance，具体实现在ShapeAppearanceModel，可以通过style来配置，也可以通过代码实现。

在style.xml文件里面添加style

<!-- 圆角图片 -->
<style name="roundedCornerImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">25dp</item>
</style>

布局xml直接出效果

<!-- 圆角图片 -->
<!-- shapeAppearanceOverlay或shapeAppearance 加载style -->
<!-- strokeColo描边颜色 -->
<!-- strokeWidth描边宽度 -->
<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/image1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:padding="1dp"
    android:src="@mipmap/ic_launcher"
    app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
    app:strokeColor="#F44336"
    app:strokeWidth="2dp" />

描边问题
ShapeableImageView指定strokeWidth描边的时候，没有设置padding，那笔画可能一半看不见，这个跟自定义view，使用画笔时是一样样的，绘制时，画笔有一半在边界外，其描边会被覆盖掉一半，如strokeWidth=4dp，上下左右会被覆盖，实际的效果是只有2dp被显示，如图。

属性一览

ShapeableImageView属性：

注意： 设置描边的时候，需要添加padding属性，padding的值为strokeWidth的一半。

设置shapeAppearance或者shapeAppearanceOverlay使用的style属性：

花里胡哨的样式

cornerSize 如果传dp就是具体，如果传百分比，就是以控件高为准算百分比，比如高写了100dp，cornerSize写50%，就是50dp的效果

• 圆角图片
  

<!-- 圆角图片 -->
    <style name="roundedCornerImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>

• 圆形图片
  

<!-- 圆形图片 -->
<style name="circleImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

• 切角图片
  

<!-- 切角图片 -->
<style name="cutImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>

• 菱形图片
  

<!-- 菱形图片 -->
<style name="diamondImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

• 左上角90度扇形图片
  

<!-- 左上角90度扇形图片 -->
<style name="topLeftRoundImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">100%</item>
</style>

• 火箭头图片
  

<!-- 火箭头图片 -->
<style name="rocketImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

• 水滴图片
  

<!-- 水滴 -->
<style name="waterImageStyle">
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeBottomLeft">25dp</item>
    <item name="cornerSizeBottomRight">25dp</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

• 叶子图片
  

<!-- 叶子图片 -->
<style name="leafImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

• tip图片
  

<!-- tip图片 -->
<style name="tipImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>

    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerSizeBottomLeft">50%</item>

    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerSizeTopRight">50%</item>

    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

代码配置

imageView?.shapeAppearanceModel = ShapeAppearanceModel.builder()
            .setAllCorners(CornerFamily.ROUNDED,20f)
            .setTopLeftCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
            .setTopRightCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
            .setBottomRightCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
            .setBottomLeftCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
            .setAllCornerSizes(ShapeAppearanceModel.PILL)
            .setTopLeftCornerSize(20f)
            .setTopRightCornerSize(RelativeCornerSize(0.5f))
            .setBottomLeftCornerSize(10f)
            .setBottomRightCornerSize(AbsoluteCornerSize(30f))
            .build()

代码接收一个ShapeAppearanceModel，通过构建者模式实现，setTopLeft表示处理左上角，其他同理。
cornerSize表示设置的大小，有RelativeCornerSize和AbsoluteCornerSize，RelativeCornerSize构造方法接收一个百分比，范围0-1；AbsoluteCornerSize构造方法接收一个具体数值，这个数值就是圆角的数值。
这里还有个CornerFamily，它表示处理的方式，有ROUNDED和CUT两种，ROUNDED是圆角，CUT是直接将圆角部分裁切掉。setAllCornerSizes(ShapeAppearanceModel.PILL)可以直接实现圆形效果。

本文地址：https://blog.csdn.net/weixin_42046829/article/details/110224702