Android Design Support Library v28 新增組件詳解

1.簡介

Google在近期發佈了最新的Design Support Library 28.0.0-alpha3版本，其中新增了一些非常實用的組件，本篇文章將會對其進行詳細的介紹，一起來看下！

如果你對Material Design還不太瞭解，可以點擊這篇文章《Design Support Library介紹》瞭解一下。

引入依賴庫

在app根目錄的buil.gradle文件中加入依賴：

dependencies {
    ...
    implementation 'com.android.support:design:28.0.0-alpha3'
}

2.MaterialButton

MaterialButton組件繼承於Button，因此可以使用Button的大部分屬性，可以更便捷的設置按鈕圓角、邊框、圖標等屬性，看下效果：

對應的佈局文件：

<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:gravity="center"
    android:orientation="vertical">

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Material Button"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse"
        app:rippleColor="@color/color_white" />

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorPrimary"
        android:gravity="center"
        android:text="Material Button"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse" />

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Material Button"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse"
        app:cornerRadius="10dp" />

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="Material Button"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse"
        app:icon="@mipmap/ic_launcher"
        app:iconSize="30dp" />

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="Material Button"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse"
        app:icon="@mipmap/ic_launcher"
        app:iconSize="30dp"
        app:iconTint="@color/colorPrimary" />

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="Material Button"
        android:textAllCaps="false"
        android:textAppearance="?android:attr/textAppearanceLargeInverse"
        app:icon="@mipmap/ic_launcher"
        app:iconSize="30dp"
        app:iconTint="@color/colorPrimary"
        app:strokeColor="@color/colorPrimaryDark"
        app:strokeWidth="2dp" />

</LinearLayout>

注意：MaterialButton必須設置textAppearance屬性，如果沒有的話會報錯，不知道是不是bug。

MaterialButton屬性速查表：

屬性	介紹
app:backgroundTint	按鈕背景着色
app:backgroundTintMode	按鈕背景的着色模式
app:icon	按鈕圖標（在文字左邊，不能設置位置）
app:iconSize	按鈕圖標大小
app:iconPadding	按鈕圖標的內邊距
app:iconTint	按鈕圖標着色
app:iconTintMode	按鈕圖標的着色模式
app:additionalPaddingStartForIcon	按鈕圖標的左內邊距
app:additionalPaddingEndForIcon	按鈕圖標的右內邊距
app:strokeColor	按鈕邊框顏色
app:strokeWidth	按鈕邊框寬度
app:cornerRadius	按鈕圓角角度
app:rippleColor	按鈕點擊水波紋效果顏色

着色模式效果

3.Chip & ChipGroup

在Chip組件出現之前，我們一直都是通過自定義控件的形式來實現關鍵字標籤等UI效果的，比如《Android 流式佈局FlowLayout 實現關鍵字標籤》中實現的效果，現在Chip & ChipGroup組件可以對其進行原生支持了，非常Nice，看下效果：

對應的佈局文件：

<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:gravity="center"
    android:orientation="vertical">

    <android.support.design.chip.ChipGroup
        android:id="@+id/chip_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:chipSpacing="10dp"
        app:singleSelection="false">

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="Chip"
            android:textAllCaps="false" />

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:text="水波紋顏色"
            android:textAllCaps="false"
            app:rippleColor="@color/colorAccent" />

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="圖標"
            android:textAllCaps="false"
            app:chipIcon="@mipmap/ic_launcher"
            app:chipIconEnabled="true"
            app:chipIconSize="20dp"
            app:iconStartPadding="5dp" />

        <android.support.design.chip.Chip
            android:id="@+id/chip_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="刪除按鈕"
            android:textAllCaps="false"
            app:closeIconEnabled="true" />

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="背景"
            android:textAllCaps="false"
            app:chipBackgroundColor="@color/colorAccent" />

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="邊框"
            android:textAllCaps="false"
            app:chipStrokeColor="@color/colorAccent"
            app:chipStrokeWidth="2dp" />

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="圓角角度"
            android:textAllCaps="false"
            app:chipCornerRadius="0dp" />

    </android.support.design.chip.ChipGroup>

</LinearLayout>

單選或多選功能需要設置android:checkable="true"纔可以實現，官方給的設置方式是app:checkable=“true”，會報錯找不到，可能是bug，發佈正式版的時候再看看。

Chip組件默認不支持點擊，需要設置android:clickable="true"纔可以。

ChipGroup屬性速查表：

屬性	介紹
app:chipSpacing	Chip在水平&垂直方向的間距
app:chipSpacingHorizontal	Chip在水平方向的間距
app:chipSpacingVertical	Chip在垂直方向的間距
app:singleLine	是否單行顯示Chip，默認爲false
app:singleSelection	是否爲單選模式，默認爲false

Chip屬性速查表：

屬性	介紹
app:chipBackgroundColor	Chip背景顏色
app:chipCornerRadius	Chip圓角角度
app:chipStrokeColor	Chip邊框顏色
app:chipStrokeWidth	Chip邊框寬度
app:rippleColor	Chip點擊水波紋效果顏色
app:chipIconEnabled	是否在Chip上顯示圖標，默認爲true
app:chipIcon	Chip圖標（在文字左邊，不能設置位置）
app:chipIconSize	Chip圖標大小
app:closeIconEnabled	是否顯示Chip關閉按鈕，默認爲false
app:closeIcon	Chip關閉按鈕圖標
app:closeIconTint	Chip關閉按鈕着色
app:closeIconSize	Chip關閉按鈕大小
app:checkedIconEnabled	是否顯示Chip選中圖標，默認爲true
app:checkedIcon	Chip選中圖標
app:chipStartPadding	Chip左內邊距
app:chipEndPadding	Chip右內邊距
app:iconStartPadding	Chip圖標左內邊距
app:iconEndPadding	Chip圖標右內邊距
app:textStartPadding	Chip文字左內邊距
app:textEndPadding	Chip文字右內邊距
app:closeIconStartPadding	Chip關閉圖標左內邊距
app:closeIconEndPadding	Chip關閉圖標右內邊距

4.MaterialCardView

與普通CardView相比，可以設置邊框樣式，看下效果：

對應的佈局文件：

<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:gravity="center"
    android:orientation="vertical">

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@color/colorAccent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="MaterialCardView" />

    </android.support.design.card.MaterialCardView>

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="MaterialCardView" />

    </android.support.design.card.MaterialCardView>

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="MaterialCardView" />

    </android.support.design.card.MaterialCardView>

</LinearLayout>

MaterialCardView屬性速查表：

屬性	介紹
app:strokeColor	MaterialCardView邊框顏色
app:strokeWidth	MaterialCardView邊框寬度

5.BottomAppBar

BottomAppBar組件通常會與FloatingActionButton組件一起使用，但是在開發過程中不是很常用，看下效果：

對應的佈局文件：

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_add"
        app:fabSize="normal"
        app:layout_anchor="@id/bottom_app_bar" />

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="end"
        app:fabAttached="true" />

</android.support.design.widget.CoordinatorLayout>

根佈局需要使用CoordinatorLayout，FloatingActionButton通過layout_anchor屬性與BottomAppBar綁定在一起。

BottomAppBar屬性速查表：

屬性	介紹
app:backgroundTint	BottomAppBar背景着色
app:fabAlignmentMode	FAB位置（居中或居右），默認爲居右
app:fabAttached	是否綁定FAB，默認爲true
app:fabCradleMargin	BottomAppBar與FAB的距離，默認爲5dp
app:fabCradleRoundedCornerRadius	BottomAppBar與FAB相鄰處的圓角角度，默認爲8dp
app:fabCradleVerticalOffset	FAB在BottomAppBar中的垂直偏移量，默認爲0dp

6.寫在最後

到這裏Design Support Library v28新增組件就介紹完了，如有錯誤或者遺漏的地方可以給我留言評論，謝謝！

代碼已上傳至GitHub，歡迎Star、Fork！

GitHub地址：https://github.com/alidili/DesignSupportDemo

本文Demo的Apk下載地址：https://github.com/alidili/DesignSupportDemo/raw/master/DesignSupportDemo.apk