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

時間  2019-12-05
標籤 materialdesign 系列 文章 十一 google2018 google 大會 控件 彙總 集合 欄目 Google 简体版
原文   原文鏈接

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

老詹鎮樓！！！

你們好，我是筆墨Android，又要開車了！android

關於這篇文章我醞釀了好久，第一是沒有辦法集成Android P，另外一個就是沒有相應的類庫，最近在掘金閒逛的時候，忽然發現GitHub上面有人使用新控件了，我就十分欣喜！爲何呢？由於這個就說明我就能用了，其實我只是對其中的流式標籤比較感興趣，總看有人說怎麼用，可是真的沒有在代碼中用過，只是停留在看的層面，這個我怎麼能忍呢？因此今天分享一下我使用的心得，哈哈！git

本文知識點：

  • 怎麼集成Android P和導入新版的MaterialDesign的新控件;
  • Material Button的使用;
  • Chip和Chip Group的使用;
  • Material Card View的使用;
  • Bottom App Bar的使用;

1. 怎麼集成Android P和導入新版的MaterialDesign的新控件;

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

惡夢的開始

變動Android P的坑

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

問題1

這個問題出現的緣由主要是你在defaultConfig中設置了targetSdkVersion 'android-P'這個東西，只要你刪除了這句話就能夠了！修改後的配置就變成了這個樣子滴！這裏不是項目的build.gradle哦！切記切記。。。app

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所的，之後即便你添加這個也沒有用了！！！ide

集成新版sdk的坑

由於新版的SDK應該尚未新的內容，沒有關於新控件的一些API，因此這裏我是從gitHub找到的相應API，應該都是同樣的！而後就開始集成，裏面有一個關於怎麼配置的網頁 裏面說了怎麼配置這個內容;你就按照裏面的配置進行配置就能夠了。當你Sync Now你會發現沒有問題。。。而後你就一心歡喜的準備去運行了，然而第一個坑出現了！post

坑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'刪除就行了。gradle

坑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是沒有找到上面說的這些控件。估計等到時候會有一些優化的吧！就是讓你們嚐個鮮！至於一些細節等到能用的時候咱們在好好探討！！！

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

差點忘了本文代碼的地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程