前言
先写一些废话。
以前我们写一些登录按钮,注册按钮,提交按钮等等,都会新建一个xml文件,写shape,selector。
normal:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="279dp" android:height="38dp">
<shape android:shape="rectangle">
<solid android:color="@color/white"/>
<corners android:radius="4dp" />
</shape>
</item>
</selector>
pressed:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="279dp" android:height="38dp">
<shape android:shape="rectangle">
<solid android:color="@color/black"/>
<corners android:radius="4dp" />
</shape>
</item>
</selector>
selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/pressed" android:state_pressed="true" />
<item android:drawable="@drawable/normal" android:state_pressed="false" />
</selector>
以上是最简单的按钮举例了吧,需要写3个xml。如果我们的项目小,按钮样式统一还好,如果按钮多变的话,就是3N个xml了,找起来很头疼,对吧。当然也有大佬也写出了BackgroundLibrary ,来替代shape,selector等。
题外话:推荐个插件Android Drawable Preview,看名字也知道的吧,图片预览
言归正传
我们这次的主题是Material组件中的MaterialButton。可以直接配边框,圆角,甚至形状等。
首先我们先来看此控件的使用方式,首先依赖material组件
implementation 'com.google.android.material:material:1.3.0'
1.默认
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="默认" />
2.加图标
iconGravity | 备注 |
---|---|
start | 前置 |
top | 置顶 |
end | 后置 |
textStart | 文字左边,紧贴文字 |
textTop | 文字上边,紧贴文字 |
textEnd | 文字右边,紧贴文字 |
------------------------------------------------------------分割线 -----------------------------------------------------------
<com.google.android.material.button.MaterialButton
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="MaterialButton"
app:iconGravity="start"
app:icon="@mipmap/icon_apply" />
------------------------------------------------------------分割线 -----------------------------------------------------------
<com.google.android.material.button.MaterialButton
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="MaterialButton"
app:cornerRadius="25dp"
app:icon="@mipmap/icon_apply"
app:iconGravity="top" />
------------------------------------------------------------分割线 -----------------------------------------------------------
<com.google.android.material.button.MaterialButton
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="MaterialButton"
app:cornerRadius="25dp"
app:icon="@mipmap/icon_apply"
app:iconGravity="end" />
------------------------------------------------------------分割线 -----------------------------------------------------------
3.修改矢量图标颜色
<com.google.android.material.button.MaterialButton
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="MaterialButton"
app:iconGravity="start"
app:iconTint="#f00"//红色
app:icon="@mipmap/icon_apply" />
------------------------------------------------------------分割线 -----------------------------------------------------------
4.修改矢量图标大小
<com.google.android.material.button.MaterialButton
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="MaterialButton"
app:iconSize="30dp"
app:iconGravity="start"
app:icon="@mipmap/icon_apply" />
------------------------------------------------------------分割线 -----------------------------------------------------------
5.修改背景色 (不可用background)
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorPrimaryDark"
android:text="MaterialButton" />
------------------------------------------------------------分割线 -----------------------------------------------------------
6.圆角以及边框线属性
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="MaterialButton"
android:textAllCaps="false"
app:cornerRadius="25dp"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="2dp" />
------------------------------------------------------------分割线 -----------------------------------------------------------
7.圆形
<com.google.android.material.button.MaterialButton
android:layout_width="100dp"
android:layout_height="100dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="Button"
android:textAllCaps="false"
android:textSize="18sp"
app:cornerRadius="50dp" />//保证cornerRadius是width/height得一半就可以
------------------------------------------------------------分割线 -----------------------------------------------------------
8.单选用法
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="@id/mb_yes"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="@+id/mb_yes"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="是"
android:textSize="15sp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/mb_no"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="否"
android:textSize="15sp" />
</com.google.android.material.button.MaterialButtonToggleGroup>