Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
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"/>
公开属性如下:
属性 | 描述 |
---|---|
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预览图:
有没有感觉怪怪的?貌似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属性:
属性名 | 作用 | 参数以及含义 |
---|---|---|
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的效果
- 圆角图片
<!-- 圆角图片 -->
<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
上一篇: Docker命令让普通用户能够执行的实现
下一篇: Java多线程面试题(面试官常问)
推荐阅读
-
Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
-
Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解
-
Android Material 常用组件详解(二)—— TextInputLayout 使用详解
-
Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
-
Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解