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的坑

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

問題1

這個問題出現的原因主要是你在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 圓角的半徑

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

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

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

    <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>
複製程式碼

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

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

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

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

很醜有沒有。其實你可以按照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);
        }
複製程式碼

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

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

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

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

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

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

4.Material Card View的使用

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

  • app:strokeColor 描邊的顏色
  • app:strokeWidth 描邊的寬度
MaterialDesign系列文章(十一)Google2018年大會新出的控制元件彙總集合

剩下的和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 效果是這樣的
MaterialDesign系列文章(十一)Google2018年大會新出的控制元件彙總集合

– center 預設是中間的

MaterialDesign系列文章(十一)Google2018年大會新出的控制元件彙總集合
  • 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是沒有找到上面說的這些控制元件。估計等到時候會有一些優化的吧!就是讓大家嚐個鮮!至於一些細節等到能用的時候我們在好好探討!!!

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

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

相關文章