探索 Android Design Support Library v28 新增内容

作者:TonnyL 链接:https://www.jianshu.com/p/e9357355ccf7 著作权归作者所有,欢迎投稿

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

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2018-05-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

前端面试三 新的一周

哈哈哈 1. 对WEB标准以及W3C的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下...

2290
来自专栏程序员宝库

手机端页面在项目中遇到的一些问题及解决办法

首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是:

1383
来自专栏IMWeb前端团队

[小技巧]巧妙使用flex, letter-spacing实现过渡动画

本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 巧妙利用flex, 实现下面的效果~ 无需js来获取clien...

1727
来自专栏GIS讲堂

基于Arcgis for Js的web GIS数据在线采集简介

在前一篇博文“Arcgis for js之WKT和geometry转换”中实现了wkt和geometry之间的相互转化,博文原文地址为:http://blog....

572
来自专栏前端菜鸟变老鸟

手机H5页面(文字滚动、适配各种屏幕、jQuery ajax包含cookie)

1132
来自专栏大数据钻研

HTML+CSS 面试题整理(一)

1.web标准: (1)结构标准:其语言主要包括XHTML(实现HTML向XML的过渡。)和XML(用于弥补HTML的不足) (2)表现标准:其语言主要包括C...

2808
来自专栏小李刀刀的专栏

[译]CSS边框实现“无图化”设计

原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes...

3488
来自专栏小红豆的数据分析

小蛇学python(7)tkinter库的基本使用

最近做一个小项目,又将tkinter库重新温习了一遍。tk其实并不如很多网友说的那样一文不值,它确实不如QT,Wxpython功能强大,但是这也意味着它比较简单...

861
来自专栏卡少编程之旅

css黑魔法简略版

26211
来自专栏无所事事者爱嘲笑

经常遇到的浏览器的兼容性有哪些?

1415

扫码关注云+社区