原文：Exploring the v28 Android Design Support Library Additions

Android支持庫(kù)的第28版最近發(fā)布了——在當(dāng)前的alpha版本中，有一系列令人興奮的新組件率挣，我們現(xiàn)在可以訪問(wèn)它。在本文中辨绊，我想了解一下以Material view組件的形式對(duì)支撐庫(kù)進(jìn)行的添加茎用。

Material Button

Material按鈕是一個(gè)小部件缚柳，可用于在應(yīng)用程序用戶界面中顯示Material style按鈕旨别。這個(gè)類(lèi)從appapp button類(lèi)擴(kuò)展英染，您可能已經(jīng)在您的項(xiàng)目中使用了這個(gè)類(lèi)揽惹，但是這有什么不同呢？這個(gè)按鈕將會(huì)被設(shè)計(jì)成一種材質(zhì)的外觀税迷，而不需要使用樣式標(biāo)志來(lái)定制它永丝。我們可以使用材料按鈕類(lèi)，在我們的視圖中箭养，它已經(jīng)有了我們所追求的材料外觀和感覺(jué)——把它看作是一個(gè)方便的類(lèi)。

我們可以把這個(gè)按鈕添加到我們的布局文件中:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

默認(rèn)情況下哥牍，這個(gè)類(lèi)會(huì)使用你的主題的重音顏色來(lái)填充背景色毕泌，以及白色的按鈕文本顏色。如果按鈕沒(méi)有被填滿嗅辣，那么你的主題的重音顏色將被用于按鈕文本顏色撼泛，以及一個(gè)透明的背景。
如果我們希望自己添加一些進(jìn)一步的樣式澡谭，那么我們可以通過(guò)使用來(lái)自于材料按鈕樣式的屬性集合來(lái)做到這一點(diǎn)愿题。

• app:icon--用于定義在按鈕開(kāi)始時(shí)顯示的繪圖

  
  
• app:iconTint--?用于從app：icon屬性著色正在使用的圖標(biāo)

• app:iconTintMode--定義用于圖標(biāo)色調(diào)的模式

  
  

• app:iconPadding--在應(yīng)用中使用的圖標(biāo)的填充：圖標(biāo)屬性

  
  

• app:additionalPaddingLeftForIcon--定義在應(yīng)用程序中使用的圖標(biāo)左邊的填充：圖標(biāo)屬性

  
  

• app:additionalPaddingRightForIcon--定義在應(yīng)用程序中使用的圖標(biāo)右邊的填充物：圖標(biāo)屬性

  
  
• app:rippleColor--用于按鈕波紋效果的顏色，這種顏色將被使用
• app:backgroundTint--用于在按鈕的背景上涂上一層顏色蛙奖。如果你想要改變按鈕的背景顏色潘酗，使用這個(gè)屬性而不是背景來(lái)避免打破按鈕的樣式

• app:backgroundTintMode--用于定義用于背景色的模式

  
  
• app:strokeColor--按鈕描邊的顏色

• app:strokeWidth--按鈕行程的寬度

  
  
  
  

  app:cornerRadius--用于定義按鈕的圓角的半徑

Chip

chip組件允許我們?cè)诓季种酗@示一個(gè)芯片視圖。這本質(zhì)上是一個(gè)具有圓形背景的文本——這些文本的目的是向用戶顯示某種形式的文本集合雁仲，這些文本可能是可選的仔夺，也可能是不可選擇的。例如攒砖，可以根據(jù)應(yīng)用程序中的當(dāng)前上下文向用戶顯示一組可選擇的建議列表缸兔。

我們可以像這樣在我們的布局中添加一個(gè)chip日裙，使用這個(gè)app：chipText屬性來(lái)設(shè)置在chip上顯示的文本：

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

還有一組其他屬性可以用來(lái)進(jìn)一步對(duì)chip進(jìn)行樣式化：

• app:checkable--用于聲明chip是否可以按選定的/未被選擇的方式進(jìn)行。如果禁用惰蜜，檢查的行為方式與按鈕相同
• app:chipIcon--用于在chip中顯示一個(gè)圖標(biāo)

• app:closeIcon?--用于在chip內(nèi)顯示一個(gè)關(guān)閉圖標(biāo)

  
  

我們也可以在我們的chip實(shí)例上設(shè)置一些偵聽(tīng)器昂拂，這對(duì)于偵聽(tīng)來(lái)自我們的用戶的交互是很有用的。如果我們的chip是可檢查的抛猖，那么我們很可能會(huì)想要監(jiān)聽(tīng)這個(gè)檢查狀態(tài)被更改的時(shí)間政钟。我們可以使用setonchecchangelistener監(jiān)聽(tīng)器：

some_chip.setOnCheckedChangeListener { button, checked ->  }

同樣的道理也適用于當(dāng)我們想要在使用的時(shí)候監(jiān)聽(tīng)與關(guān)閉圖標(biāo)的交互。為此樟结，我們可以利用setOnCloseIconClickListener函數(shù)來(lái)注冊(cè)密切的交互事件：

some_chip.setOnCheckedChangeListener { button, checked ->  }

Chip Group

如果我們向用戶顯示一組chip养交，我們希望確保它們?cè)谖覀兊囊晥D中正確地組合在一起。為此瓢宦，我們可以使用ChipGroup視圖組件：

如果我們想要使用ChipGroup碎连，我們只需要將chip視圖封裝在ChipGroup組件中：

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />

    // more chips...

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

默認(rèn)情況下，你的chip視圖可能會(huì)顯得有點(diǎn)擁擠驮履。如果是這樣鱼辙，您可以通過(guò)在ChipGroup本身中使用以下屬性為子視圖添加一些間隔：

• app:chipSpacing?--在水平和垂直軸上增加間距
• app:chipSpacingHorizontal?--在水平軸上增加間距

• app:chipSpacingVertical--在縱軸上增加間距

  
  
  
  

  我們還可以聲明我們的子Chip視圖將顯示在我們的ChipGroup容器內(nèi)的單個(gè)行內(nèi)。使用app:singleLine屬性:

  
  

在這樣做的時(shí)候玫镐，您需要將ChipGroup包裝成一個(gè)滾動(dòng)視圖倒戏，比如水平滾動(dòng)視圖，這樣用戶就可以滾動(dòng)顯示的chip：

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleLine="true">

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Some chip" />

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

</HorizontalScrollView>

Material Card View

在我們的應(yīng)用程序中恐似，我們可能在某些時(shí)候使用了CardView組件杜跷。支持庫(kù)現(xiàn)在包含一個(gè)名為Material Card View的組件，它為我們提供了一個(gè)開(kāi)箱即用的實(shí)物樣式cardview實(shí)現(xiàn)矫夷。

cardview可以像這樣添加到你的布局中：

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">
    ... child views ...
</android.support.design.card.MaterialCardView>

您可以使用以下兩個(gè)屬性來(lái)進(jìn)一步對(duì)cardview進(jìn)行樣式化：

• app:strokeColor--在給定的筆觸中使用的顏色葛闷，必須設(shè)置為顯示筆觸
• app:strokeWidth--在視圖的邊框上應(yīng)用的寬度

除了這兩個(gè)屬性，您還可以使用原始可用的屬性双藕，如app:cardBackgroundColor等淑趾，來(lái)對(duì)cardview進(jìn)行樣式化。

Bottom App Bar

底部的應(yīng)用程序欄是一個(gè)新的組件忧陪，它允許我們?cè)诓季值牡撞匡@示一個(gè)類(lèi)似于工具欄的組件扣泊。這允許我們以一種比標(biāo)準(zhǔn)工具欄更容易交互的方式向我們的用戶顯示組件

您可以將下面的appbar添加到布局文件中：

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

看起來(lái)，底部的應(yīng)用程序欄必須有一個(gè)分配給它的菜單嘶摊，以便它能顯示在屏幕上延蟹。這可以像這樣進(jìn)行編程：

bottom_app_bar.replaceMenu(R.menu.main)

當(dāng)涉及到對(duì)底部應(yīng)用程序條進(jìn)行樣式化時(shí)，你可以使用幾個(gè)屬性來(lái)實(shí)現(xiàn)這一點(diǎn)更卒。

• app:fabAttached--無(wú)論FAB是否已附加到最底層的應(yīng)用程序欄等孵。
  您可以使用app：layout_anchor在您希望附加的FAB組件上附加一個(gè)晶圓廠，使用底部應(yīng)用欄的ID蹂空。
  如果連接了FAB俯萌，它將插入底部應(yīng)用程序欄果录，否則FAB將保持在底部應(yīng)用程序欄上方

• app:fabAlignmentMode--聲明了FAB的位置，它已經(jīng)連接到底部的應(yīng)用程序欄咐熙。這可以是兩頭

  
  
  
  

  或者在中心：

  
  

• app:fabCradleVerticalOffset?--聲明所使用的芯片的垂直偏移量弱恒。默認(rèn)情況下，這是0dp：

  
  

然而棋恼，設(shè)置一個(gè)dp值將允許該芯片垂直向上移動(dòng)：

• app:backgroundTint--用于在視圖的背景中應(yīng)用一種色調(diào)返弹。如果您希望設(shè)置視圖的背景顏色，那么應(yīng)該在android：后臺(tái)屬性上使用爪飘。這樣做將確保視圖的主題保持穩(wěn)定义起。

總結(jié)

在我看來(lái)，這些是支持庫(kù)的一些簡(jiǎn)潔的補(bǔ)充——我期待著能夠直接使用材料主題的組件师崎。我也很高興能找到一個(gè)用例來(lái)說(shuō)明底部應(yīng)用程序欄的使用情況默终，但我確信在此之前，支持庫(kù)版本還需要一些時(shí)間犁罩。像往常一樣齐蔽，我很想聽(tīng)聽(tīng)你對(duì)這些新組件的想法或評(píng)論！