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

函數注冊關閉互動事件:

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-android/exploring-the-v28-android-design-support-library-2c96c6031ae8

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

本文由 TonnyL 翻譯, 文章發表在 https://tonnyl.github.io/2018/04/22/Translation-Exploring-the-v28-Android-Design-Support-Library-Additions/ . 如果你發現了有翻譯的不合适的地方, 歡迎指出. 轉載文章請注明原文, 本文位址以及作者.

你可以通過以下方式聯系我:

GitHub: https://github.com/TonnyL

微網誌: https://weibo.com/5313690193

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

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

以下為原文:

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:

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!