Android 基础 MaterialButton

项目中经常会使用到,给按钮添加边框,点击效果,圆角,icon+文字圆角。
发现系统就有提供好的组件,除了CardView 可以设置。android material design支持库中各种可以直接拿来用的组件。

meterialDesign 支持库

下面基于com.google.android.material.button.MaterialButton 这个组件,展示了可以设置的集中效果。

Android 基础 MaterialButton_第1张图片

如上,基本上可以满足日常开发。

注意使用过程中,已知问题。

1.设置圆角描边,并且同时设置背景色时,放大会看到背景色超出了圆角边框
2.默认设置的按钮高度没有正常显示,上边距和下边距有默认值,需要去掉默认值。

    android:insetTop="0dp"
    android:insetBottom="0dp" 

3.设置enable=false,按钮左边icon彩色会自动变成黑白

代码:

<?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"
    android:paddingLeft="10dp"
    tools:context=".MaterialButtonActivity">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        app:title="MaterialButton"
        android:layout_height="40dp" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/txt_confirm"
        android:layout_below="@+id/txt_tip"
        android:layout_marginTop="18dp"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:elevation="0dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="75dp"
        android:layout_height="38dp"
        app:strokeWidth="2dp"
        app:strokeColor="@color/cardview_dark_background"
        app:cornerRadius="37.5dp"
        android:backgroundTintMode="src_over"
        android:background="@color/colorAccent"
        android:textSize="12sp"
        android:gravity="center"
        android:text="测试"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse" />

    <com.google.android.material.button.MaterialButton
        android:layout_marginLeft="10dp"
        android:id="@+id/txt_confirm2"
        android:layout_below="@+id/txt_tip"
        android:layout_marginTop="18dp"
        android:padding="0dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="75dp"
        android:layout_height="38dp"
        app:rippleColor="@color/colorAccent"
        app:backgroundTint="#ff0f00"
        app:cornerRadius="13dp"
        android:textSize="12sp"
        android:gravity="center"
        android:text="测试"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse" />

    <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="@mipmap/ucenter_diy_explain" />

    <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"
        android:enabled="false"
        app:icon="@mipmap/ucenter_diy_explain" />


    <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
        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="@mipmap/ucenter_diy_explain" />


    <!--    you填充色,有阴影-->

    <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" />


    <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="@mipmap/ucenter_diy_explain"
        app:iconGravity="textStart"
        app:iconSize="24dp"
        app:iconPadding="16dp"
        app:cornerRadius="40dp"
        app:iconTint="#fff"
        app:strokeColor="#0F0"
        app:strokeWidth="2dp"
        app:rippleColor="#00F" />


</LinearLayout>

引用
https://developer.android.google.cn/ android developers

你可能感兴趣的:(android,基础知识)