Android?MaterialButton使用實(shí)例詳解(告別shape、selector)
更新時(shí)間：2022年09月03日 08:35:43 作者：yechaoa
我們平時(shí)寫布局,當(dāng)遇到按鈕需要圓角、或者描邊等,通常的方法是新建一個(gè)xml文件,在shape標(biāo)簽下寫,然后通過android:background或setBackground(drawable)設(shè)置,這篇文章主要給大家介紹了關(guān)于Android?MaterialButton使用詳解的相關(guān)資料,需要的朋友可以參考下
效果
前言
先來看一下MaterialButton是什么
由上圖可以看到MaterialButton也沒有什么神秘的，不過是Button的一個(gè)子類而已，但是經(jīng)過谷歌的封裝之后，在符合Material Design的基礎(chǔ)上，使用起來更加方便了，且容易實(shí)現(xiàn)預(yù)期效果。
使用
引入material包
implementation 'com.google.android.material:material:1.2.1'
常規(guī)
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textAllCaps="false" />
與Button使用無異，textAllCaps是取消全部大小寫。
圖標(biāo)
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/app_name"
android:textAllCaps="false"
app:icon="@mipmap/ic_launcher" />
app:icon屬性指定圖標(biāo)。
圓角
<com.google.android.material.button.MaterialButton
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/app_name"
android:textAllCaps="false"
app:cornerRadius="25dp"
app:icon="@mipmap/ic_launcher"
app:iconGravity="end" />
app:cornerRadius屬性指定圓角大小。
Button描邊
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/app_name"
android:textAllCaps="false"
app:cornerRadius="25dp"
app:strokeColor="@color/black"
app:strokeWidth="3dp" />
app:strokeColor描邊顏色app:strokeWidth描邊寬度
文字描邊
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/app_name"
android:textAllCaps="false"
app:cornerRadius="5dp"
app:rippleColor="@color/red"
app:strokeColor="@color/red"
app:strokeWidth="3dp" />
- 與上面不同的是，這里用了
style，區(qū)別在于上面的是常規(guī)Button狀態(tài)下的描邊，這個(gè)是文字Button狀態(tài)下的描邊。 app:rippleColor點(diǎn)擊波紋顏色
文字按鈕
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/app_name"
android:textAllCaps="false" />
與常規(guī)使用方法一樣，但是加了style，這個(gè)style在未選中的情況下，對背景色設(shè)置了透明。
圓形Button
<com.google.android.material.button.MaterialButton
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="@string/login"
android:textAllCaps="false"
android:textSize="20sp"
app:cornerRadius="999dp"
app:strokeColor="@color/orange"
app:strokeWidth="5dp" />
這里為什么來個(gè)圓形Button呢，是因?yàn)樯婕暗絻蓚€(gè)屬性
android:insetTop上邊距android:insetBottom下邊距
這兩個(gè)參數(shù)默認(rèn)是6dp，不設(shè)置為0dp的話，就不是一個(gè)規(guī)則的圓。
關(guān)于其他屬性的默認(rèn)參數(shù)，可以在xml文件的右上角，選中Design面板，選擇要查看的View即可。
源碼分析icon
唯一不足的是MaterialButton不能像chip一樣給icon設(shè)置事件。
來看看源碼中 icon具體是什么實(shí)現(xiàn)的：
public void setIcon(@Nullable Drawable icon) {
if (this.icon != icon) {
this.icon = icon;
updateIcon(/* needsIconUpdate = */ true);
}
}
這里比較簡單，繼續(xù)看調(diào)用的updateIcon方法
private void updateIcon(boolean needsIconUpdate) {
// Forced icon update
if (needsIconUpdate) {
resetIconDrawable(isIconStart);
return;
}
...
if (hasIconChanged) {
resetIconDrawable(isIconStart);
}
}
有省略，看關(guān)鍵兩段代碼都調(diào)用了resetIconDrawable方法，繼續(xù)
private void resetIconDrawable(boolean isIconStart) {
if (isIconStart) {
TextViewCompat.setCompoundDrawablesRelative(this, icon, null, null, null);
} else {
TextViewCompat.setCompoundDrawablesRelative(this, null, null, icon, null);
}
}
相信到這里很多人就明白了，icon的實(shí)現(xiàn)等同于drawableStart。
只不過在MaterialButton中drawableStart是沒有效果的，而是icon和iconGravity配合使用來達(dá)到效果。
屬性
關(guān)于xml屬性，我做了一個(gè)整理
| 屬性 | 含義 |
|---|---|
| insetBottom | 下邊距，默認(rèn)6dp |
| insetTop | 上邊距，默認(rèn)6dp |
| cornerRadius | 圓角大小 |
| icon | 圖標(biāo) |
| iconGravity | 圖標(biāo)位置，只能前后 |
| iconPadding | 圖標(biāo)距文字距離，默認(rèn)8dp |
| iconSize | 圖標(biāo)大小 |
| iconTint | 圖標(biāo)著色 |
| iconTintMode | 圖標(biāo)著色模式 |
| rippleColor | 點(diǎn)擊波紋顏色 |
| strokeColor | 描邊顏色 |
| strokeWidth | 描邊寬度 |
| app:backgroundTint | 背景色（注意命名空間） |
Github
https://github.com/yechaoa/MaterialDesign
感謝
最后
到此這篇關(guān)于Android MaterialButton使用實(shí)例詳解的文章就介紹到這了,更多相關(guān)Android MaterialButton使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
貪吃蛇是一款足夠經(jīng)典的游戲。本文將利用Android中的Flutter編寫這一經(jīng)典的小游戲，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Android自制精彩彈幕效果，彈幕垂直方向可固定隨機(jī)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Kotlin標(biāo)準(zhǔn)庫函數(shù)使用分析及介紹
Kotlin提供了一個(gè)系統(tǒng)庫，是Java庫的增強(qiáng)。其中有很多函數(shù)在適配了Java的類型和方法同時(shí)使用Kotlin的語法。其中一些底層的函數(shù) 是使用比較廣泛的2022-09-09
這篇文章主要為大家詳細(xì)介紹了Android獲取藍(lán)牙設(shè)備列表的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Android中的webview支持頁面中的文件上傳實(shí)例代碼
本篇文章主要介紹了Android中的webview支持頁面中的文件上傳，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
大家好，本篇文章主要講的是Android之小球自由碰撞動畫示例，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
Android編程實(shí)現(xiàn)圖片放大縮小功能ZoomControls控件用法實(shí)例
這篇文章主要介紹了Android編程實(shí)現(xiàn)圖片放大縮小功能ZoomControls控件用法,結(jié)合具體實(shí)例形式分析了Android ZoomControls控件實(shí)現(xiàn)圖片縮放的具體操作方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-09-09
Android自定義ProgressBar實(shí)現(xiàn)漂亮的進(jìn)度提示框
這篇文章主要為大家詳細(xì)介紹了Android自定義ProgressBar實(shí)現(xiàn)漂亮的進(jìn)度提示框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Android自定義圓形進(jìn)度條的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Android中LinearLayout布局的常用屬性總結(jié)
這篇文章主要介紹了Android中LinearLayout布局的常用屬性總結(jié),包括居中、重心、比例等線性布局中的基本設(shè)置,需要的朋友可以參考下2016-04-04