欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解

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

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"/>

Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
公开属性如下:

属性 描述
app:backgroundTint 背景着色
app:backgroundTintMode 着色模式
app:strokeColor 描边颜色
app:strokeWidth 描边宽度
app:cornerRadius 圆角大小
app:rippleColor 按压水波纹颜色
app:icon 图标icon
app:iconSize 图标大小
app:iconGravity 图标重心
app:iconTint 图标着色
app:iconTintMode 图标着色模式
app:iconPadding 图标和文本之间的间距

关于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预览图:
Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解

有没有感觉怪怪的?貌似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回调,该回调在选中按钮时触发。

Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解

3.ShapeableImageView

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

ShapeableImageView继承自ImageView,可以为image添加描边大小、颜色,以及圆角、裁切等,这得益于它新增了一个属性shapeAppearance,具体实现在ShapeAppearanceModel,可以通过style来配置,也可以通过代码实现。
Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解

在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被显示,如图。

Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解

属性一览

ShapeableImageView属性:

属性名 作用 参数以及含义
shapeAppearance ShapeableImageView的形状外观样式 引用style样式
shapeAppearanceOverlay ShapeableImageView的形状外观叠加样式 引用style样式
strokeColor 描边颜色
strokeWidth 描边宽度

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

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

属性名 作用 参数以及含义
cornerFamily 四个角shape属性/样式 -rounded: 圆角0、-cut: 切角1
cornerSize 四个角弧度
cornerFamilyTopLeft 左上shape属性/样式 -rounded: 圆角0、-cut: 切角1
cornerFamilyTopRight 右上shape属性/样式 -rounded: 圆角0、-cut: 切角1
cornerFamilyBottomRight 右下shape属性/样式 -rounded: 圆角0、-cut: 切角1
cornerFamilyBottomLeft 左下shape属性/样式 -rounded: 圆角0、-cut: 切角1
cornerSizeTopLeft 左上弧度
cornerSizeTopRight 右上弧度
cornerSizeBottomRight 右下弧度
cornerSizeBottomLeft 左下弧度

花里胡哨的样式

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

  • 圆角图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 圆角图片 -->
    <style name="roundedCornerImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>

  • 圆形图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 圆形图片 -->
<style name="circleImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>
  • 切角图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 切角图片 -->
<style name="cutImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>
  • 菱形图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 菱形图片 -->
<style name="diamondImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>
  • 左上角90度扇形图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 左上角90度扇形图片 -->
<style name="topLeftRoundImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">100%</item>
</style>
  • 火箭头图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 火箭头图片 -->
<style name="rocketImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

  • 水滴图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 水滴 -->
<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>
  • 叶子图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 叶子图片 -->
<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图片
    Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
<!-- 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

相关标签: Android