1、概述
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 版本稳定之前还有一段时间才能实现. 按照惯例, 我很乐意听到您对这些新组件的想法或评论!
本篇转自：
作者：tonnyl
链接：https://tonnyl.github.io/2018/04/22/Translation-Exploring-the-v28-Android-Design-Support-Library-Additions/