本文翻译自著名博客 Android Developers,原做者是 Ian Lake,点击此处可查看 原文 。html
Android 5.0 Lollipop 是迄今为止最重大的一次发布,很大程度上是由于 material design —— 这是一门新的设计语言,它刷新了整个 Android 的用户体验。可是对于开发者来讲,要设计出彻底符合 material design 哲学的应用,是一个很大的挑战。Android Design Support Library 对此提供了很好的支持,里面聚集了不少重要的 material design 控件,支持全部 Android 2.1 及后续版本。里面你能够看到 navigation drawer view、floating labels、floating action button、snackbar、tabs,以及一套将它们紧密结合在一块儿的动做与滚动框架。android
Navigation View(导航视图)
不管从应用标识、内容导航,仍是设计一致性来说,navigation drawer 都是首当其冲的焦点。如今,NavigationView 让导航栏变得更简单,它提供了 navigation drawer 须要的框架,以及经过资源文件来自定义更多菜单项的能力。app

你只须要将 NavigationView 做为 DrawerLayout 的内容视图来使用便可,例如:框架

这里你会注意到两个属性:app:heanderLaytout
用来控制 header 部分的布局;app:menu
指定了菜单资源。NavigationView 自动处理了状态栏的变化,保证能够在 API 21+ 的设备上正确运行。编辑器
最简单的 drawer 菜单就是一个容许选择的菜单项集合,例如:工具

选中的菜单会高亮显示,以提醒用户当前选择的是哪一个菜单项。布局
你也能够在菜单中使用 subheader 来实现独立的分组:动画

调用 setNavigationItemSelectedListener()
后,在菜单项被选中的时候,你会经过OnNavigationItemSelectedListener
获得回调。在处理回调时,你会知道是哪一个菜单项被点击,此时你能够处理选择事件,修改选中状态,加载新的内容,以及经过代码来关闭 drawer,或者其余任何你想执行的操做。google
文字输入时的悬浮标签
尽管 EditText 已经为 material design 作了一些改善,可是还不够,譬如它在咱们输入第一个字符的时候,就会自动隐藏掉提示标签。如今你该使用 TextInputLayout 了,它会在用户开始输入以后,自动将提示标签悬浮到 EditText 上方,这样用户就永远都能知道输入内容的上下文。url

另外,你也能够经过调用 setError()
方法,在 EditText 下方显示一个出错提示消息。多么贴心的设计,有没有?
Floating Action Button(浮动操做按钮)
Floating action button 是一个圆形按钮,表明当前页面最重要的交互动做。Design Library 里面的 FloatingActionButton 给了你一个简单一致的实现,它会默认使用你主题中 colorAccent
属性定义的色调。

在标准尺寸以外,它也支持 mini 尺寸。FloatActionButton 继承自 ImageView,因此你也可使用android:src
或者其余方法(如 setImageDrawable()
)来控制它的外观。
Snackbar
若是要提供一个轻量、快速的操做反馈方式,那就非 Snackbar 莫属了。Snackbar 在屏幕最下方展现,包含文字和一个可选的操做,它会在必定时间后自动消失,用户也能够经过滑动手势来提早消除它。
Snackbar 能够支持滑动手势,也能够响应点击动做,远比 Toast 强大,可是你会发现它的 API 很是眼熟:
Snackbar
.make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action, myOnClickListener)
.show(); // Don’t forget to show!
你会注意到 make
的第一个参数,Snackbar 会试图寻找合适的父视图,来确保它能显示在底部的正确位置。
Tabs(选项卡)
在应用内,经过 tab 在不一样视图间切换,这不是 material design 中的新概念。Tabs 通常用来做顶层导航,或者组织、展现应用内不一样分组的内容。以下图所示:

Design Library 的 TabLayout 控件实现了固定 tab(全部 tab 势均力敌,宽度固定)和滚动 tab(宽度根据标题长度自适应,能够水平滑动)两种形式,你能够用代码来添加 tab:
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
若是你使用 ViewPager 来水平分页,可直接在 PagerAdapter.getPageTitle()
中来建立 tab,最后经过 setupWithViewPager()
方法将它们绑定在一块儿。这能确保内容变化时 tab 和 ViewPager 会自动同步起来。
CoordinatorLayout、动画和滚屏
打造一个符合 material design 风格的应用,独特的视觉效果只是一方面,动做和手势也是很是重要的一部分。 Material design 里面包含了大量的手势,譬如点击的波纹效果和其余一些有用的转场动画。Design Library 介绍了 CoordinatorLayout 的布局方式,它提供了一个附加层,用来控制子视图间的点击事件,Design Library 里面不少控件都使用了这种布局。
CoordinatorLayout 和浮动操做按钮
FloatingActionButton 就是一个绝好的例子。当你将 FloatingActionButton 做为子元素加入 CoordinatorLayout,而后将 CoordinatorLayout 做为参数传给 Snackbar.make()
的时候,Snackbar 没有显示到 FloatingActionButton 上面。FloatingActionButton 利用了 CoordinatorLayout 提供的额外回调接口,在 Snackbar 展示的时候自动上移,消失的时候自动复位,全部这一切都不须要写任何代码。
CoordinatorLayout 还提供了一个 layout_anchor
的属性,连同 layout_anchorGravity
一块儿,能够用来放置与其余视图关联在一块儿的悬浮视图(如 FloatingActionButton)。
CoordinatorLayout 和 App Bar
CoordinatorLayout 的另外一个主要使用场景,则与 appbar(之前的 actionBar)和滚屏相关。你可能已经在布局里面使用过 Toolbar,它容许你简单修改外观、整合图标以和其他部分一致。Design Library 将全部这些东西放到了下一级:使用 AppBarLayout,让你的 Toolbar 和其余视图(如 TabLayout 提供的 tab 视图),能够响应 ScrollingViewBehavior 标记的同级视图的滚动事件。此时你能够这样来建立一个布局:

如今,随着用户滚动 RecyclerView, AppBarLayout 也会响应这些事件(经过使用子节点的 scroll flag 来控制它们如何滚入和滚出屏幕)。Flags 包括:
- scroll: 这个标志会被设置到全部但愿滚出屏幕的视图上,若是不设置这一标志,则视图会被一直保留在屏幕顶部。
- enterAlways: 这个标志会确保任何下滑滚屏都会触发视图的展示,等于开启了一种「快速返回」模式。
- enterAlwaysCollapsed: 若是设置了 minHeight 和这个标志,你的视图一般会折叠显示,只有当滚动视图已经到达了它的顶点之后才会打开到完整高度。
- exitUntilCollapsed: 这个标志会致使视图在退出以前,一直被锁定。
注意一点:全部设置了 scroll 标志的视图必须在未设该标志的视图以前进行声明,这样能够确保全部的滚动视图都从顶部退出,而固定元素都不受影响。
可伸缩的 Toolbars
直接将 Toolbar 加到 AppBarLayout 中,你就能够设置 enterAlwaysCollapsed
/exitUntilCollapsed
等滚动标志,可是不一样元素如何响应折叠动做,你无法更深刻地控制。要达到这一点,你须要使用 CollapsingToolbarLayout:

经过使用 app:layout_collapseMode="pin"
来确保 Toolbar 会一直被保留在屏幕顶端。更进一步,当你组合使用 CollapsingToolbarLayout 和 Toolbar,在视图彻底展示的时候,标题会自动放大,当视图折叠的时候,标题则会过渡到默认字号。注意这时候你须要调用 CollapsingToolbarLayout 的 setTitle(),而不是 Toolbar 的相应方法。
除了将视图固定在屏幕以外,你还能够设置 app:layout_collapseMode="parallax"
(额外也须要增长 app:layout_collapseParallaxMultiplier="0.7"
这样的属性来设置视差乘数)来达到视差滚动的效果。这种用法搭配 app:contentScrim="?attr/colorPrimary"
属性效果很是好,例以下面这样:
CoordinatorLayout 和自定义视图
还有一件重要的事情就是,CoordinatorLayout 并非天生就理解 FloatingActionButton 或者 AppBarLayout 如何工做,它只是提供了一些 Coordinator.Behavior 的附加 API,容许子控件来更好地控制点击事件和手势。
视图也可使用 CoordinatorLayout.DefaultBehavior(YourView.Behavior.class)
来定义一个默认的行为,或者在 layout 文件中设置app:layout_behavior="com.example.app.YourView$Behavior"
来达到一样的效果。
Design Library 框架容许任何视图与 CoordinatorLayout 组合使用。
现已发布
Design Library 如今已经公开发布了,请确认在 SDK manager 中升级 Android Support Repository。对于 Gradle 项目来说,你能够直接加入对 Design Library 的依赖:
compile 'com.android.support:design:22.2.0'
注意 :Design Library 依赖于 Support v4 和 AppCompat Support 库,它们会自动被加进编译依赖里来。而且,这些新的 widget 在 Android Studio Layout 编辑器中也是可用的(在 CustomView 中找到他们)。
对于构建一个具备一流外观和交互的现代应用,Design Library、AppCompat 和全部 Android Support Library 都是很是重要的工具,你们快来动手试试吧。