Android Material Design之MaterialButton(一)

最新推荐文章于 2024-04-08 00:28:50 发布

csdn_yang123

最新推荐文章于 2024-04-08 00:28:50 发布

阅读量570

点赞数

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/csdn_yang123/article/details/127995309

版权

Android 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

按规矩先上效果图
资源引入

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

关键属性

属性	描述
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	图标和文本之间的间距

注意事项
设置按钮背景使用app:backgroundTint
细心的老哥肯定发现Button 普通按钮 与MaterialButton 效果一样,这是因为在AndroidManifest.xml中application标签设置了theme属性

<application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MaterialDesignerDemo"
        tools:targetApi="31">


<style name="Theme.MaterialDesignerDemo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

为什么使用MaterialButton ?
因为它可以帮助我们减少drawable文件
上布局文件源代码

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="AppCompatButton 普通按钮" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Button 普通按钮" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="MaterialButton 扁平按钮" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="MaterialButton 前置icon"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconSize="20dp" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="MaterialButton 前置icon"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconGravity="textEnd"
        app:iconSize="20dp" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="MaterialButton 描边扁平按钮"
        app:strokeColor="@color/black"
        app:strokeWidth="5dp"/>
</LinearLayout>