UIAndroid技术知识Android开发

Material Design Components之Mater

2020-01-19  本文已影响0人  blingbling_5a3f

一:导包

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

四:样式

一:默认样式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"/>
上一篇 下一篇

猜你喜欢

热点阅读