MaterialDesign系列文章（十一）Google2018年大會新出的控制元件彙總集合

筆墨Android發表於2019-03-04

今天騎士又輸了，老詹42分都沒能挽救騎士！真的不想說什麼了。。。老詹太累了，一個人帶領整個球隊！！！紀念一下老詹和我的籃球！！！

大家好，我是筆墨Android，又要開車了！

MaterialDesign系列文章（十一）Google2018年大會新出的控制元件彙總集合

關於這篇文章我醞釀了很久，第一是沒有辦法整合Android P，另一個就是沒有相應的類庫，最近在掘金閒逛的時候，突然發現GitHub上面有人使用新控制元件了，我就十分欣喜！為什麼呢？因為這個就說明我就能用了，其實我只是對其中的流式標籤比較感興趣，總看有人說怎麼用，但是真的沒有在程式碼中用過，只是停留在看的層面，這個我怎麼能忍呢？所以今天分享一下我使用的心得，哈哈！

本文知識點：

怎麼整合Android P和匯入新版的MaterialDesign的新控制元件;
Material Button的使用;
Chip和Chip Group的使用;
Material Card View的使用;
Bottom App Bar的使用;

1. 怎麼整合Android P和匯入新版的MaterialDesign的新控制元件;

這個部分是我踩坑最多的地方！當時我參考的是google中文網址中整合Android P的簡介,這裡說明了整合Android P的一些內容，如果你按照官網的方法去做的話。然而惡夢從這裡剛剛開始。。。。

變更Android P的坑

當你按照官網配置完成的時候，你會出現這樣的問題!

這個問題出現的原因主要是你在defaultConfig中設定了targetSdkVersion `android-P`這個東西，只要你刪除了這句話就可以了！修改後的配置就變成了這個樣子滴！這裡不是專案的build.gradle哦！切記切記。。。

android {
    compileSdkVersion `android-P`
    defaultConfig {
        applicationId "com.jinlong.materialdesign"
        minSdkVersion 15
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile(`proguard-android.txt`), `proguard-rules.pro`
        }
    }
}
複製程式碼

所以這裡千萬不要在defaultConfig標籤中新增targetSdkVersion `android-P`了，按照google所的，以後即使你新增這個也沒有用了！！！

整合新版sdk的坑

因為新版的SDK應該還沒有新的內容，沒有關於新控制元件的一些API，所以這裡我是從gitHub找到的相應API，應該都是一樣的！然後就開始整合，裡面有一個關於怎麼配置的網頁裡面說了怎麼配置這個內容;你就按照裡面的配置進行配置就可以了。當你Sync Now你會發現沒有問題。。。然後你就一心歡喜的準備去執行了，然而第一個坑出現了！

坑1：

如果你出現

Error:Execution failed for task `:app:transformDexArchiveWithExternalLibsDexMergerForDebug`.
> java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex

//或者下面這個錯誤那麼恭喜你，你中招了！哈哈

Error:Program type already present: android.support.v4.app.INotificationSideChannel$Stub$Proxy
複製程式碼

因為implementation `com.google.android.material:material:1.0.0-alpha1`裡面包含了所有MD中出現的內容，所以有的會造成內容重複等一寫錯誤，只要你把預設建立專案時生成的implementation `com.android.support:appcompat-v7:27.1.1`刪除就好了。

坑2:

按照上面的整合之後，你直接執行的話，會發現滿螢幕的紅色，然後大喝一聲FACK！！！WHAT！！！其實是你倒包不對了，只要重新倒一遍包就好了。

至此，你就能可以使用google新出的控制元件了，但是勸你先不要在專案裡面弄或者直接在專案裡使用，因為畢竟還在測試中，否則被打死了！我可概不負責！！！

2.Material Button的使用

這個控制元件其實和Button顯示上沒有太大的區別，但是使用的時候很多屬性都不一樣了，感覺google比較人性化，平時我們寫什麼描邊的時候，都要自定義shape，但是有哦了MaterialButton的話，什麼都省了。真的比較人性化！這裡還是慣例，先說一下相應的屬性問題！

可以使用的屬性

app:icon 給Button設定相應的圖示，這個也是改控制元件特有的
app:iconTint 給新增的icon著色(就是設定顏色)
app:iconTintMode 設定相應的著色模式相應的屬性有add、multiply、screen、src_atop、src_in、src_over只怪我語文不好，自己設定一下，看一眼就知道了！嘻嘻
app:iconPadding 圖示和文字的邊距
app:additionalPaddingLeftForIcon 圖示距離左邊的距離
app:additionalPaddingRightForIcon 圖示加文字距離右邊的距離
app:rippleColor 定義水波紋效果的顏色
app:backgroundTint 設定背景顏色，如果你想給控制元件設定背景色，使用這個屬性而不是background
app:backgroundTintMode 背景的著色模式
app:strokeColor 描邊的顏色
app:strokeWidth 描邊的寬度
app:cornerRadius 圓角的半徑

這裡演示一個效果，感興趣的童鞋，可以自己嘗試一下。

這個樣式很簡單，我沒有設定太多屬性！只是讓大家看一下效果！程式碼如下：

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="MaterialButton"
        app:additionalPaddingLeftForIcon="10dp"
        app:additionalPaddingRightForIcon="10dp"
        app:icon="@mipmap/ic_cake_white_24dp"
        app:iconPadding="10dp"
        app:iconTint="#098765"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolBal" />
複製程式碼

因為父控制元件是ConstraintLayout所以新增了一些屬性，童鞋可以省略！！！這個控制元件的其他屬性和之前沒有什麼太大的區別，這裡就不進行講解了！

3.Chip和Chip Group的使用

這個控制元件是我比較喜歡的控制元件，以前使用流式標籤都是使用的FlowLayout感興趣的同學，可以私信我，或者百度一下！很多的。但是現在不需要了，有了chip和chipGroup分分鐘實現上面的效果！

chip的屬性

app:chipText 設定chip顯示的文字
app:checkable chip是否可以被選擇，如果禁用的話和Button是一樣的
app:chipIcon 設定相應的圖示
app:closeIcon 讓chip顯示一個關閉按鈕
app:checkedIcon 設定選中的圖片
app:closeIconEnabled 關閉按鈕是否可以點選
app:chipIconEnabled 新增的圖片是否能點選
app:textAppearance 設定文字的樣式
app:chipBackgroundColor 設定chip的背景顏色
Chip Group的屬性
app:chipSpacing 水平和豎直方向同時設定間距
app:chipSpacingHorizontal 水平方向上設定間距
app:chipSpacingVertical 豎直方向上設定間距
app:singleLine 設定單行顯示，可以左右滑動哦！

3.1 chip的使用

下面開始說明關於chip的一些設定，看了看文件，後面可以有一個關閉的叉號，但是是通過設定style進行設定的。

<style name="Widget.MaterialComponents.Chip.Filter" parent="Base.Widget.MaterialComponents.Chip">
    <item name="android:checkable">true</item>

    <item name="chipIconEnabled">false</item>
    <item name="closeIconEnabled">false</item>

    <item name="checkedIcon">@drawable/ic_mtrl_chip_checked_black</item>
  </style>
複製程式碼

看見了就可以設定一些相應的屬性了，上面的屬性都寫著呢？隨便你怎麼設定。。。哈哈

這裡展示一下我設定的幾個chip的樣子

很醜有沒有。其實你可以按照checkBox來理解這個控制元件，沒有什麼新穎的啊！不開森。。。對了這個是有監聽的！

setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener listener)監聽狀態改變的
setOnCloseIconClickListener(OnClickListener listener) 監聽取消按鈕被點選的

3.1 chipGroupp的使用

感覺這個控制元件和FlowLayout都差不多，只是內部的chip多了一個狀態的樣子，忘了我之前說的分分鐘吧，我收回之前說的話！！！體驗一下新增的程式碼吧！

        ChipGroup chipGroup = findViewById(R.id.cg);
        for (int i = 0; i < 10; i++) {
            Chip tabChip = new Chip(this);
            if (i % 2 == 0) {
                tabChip.setChipText("這是一個長標籤" + (i + 1));
            } else {
                tabChip.setChipText("標籤0" + (i + 1));
            }
            chipGroup.addView(tabChip);
        }
複製程式碼

顯示的樣子大概是這樣的。

後來我仔細看看了看原始碼，發現其實還有很多屬性可以設定的！這裡直接看圖吧！

寫過自定義屬性的屬性的童鞋可以知道，ChipDrawable_後面的xxx是可以設定的屬性，什麼背景色，最小高度，圓角什麼的都是可以設定的！這些屬性連我這個英語不到2級的人都能看懂，相信你也能看懂的!就不一個一個寫了，其實有的時候原始碼才是最好的老師，我只是一個搬運工而已！哈哈。。。

PS: 如果你把ChipGroup設定能一行的話，建議外面包裹一層HorizontalScrollView否則的話是不能滑動的！！！

4.Material Card View的使用

關於CardView不熟悉的同學可以看看之前，MaterialDesign系列文章（九）CardView的使用及適配其實關於新版的CardView只是多增加了一個描邊的效果，其他的都沒有什麼變化！

app:strokeColor 描邊的顏色
app:strokeWidth 描邊的寬度

剩下的和CardView的使用都是一樣的，具體的程式碼是這樣的！！！

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:strokeColor="#223344"
        app:strokeWidth="2dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="展示這個標籤" />
    </com.google.android.material.card.MaterialCardView>
複製程式碼

5. Bottom App Bar的使用

這個控制元件是繼承ToolBar的一個控制元件，也就是說有很多使用方式和ToolBar是類似的！這裡說一下它特有設定的屬性！

app:backgroundTint 背景顏色
app:fabCradleDiameter fab嵌入到BottomAppBar的直徑(後面看了圖你就理解了！！！)
app:fabCradleRoundedCornerRadius fab嵌入到BottomAppBar的圓角(後面看了圖你就理解了！！！)
app:fabAttached 如果這個引數為true，並且使用app:layout_anchor關聯了這個bottomAppBar那麼fab會直接嵌入到bottomAppBar中，像下面那樣！！！
app:fabAlignmentMode fab嵌入到BottomAppBar的樣式
- end 效果是這樣的

– center 預設是中間的

app:fabCradleVerticalOffset: 宣告要用於附加 fab 的垂直偏移量. 預設情況下為0dp:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAttached="true"
        app:navigationContentDescription="這是一個底欄"
        app:navigationIcon="@mipmap/ic_more_vert_white_24dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        app:srcCompat="@mipmap/ic_local_dining_white_24dp" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
複製程式碼

左邊沒有找到返回按鈕，其實那裡是navigationIcon，請不要介意！對於處女座的深表歉意！這個也是可以設定什麼主標題副標題什麼的，但就是設定menu的時候和以前不太一樣了，以前設定menu實在onCreateOptionsMenu(Menu menu)中設定的，但是現在直接

    BottomAppBar bottomAppBar = findViewById(R.id.bar);
    bottomAppBar.replaceMenu(R.menu.test_menu);
複製程式碼

這麼設定就可以了！但是我真的沒有找到相應的監聽，我把它直至設定到menu也是不好使，監聽怎麼也出不來，不知道為什麼，不知道是我的開啟方式不對還是就是有這個問題，怎麼也回去不到相應的點選事件，其實在右邊出現個menu選單真的很難看，不知道是不是因為這個才沒有監聽的！請原諒我的無知…
感覺國內使用這個控制元件的事件還要等上一段時間吧！反正我在28的alpha1是沒有找到上面說的這些控制元件。估計等到時候會有一些優化的吧！就是讓大家嚐個鮮！至於一些細節等到能用的時候我們在好好探討！！！

好吧今天就到這裡吧！有點困了。。。睡覺去了！！！

差點忘了本文程式碼的地址

MaterialDesign系列文章（八）TabLayout的使用
2018-05-13
TabLayout
MaterialDesign系列文章（七）AppbarLayout的使用
2019-02-26
APP
MaterialDesign系列文章（十）TextInputLayout和TextInputEdittext
2018-05-15
MaterialDesign系列文章（九）CardView的使用及適配
2018-05-14
View
MaterialDesign系列文章（三）過渡動畫的實現
2018-05-03
動畫
python 系列文章彙總(持續更新…）
2018-11-26
Python
MaterialDesign系列文章（十二）ConstraintLayout實現的動畫效果
2018-05-22
AI動畫
我的2017年文章彙總——機器學習篇
2019-02-27
機器學習
go大會資源彙總
2016-10-22
Go
我的2017年文章彙總——JDK原始碼篇
2019-02-26
JDK原始碼
我的2017年文章彙總——Java併發篇
2018-01-16
Java
我的2017年文章彙總——深度學習篇
2017-12-23
深度學習
CloudNotes雲端個人筆記系統系列文章彙總
2015-02-15
Cloud筆記
2017上半年技術文章集合【Android】—184篇文章分類彙總
2017-09-10
Android
MaterialDesign系列文章（二）NavigationView和DrawerLayout實現側滑功能
2018-04-24
NavigationView
java執行緒文章彙總
2016-08-01
Java執行緒
AngularJS 優秀文章彙總
2014-08-26
AngularJS
我的2017年文章彙總——自然語言處理篇
2019-02-19
自然語言處理
演算法與資料結構解析-- 系列文章彙總篇
2020-09-24
演算法資料結構
個人系列文章集合，歡迎收藏分享
2020-01-11
雲原生閘道器~文章彙總
2024-11-01
全志TinyVision晶片文章彙總
2024-08-19
晶片
Kendo UI常用示例彙總（二十一）
2017-09-22
UI
國內外軟體測試大會彙總
2018-03-15
【Java集合系列】---總體框架
2016-12-07
Java框架
Java集合系列-總體框架
2015-06-15
Java框架
Android 系列教程彙總
2018-03-05
Android
深入淺出搜尋系列文章彙集
2016-10-12
Python開發系列課程彙總 - 課程大綱
2019-03-25
Python
Mysql系列第五講 DML操作彙總，確定你都會？
2020-09-28
MySql
Flutter 系列文章：Flutter Drawer 控制元件介紹
2019-09-17
Flutter控制元件
Flutter 系列文章：Flutter Text 控制元件介紹
2019-03-19
Flutter控制元件
Flutter 系列文章：Flutter Image 控制元件介紹
2019-03-19
Flutter控制元件
Flutter 系列文章：Flutter Scaffold 控制元件介紹
2019-03-19
Flutter控制元件
Flutter系列文章：Flutter RaisedButton控制元件介紹
2019-03-19
FlutterAI控制元件
Flutter 系列文章：Flutter Row控制元件介紹
2019-03-19
Flutter控制元件
Flutter 系列文章：Flutter Column 控制元件介紹
2019-03-19
Flutter控制元件
Google I/O 大會上的 Android Things 亮點彙總
2018-06-13
GoAndroid