探索 Android Design Support Library v28 新增內容

[譯] 探索 Android Design Support Library v28 新增內容

Android Support Library v28 版本最近被宣佈推出 -- 在當前的 alpha 版本中, 咱們又有了一系列使人興奮的新組件. 在這篇文章中, 我想要看看以 Material 視圖組件形式添加進入 Support Library 的新增部分.

__

Material Button

Material Button 是一個小部件, 可用於在你的應用程序的用戶界面中顯示材質樣式的按鈕. 這個類從你可能已經使用的 AppCompatButton 類繼承而來. 它們之間有什麼不一樣呢? 這個按鈕開箱即用, 它被設計成具備物質本質外觀和質感, 而無需使用樣式標誌定義. 咱們按照原樣使用 MaterialButton 類, 而且在咱們的視圖中, 它將具備咱們所追求的材質外觀和質感 -- 將其視爲一個提供方便的類.

咱們能夠像這樣將這個按鈕添加進佈局文件中:

<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" />

默認狀況下, 此類將使用主題的 accent colour 填充按鈕的背景顏色, 同時使用白色做爲按鈕的文字顏色. 若是該按鈕未被填充, 則主題的 accent colour 將做爲按鈕的文本顏色, 透明背景色.

若是咱們但願本身添加一些更高級的樣式, 那麼咱們能夠經過使用 MaterialButton 樣式中的一組屬性來完成此操做.

• app:icon: 用於定義在按鈕開始時顯示的 drawable
  
• app:iconTint: 用於給指定了 app:icon 屬性的圖標着色
• app:iconTintMode: 定義了圖標的着色模式
  
• app:iconPadding: 用於給指定了 app:icon 屬性的圖標產生內邊距
  
• app:additionalPaddingLeftForIcon: 用於給指定了 app:icon 屬性的圖標產生左內邊距
  
• app:additionalPaddingRightForIcon: 用於給指定了 app:icon 屬性的圖標產生右內邊距
  
• app:rippleColor: 使用此顏色定義按鈕的水波紋效果的顏色
• app:backgroundTint: 用於給按鈕的背景着色.若是你想要改變按鈕的背景顏色, 使用這個屬性而不是 background 以免破壞按鈕的樣式
• app:backgroundTintMode: 用於定義背景色的着色樣式
  
• app:strokeColor: 用於按鈕邊框的顏色
• app:strokeWidth: 用於按鈕邊框的寬度
  
• app:cornerRadius: 用於定義按鈕圓角的半徑
  

Chip

Chip 組件容許咱們在佈局中展現一個紙片組件. 其本質上一些文字被賦予一個圓形背景 -- 這樣作的目的是向用戶顯示某種形式的文本集合, 可能被選擇也可能不被選擇. 例如, Chip 可用於根據應用程序中的當前上下文向用戶顯示可選建議的列表.

咱們能夠像這樣在佈局中添加一個 Chip , 使用 app:chipText 屬性設置 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" />

Chip 還有其餘的屬性集合用於進一步的定義樣式:

• app:checkable: 用於聲明 Chip 是否能被切換爲選中或未選中. 若是禁用, 則 檢查行爲與 Button 相同
• app:chipIcon: 用於在 Chip 中顯示一個圖標
  
• app:closeIcon: 用於在 Chip 中顯示一個關閉按鈕
  

咱們也能夠爲 Chip 實例添加監聽器, 用於傾聽來自用戶的交互. 若是咱們的 Chip 是可檢查的, 那麼當這個檢查狀態發生改變時, 咱們可能會但願聽到. 咱們能夠使用 setOnCheckedChangeListener 設置監聽器:

some_chip.setOnCheckedChangeListener { button, checked ->  }

這一樣適用於當咱們想要在使用時關閉與關閉圖標(CloseIcon)的交互. 爲此, 咱們能夠利用 setOnCloseIconClickListener 函數註冊關閉交互事件:

some_chip.setOnCloseIconClickListener {  }

Chip Group

若是咱們向用戶展現一系列 Chip , 咱們但願確保它們在咱們的視圖中能正確分組. 爲此, 咱們能夠使用 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>

默認狀況下, 你的 Chip 視圖看起來有些擁擠. 若是的確如此, 你能夠使用以下的 ChipGroup 自己的屬性爲子 Chip 視圖添加一些間距:

• app:chipSpacing: 在橫縱軸方向均添加間距
• app:chipSpacingHorizontal: 僅在橫軸(水平軸)方向添加間距
• app:chipSpacingVertical: 僅在縱軸(垂直軸)方向添加間距

咱們也能夠聲明子 Chip 視圖在 ChipGroup 容器中單行顯示. 使用 app:singleLine 屬性:

這樣作時, 你須要將 ChipGroup 封裝在滾動視圖(如 HorizontalScrollView )中, 以便用戶能夠滑動正在顯示的 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

在咱們的應用程序中, 咱們可能在某些時候使用了 CardView 組件. Support Library 如今包含了一個名爲 Material Card View 的組件, 它爲咱們提供了開箱即用的 Material 風格的 CardView 實現.

MaterialCardView 能夠經過相似於下面的方式添加到你的佈局中:

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

你能夠使用其中的兩個屬性進一步設置卡片視圖的樣式:

• app:strokeColor: 用於給定的邊框的顏色, 若是要展現邊框的話, 此屬性必須設置
• app:strokeWidth: 要應用於視圖邊框的寬度
  

除了這兩個屬性以外, 還能夠使用最初可用的屬性(如 app：cardBackgroundColor 等)設置卡片視圖的樣式.

Bottom App Bar

底部應用欄是一個新的組件, 它容許咱們在佈局的底部顯示一個相似工具欄的組件. 這使咱們可以以比標準工具欄更容易交互的方式向用戶顯示組件.

BottomAppBar 能夠經過相似於下面的方式添加到你的佈局中:

<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">

彷佛底部應用欄 必須 有一個分配給它的菜單才能顯示在屏幕上. 這能夠經過編碼方式完成,以下所示:

bottom_app_bar.replaceMenu(R.menu.main)

當涉及到定義底部應用欄的樣式時, 能夠使用幾個屬性來完成此操做.

• app:fabAttached: FAB (Floating Action Button) 是否已經附加到底部應用欄. 你能夠使用底部應用欄的 ID, 在你但願附加 FAB 組件上使用 app:layout_anchor 來附加一個 FAB. 若是附加了 FAB, 它將插入底部應用欄, 不然 FAB 將保持在底部應用欄上方.
  
• app:fabAlignmentMode: 聲明已附加到底部應用欄的FAB的位置. 能夠爲 end:
  

  或者是 center:

• app:fabCradleVerticalOffset: 聲明要用於附加 FAB 的垂直偏移量. 默認狀況下爲0dp:
  
  可是設置值會容許 FAB 垂直向上移動.
  
• app:backgroundTint: 用於爲視圖的背景上色. 若是你想要設置視圖的背景顏色, 那麼應該用 android:background 屬性. 這樣會確保視圖樣式的穩定性.

結論

在我看來, 這些是對 Support Library 的一些簡潔補充 -- 我期待着可以當即使用材質主題組件. 我也很高興可以找到一個能夠使用底部應用欄的用例, 但我確信在 Support Library 版本穩定以前還有一段時間才能實現. 按照慣例, 我很樂意聽到您對這些新組件的想法或評論!

原文地址: https://medium.com/exploring-...

原文做者爲 Joe Birch, 他是 GDE (Google Developer Expert) for Android 成員, 他的 Twitter 主頁: https://twitter.com/hitherejoe

本文由 TonnyL 翻譯, 文章發表在 https://tonnyl.github.io/2018... . 若是你發現了有翻譯的不合適的地方, 歡迎指出. 轉載文章請註明原文, 本文地址以及做者.

你能夠經過如下方式聯繫我:

GitHub: https://github.com/TonnyL

微博: https://weibo.com/5313690193

知乎: https://www.zhihu.com/people/...

Instagram: https://www.instagram.com/ton...

如下爲原文:

Exploring the v28 Android Design Support Library Additions

Version 28 of the Android support library was recently announced — within the current alpha version there is a collection of exciting new components that we now have access to. In this article, I want to take a look at the additions which have been made to the Support library in the form of Material view components.

---

Material Button

The Material Button is a widget that can be used to display a material style button within your applications user interface. This class extends from the AppCompatButton class which you’re likely already using in you projects, but what makes this any different? Out of the box this button will be styled with the look-and-feel of a material nature without the need to customise it yourself using the style flag. We can use the MaterialButton class as it is and our within our view it will already have the material look and feel which we are after — see it as a convenience class.

We can add this button to our layout file like so:

<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" />

By default this class will use the accent colour of your theme for the buttons filled background colour along with white for the buttons text colour. If the button is not filled, then the accent colour of your theme will be used for the button text colour instead along with a transparent background.

If we wish to add some further styling to this ourselves then we can do so by using a collection of attributes from the MaterialButton style.

• app:icon — Used to define a drawable to be displayed at the start of the button
  
• app:iconTint: Used to tint the icon in use from the app:icon attribute
• app:iconTintMode: Defines the the mode to be used for the icon tint
  
• app:iconPadding: Padding to be applied to the icon in use from the app:icon attribute
  
• app:additionalPaddingLeftForIcon: Defines the padding to be applied to the left of the icon in use from the app:icon attribute
  
• app:additionalPaddingRightForIcon: Defines the padding to be applied to the right of the icon in use from the app:icon attribute
  
• app:rippleColor: The colour to be used for the button ripple effect, this colour will be used
• app:backgroundTint:  Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background to avoid breaking the button style
• app:backgroundTintMode: Used to define the mode to be used for the background tint
  
• app:strokeColor: The color to be used for the button stroke
• app:strokeWidth: The width to be used for the button stroke
  
• app:cornerRadius: Used to define the radius used for the corners of the button
  

Chip

The chip component allows us to display a chip view within our layout. This is essentially some text that is given a rounded background — the purpose of these is to display some form of textual collection to the user that may or may not be selectable. For example, these could be used to show a list of selectable suggestions to the user based on the current context within your app.

We can add a Chip to our layout like so, using the app:chipText attribute to set the text to be displayed on the 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" />

There is also a collection of other attributes which can be used to further style the chip:

• app:checkable:  Used to declare whether the chip can be toggled as selected / not selected. If disabled, the check behaves in the same way as a button
• app:chipIcon: Used to display an icon within the chip
  
• app:closeIcon: Used to display a close icon within the chip
  

We can also set some listeners on our chip instances, these can be useful for listening out for interactions from our users. If our chip is checkable, it is likely we’ll want to listen out for when this check state has been changed. We can do so using the setOnCheckedChangeListener listener:

some_chip.setOnCheckedChangeListener { button, checked ->  }

The same applies for when we want to listen out for interaction with the close icon when it is in use. For this we can utilise the setOnCloseIconClickListener function to register for close interaction events:

some_chip.setOnCloseIconClickListener {  }

Chip Group

If we’re displaying a collection of chips to our users, we want to ensure that they are correctly grouped together within our view. For this we can make use of the ChipGroup view component:

If we wish to use the ChipGroup we just need to wrap our Chip views in a parent ChipGroup component:

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

By default your Chip views may appear a little cramped together. If so, you can add some spacing to the child views by using the following attributes on the chip group itself:

• app:chipSpacing: Adds spacing to both the horizontal and vertical axis
• app:chipSpacingHorizontal: Adds spacing to the horizontal axis
• app:chipSpacingVertical: Adds spacing to the vertical axis

We can also declare our child Chip views to be displayed within a single line inside of our ChipGroup container. Using the app:singleLine attribute:

When doing so, you’ll need to wrap the ChipGroup in a scrolling view such as the HorizontalScrollView so that your users can scroll through the displayed Chips:

<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

It’s likely within our apps that we’ve used the CardView component at some point. The support library now contains a component called the Material Card View, which provides us with a material styled cardview implementation out of the box.

The cardview can be added to your layout like so:

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

You can further style the cardview by using two of the attributes that come with it:

• app:strokeColor: The colour to be used for the given stroke, this must be set in order to display a stroke
• app:strokeWidth: The width to be applied to the stroke of the view
  

As well as these two attributes, you can still style the cardview using the originally available attributes such as app:cardBackgroundColor etc.

Bottom App Bar

The bottom app bar is a new component that allows us to show a toolbar-like component at the bottom of our layout. This allows us to display components to our user in a manner that makes them easier to interact with than a standard toolbar might.

You can add the BottomAppBar to your layout file like so:

<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">

It appears as though the bottom app bar must have a menu assigned to it in-order for it to be displayed on screen. This can be done programatically like so:

bottom_app_bar.replaceMenu(R.menu.main)

When it comes to styling the bottom app bar there are several attributes you can make use of to do so.

• app:fabAttached: States whether or not a FAB has been attached to the bottom app bar. You can attach a fab by using app:layout_anchor on the FAB component which you wish to attach, using the ID of the bottom app bar. If a FAB is attached it will be inset into the bottom app bar, otherwise the FAB will remain above the bottom app bar.
  
• app:fabAlignmentMode: Declares the position of the FAB which has been attached to the bottom app bar. This can be either end:
  

  or center:

• app:fabCradleVerticalOffset:  Declares the vertical offset to be used for the attached fab. By default this is 0dp:
  
  However, setting a dp value will allow the FAB to be shifting upwards vertically:
  
• app:backgroundTint: Used to apply a tint to the background of the view. If you wish to set the background color of the view then this should be used over the android:background attribute. Doing so will ensure the theming of the view remains stable.

Conclusion

In my opinion these are some neat additions to the support library — I’m looking forward to being able to use material themed components right out of the box. I’m also excited to find a use case for where the bottom app bar may be used, but I am sure there is some time before the support library version is stable before doing so. As per usual, I’d love to hear your thoughts or comments on these new components!