summerain0的个人博客

  • 首页
  • 意见反馈
  • 友情链接
  • 申请友联
每个Bug都有解决之法
在修了在修了_(:з」∠)_
  1. 首页
  2. Material Design
  3. 正文

Android Material Design全面解析(一)- MaterialButton篇

2020年9月15日 284点热度 1人点赞 0条评论
浏览量: 199
内容 隐藏目录
1 前言
2 MaterialButton
2.1 什么是MaterialButton?
2.2 效果图
2.3 继承关系
2.4 实际运用
2.5 关于闪退问题
2.5.1 法一
2.5.2 法二
2.6 关于Background
2.7 关于insetTop、insetBottom
2.8 去除阴影
2.9 公开属性
2.10 项目完整源码
3 MaterialButtonToggleGroup
3.1 什么是MaterialButtonToggleGroup?
3.2 继承关系
3.3 举个栗子
3.4 监听方法
3.5 公开属性

前言

本系列将要介绍Material design库包含的所有控件,
基于com.google.android.material:material:1.2.1讲解

 

MaterialButton

什么是MaterialButton?

MaterialButton是Google于SDK28推出的新控件,当遇到按钮需要圆角、或者描边等,就不必使用xml文件或者Github上找第三方库实现。

(谷歌官方文档,无需梯子) MaterialButton

 

效果图

原效果图丢失了

原图丢失了

继承关系

Java
1
2
3
4
5
6
java.lang.Object
↳android.view.View
  ↳android.widget.TextView
   ↳android.widget.Button
    ↳androidx.appcompat.widget.AppCompatButton
     ↳com.google.android.material.button.MaterialButton
 

实际运用

  • 效果如图片第二个按钮
XHTML
1
2
3
4
5
6
7
<com.google.android.material.button.MaterialButton
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:text="Material"
    android:textAllCaps="false"
    android:textColor="@android:color/white"
    android:textSize="18sp" />
啥?闪退了?那就删除吧

 

关于闪退问题

在v1.1.0以后,使用MD控件可能会出现闪退的问题,原因是未将theme设置为MaterialComponents,解决方法如下:

法一

在控件中添加
android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"
即可解决

法二

XHTML
1
2
3
<style name="MaterialComponents_Theme" parent="Theme.MaterialComponents.Light.NoActionBar">
...
</style>

然后设置App主题为@style/MaterialComponents_Theme即可

 

关于Background

All attributes from MaterialButton are supported. Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.Google
  • 大意就是不可以使用android:background设置背景,会破坏MaterialButton本身的绘制,而设置背景则推荐使用app:backgroundTint

 

关于insetTop、insetBottom

  • MaterialButton创建后,按钮实际长度并不是设定值,因为它上下有留空,可以使用
    android:insetBottom="0dp"和android:insetTop="0dp"去除。

 

去除阴影

  • MD控件默认有阴影效果,但是有时候我们并不想要按钮有阴影,那么这时候可以指定style为
    style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
    这样就能去掉阴影,让视图看起来扁平化。

 

公开属性

属性 描述 参数
app:backgroundTint 背景着色 默认为?attr/colorPrimary
app:backgroundTintMode 着色模式 add,multiply,screen,src_atop,src_in,src_over
app:strokeColor 描边颜色
app:strokeWidth 描边宽度
app:cornerRadius 圆角大小
app:rippleColor 按压水波纹颜色
app:icon 图标icon
app:iconSize 图标大小
app:iconGravity 图标重心 start,end.textStart,textEnd
app:iconTint 图标着色
app:iconTintMode 图标着色模式 add,multiply,screen,src_atop,src_in,src_over
app:iconPadding 图标和文本之间的间距

 

项目完整源码

Java
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮" />
 
    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Material"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" />
 
    <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:text="圆角 10dp"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"
        app:cornerRadius="10dp" />
 
    <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:text="描边 2dp"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"
        app:strokeColor="#ff0000"
        app:strokeWidth="2dp" />
 
    <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:text="图标"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"
        app:cornerRadius="10dp"
        app:icon="@drawable/ic_android_black_24dp" />
 
    <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:text="后置着色"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"
        app:cornerRadius="10dp"
        app:icon="@drawable/ic_android_black_24dp"
        app:iconGravity="textEnd"
        app:iconTint="#ff0000" />
 
</LinearLayout>
 

 

MaterialButtonToggleGroup

什么是MaterialButtonToggleGroup?

  • 类似一个LinearLayout,但只能添加MaterialButton,只有第一个子元素的最左边角和最后一个子元素的最右边角才能保留它们的形状外观或角大小,类似于iOS中的SegmentedControl, 用户可以从组中选择一个或多个选项。
  • 谷歌文档 -> MaterialButtonToggleGroup

 

继承关系

Java
1
2
3
4
5
java.lang.Object
   ↳android.view.View
       ↳android.view.ViewGroup
           ↳android.widget.LinearLayout
               ↳com.google.android.material.button.MaterialButtonToggleGroup
 

举个栗子

Java
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
34
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.button.MaterialButtonToggleGroup xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toggleGroup"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:checkedButton="@id/btn1"
    app:singleSelection="true">
 
    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn1"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选项一"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" />
 
    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn2"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选项二"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" />
 
    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn3"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选项三"
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" />
 
</com.google.android.material.button.MaterialButtonToggleGroup>

监听方法

Java
1
2
3
4
5
6
7
MaterialButtonToggleGroup materialButtonToggleGroup = findViewById(R.id.toggleGroup);
materialButtonToggleGroup.addOnButtonCheckedListener(new MaterialButtonToggleGroup.OnButtonCheckedListener() {
    @Override
    public void onButtonChecked(MaterialButtonToggleGroup group, int checkedId, boolean isChecked) {
        Toast.makeText(MainActivity.this, "ID:" + checkedId + ", checked:" + isChecked, Toast.LENGTH_SHORT).show();
    }
});
 

公开属性

属性 描述 参数
app:checkedButton 默认选中 按钮ID
app:singleSelection 是否单项选择 true/false
app:selectionRequired 设置为true后,强制至少选中一个 true/false
标签: Android Material Design
最后更新:2020年10月22日

summerain0

保持饥渴的专注,追求最佳的品质

打赏 点赞

文章评论

取消回复

summerain0

保持饥渴的专注,追求最佳的品质

最新 热点 随机
最新 热点 随机
什么?你是学生?还不快来白嫖JetBrains全家桶? Android Studio的图标库出现Nothing to show问题 GitHub在线下载加速网址集合 Android Material Design全面解析(一)- MaterialButton篇 Android自定义全局异常捕获——Activity形式 自定义全局异常捕捉——保存至本地
Android Studio的图标库出现Nothing to show问题 Android Material Design全面解析(一)- MaterialButton篇 自定义全局异常捕捉——保存至本地 什么?你是学生?还不快来白嫖JetBrains全家桶? Androidx映射文件 GitHub在线下载加速网址集合
标签聚合
Material Design 工具 教程 Android
实用工具
  • 免费API工具
友情链接
  • AIDE教程网
  • 极坛
  • Ptcraft
  • 沐川的博客

COPYRIGHT © 2020 summerain0的个人博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

闽ICP备19012197号