作者：tonnyl

链接：

https://tonnyl.github.io/2018/04/22/Translation-Exploring-the-v28-Android-Design-Support-Library-Additions/

本文由作者授权发布。

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 版本稳定之前还有一段时间才能实现. 按照惯例, 我很乐意听到您对这些新组件的想法或评论!