start_time: 2024-04-25 04:49:26 +0800

Material Design Components之MaterialButton的使用

96
blingbling_5a3f
IP属地: 广东
1.3 2020.01.19 13:50 字数 473

一:导包

implementation 'com.google.android.material:material:1.0.0'

二:App主题

当APP的主题是Theme.AppCompat系列时是不能使用com.google.android.material.button.MaterialButton控件的,否则汇报一个异常:

 Caused by: java.lang.IllegalArgumentException: This component requires that you specify a valid TextAppearance attribute. Update your app theme to inherit from Theme.MaterialComponents (or a descendant).
        at com.google.android.material.internal.ThemeEnforcement.checkTextAppearance(ThemeEnforcement.java:170)

意思是APP的主题只能使用继承自Theme.MaterialComponents系列的,其实给对应的Activity添加也是没有问题的。

android:theme="@style/Theme.MaterialComponents.Light"

三:使用

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Default" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:text="Disable" />

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="UnelevatedButton" />

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OutlinedButton" />

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextButton" />

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="IconButton"
        app:icon="@drawable/ic_camera" />

</LinearLayout>
MaterialButton.png
  • 其中按钮的填充色是由<item name="colorPrimary">@color/colorPrimary</item>决定的,如果同时给定了<item name="colorAccent">@color/colorAccent</item>那么按钮的填充色会是colorAccent;对于没有填充色的按钮,colorPrimary决定了他的文字颜色,如果同时给定了colorAccent颜色,那么文字的颜色会是colorAccent。
  • 按钮按下周围会有一圈的阴影,该阴影延伸到了按钮的边界之外,所以包裹按钮的ViewGroup应该设置android:clipToPadding=“false”,以防按钮阴影被父边界剪裁掉。

四:样式

一:默认样式style="@style/Widget.MaterialComponents.Button":有填充色、有阴影;

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Default" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_height="wrap_content"
        android:text="Default" />

二:style="@style/Widget.MaterialComponents.Button.UnelevatedButton":有填充色、没有阴影;

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="UnelevatedButton" />

三:style="@style/Widget.MaterialComponents.Button.OutlinedButton":透明背景、彩色文字、有轮廓,没有阴影;

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OutlinedButton" />

四:style="@style/Widget.MaterialComponents.Button.TextButton":透明背景、彩色文字、没有轮廓,没有阴影;

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextButton" />

五:style="@style/Widget.MaterialComponents.Button.Icon":有填充色、有阴影、有一个小图标;

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="IconButton"
        app:icon="@drawable/ic_camera" />

五:特有属性

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Icon Button"
        app:icon="@drawable/ic_camera"
        app:iconGravity="textStart"
        app:iconSize="24dp"
        app:iconPadding="16dp"
        app:cornerRadius="40dp"
        app:iconTint="#0F0"
        app:strokeColor="#0F0"
        app:strokeWidth="2dp"
        app:rippleColor="#00F"/>
  • app:icon="@drawable/ic_camera" 图标
  • app:iconGravity="textStart" 图标的位置
  • app:iconSize="24dp" 图标的大小
  • app:iconPadding="16dp" 图标与文字的距离
  • app:cornerRadius="40dp" 按钮圆角半径
  • app:iconTint="#0F0" 图标着色
  • app:strokeColor="#0F0" 轮廓的颜色
  • app:strokeWidth="2dp" 轮廓的线宽
  • app:rippleColor="#00F" 按压水波纹的颜色


    button.png
最后编辑于 :2020-01-19 13:50:31
©著作权归作者所有,转载或内容合作请联系作者
序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
783c64db 45e5 48d7 82e4 95736f50533e 沈念sama 阅读 158560 评论 4 赞 361
序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
783c64db 45e5 48d7 82e4 95736f50533e 沈念sama 阅读 67104 评论 1 赞 291
文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
8 开封第一讲书人 阅读 108297 评论 0 赞 243
文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
8 开封第一讲书人 阅读 43869 评论 0 赞 204
正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
388e473c fe2f 40e0 9301 e357ae8f1b41 茶点故事 阅读 52275 评论 3 赞 287
文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
8 开封第一讲书人 阅读 40563 评论 1 赞 216
那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
783c64db 45e5 48d7 82e4 95736f50533e 沈念sama 阅读 31833 评论 2 赞 312
文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
8 开封第一讲书人 阅读 30543 评论 0 赞 197
序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
783c64db 45e5 48d7 82e4 95736f50533e 沈念sama 阅读 34245 评论 1 赞 241
正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
388e473c fe2f 40e0 9301 e357ae8f1b41 茶点故事 阅读 30512 评论 2 赞 244
正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
388e473c fe2f 40e0 9301 e357ae8f1b41 茶点故事 阅读 32011 评论 1 赞 258
序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
783c64db 45e5 48d7 82e4 95736f50533e 沈念sama 阅读 28359 评论 2 赞 253
正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
388e473c fe2f 40e0 9301 e357ae8f1b41 茶点故事 阅读 33006 评论 3 赞 235
文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
8 开封第一讲书人 阅读 26062 评论 0 赞 8
文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
8 开封第一讲书人 阅读 26825 评论 0 赞 194
我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
783c64db 45e5 48d7 82e4 95736f50533e 沈念sama 阅读 35590 评论 2 赞 273
正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
388e473c fe2f 40e0 9301 e357ae8f1b41 茶点故事 阅读 35501 评论 2 赞 268
end_time: 2024-04-25 04:49:26 +0800 Completed in 116.78739300000001ms