作者简介 原创微信公众号郭霖 WeChat ID: guolin_blog
本篇来自Single Shu888的投稿,展示了Material Design常用控件的用法,进阶部分基本都推荐了相关博文。文章篇幅不短,感兴趣的话要花点时间阅读了。
Single Shu888的博客地址:
http://blog.csdn.net/sw5131899
前言
Material Design 设计风格非常受欢迎,那么支持其效果的 Design Support Library(Android 2.1 API level 7及其以上)库又有哪些控件呢。主要包括SnackBar、Navigation View、FloatActionbutton、CoordinatorLayout、CollapsingToolBarLayout等。我在Git上看见一个非常炫的效果:
把该项目的Git附上,觉得有用的自行下载看源码:
https://github.com/frogermcs/InstaMaterial
现在来一一介绍Design系列控件。
SnackBar
SnackBar 是带有动画效果的快速提示栏,它显示在屏幕底部,是用来代替 Toast 的一个全新控件,它基本上继承了 Toast 的属性和方法,用户可以点击按钮执行对应的操作,Snackbar 支持滑动消失,如果没设任何操作,那么到时间自动消失。
SnackBar 的构造:
SnackBar 的常用方法:
Snackbar 需要一个控件容器view用来容纳,官方推荐使用 CoordinatorLayout 来确保 Snackbar 和其他组件的交互,比如滑动取消 Snackbar、Snackbar 出现时 FloatingActionButton 上移。举一个简单运用的例子:
这些运用都很简单,就不更多的嚼舌根了。有个花式使用SnackBar的连接,感兴趣的可以去看看:
//www.greatytc.com/p/cd1e80e64311
TextInputLayout
TextInputLayout 主要作用是作为 EditText 的容器,从而为 EditText 默认生成一个浮动的 label,当用户点击了 EditText 之后,EditText 中设置的 Hint 字符串会自动移到 EditText 的左上角,使用非常简单。这有个例子写的不错:
http://www.jcodecraeer.com/a/basictutorial/2015/0821/3338.html
getEditText()得到控件中包含的 EditText 控件
setError(CharSequence error)设置错误信息并显示在 EditText 下方 应用场景:比如用户输错了密码或者用户名等
setHint(CharSequence hint)设置提示信息
setErrorEnabled(boolean enabled)设置 setError(CharSequence error) 这个函数是否可用 记住哦:这个函数一定要在 setError(CharSequence error) 这个函数之后执行哦!
部分示例xml
部分示例代码
效果图
TabLayout
TabLayout 控件用于应用中轻松的添加Tab分组功能,总共有两种类型可选。
1. 固定的Tabs:对应的xml配置中的app:tabMode="fixed"
2. 可滑动的Tabs:对应xml配置中的app:tabMode="scrollable"
TabLayout,它就可以完成 TabPageIndicator 的效果,而且还是官方的,最好的是它可以兼容到2.2以上版本,包括2.2。接下来就简单使用一下。
xml关键部分
适配器
用过 ViewPager 套 Fragment 的猿友都知道,就不啰嗦了。getPageTitle 是获取需要显示的 tab标题。新建一个 空的fragmentBlankFragment。
那么准备工作差不多了,开始进入主题,基本的介绍都加了注释:
tabLayout.setupWithViewPager(viewPager,true); 这句代码是关联 viewpager 和 tabLayout。后面的true是是否自动刷新 fragment 的布尔值,看源码就知道了。
我们调用的第一个函数,实质是调用的第二个函数。这里需要注意的是需要先调用 viewpager 的 setAdaper 之后才能把 tabLayout 和 viewpager 关联起来。给个效果图:
NavigationView
以前做侧边栏的有 SlideMenu 三方库,这里不详细介绍了,想要了解的给个链接:
http://blog.csdn.net/luck_apple/article/details/9207811
现在有了 NavigationView 官方提供的,当然都渐渐使用这个了。官网地址也给出来,有空的可以去瞅瞅:
http://www.google.com/design/spec/patterns/navigation-drawer.html
使用导航视图需要传入一组参数,一个可选的头部布局,以及一个用于构建导航选项的菜单,完成这些步骤以后只需给导航选项添加响应事件的监听器就可以了。
在使用 NavigationView 时需要提前准备好两个xml文件,一个是头布局,一个是menu布局。menu的一些属性值是干嘛的,我相信有的猿友不是很清楚、下面简单介绍一下。
menu属性值介绍
元素(ELEMENTS):
必须的。它必须是根节点,其中要包含 、 元素。
的属性:
xmlns:android
它定义了XML的命名空间,必须是:http://schemas.android.com/apk/res/android
元素(ELEMENTS):
它定义一个菜单项,可以包含一个 元素 作为子菜单。它必须是 、元素 的子元素。
的属性:
android:id
定义资源ID,它是个唯一值,使用“@+id/name”格式可以给这个菜单项创建一个新的资源ID,“+”号指示要创建一个新的ID。
android:title
字符串资源,它用字符串资源或原始的字符串来定义菜单的标题。
android:titleCondensed
字符串资源。它用字符串资源或原始的字符串来定义一个简要的标题,以便在普通的标题太长时来使用。
android:icon
可绘制资源,它定义了一个菜单项所要使用的图标。
android:onClick
方法名。在这个菜单项被点击时,会调用这个方法。在Activity中,这个方法必须用public关键字来声明,并且只接受一个MenuItem对象,这个对象指明了被点击的菜单项。这个方法会优先标准的回调方法:onOptionsItemSelected()。
警告:如果要使用ProGuard(或类似的工具)来混淆代码,就要确保不要重名这个属性所指定的方法,因为这样能够破坏功能。
这个属性在API级别11中被引入。
android:showAsAction
关键词。它定义这个项目作为操作栏中的操作项的显示时机和方式。只用Activity包含了一个ActionBar对象时,菜单项才能够作为操作项来显示。这个属性在API级别11中被引入,有效值如下:
android:actionViewLayout
它引用一个布局资源,这个布局要用于操作窗口。更多的信息请参照“操作栏”开发指南:
http://blog.csdn.net/fireofstar/article/details/7358393
这个属性在API级别11中被引入。
android:actionViewClass
类名。它定义了操作窗口要使用的View对象的完整的类名。例如,“android.widget.SearchView”说明操作窗口要使用的SearchView类。
警告:如果要使用ProGuard(或类似的工具)来混淆代码,就要确保不要重名这个属性所指定的方法,因为这样能够破坏功能。
这个属性在API级别11中被引入。
android:actionProviderClass
类名,它是操作项目所使用的ActionProvider类的完整的类名。例如,“android.widget.ShareActionProvider”说明要使用ShareActionProvider类。
警告:如果要使用ProGuard(或类似的工具)来混淆代码,就要确保不要重名这个属性所指定的方法,因为这样能够破坏功能。 这个属性在API级别14中被引入。
android:alphabeticShortcut
字符,定义一个字符快捷键
android:numericShortcut
数字值,定义一个数字快捷键
android:checkable
布尔值,如果菜单项是可以复选的,那么就设置为true。
android:checked
布尔值,如果复选菜单项默认是被选择的,那么就设置为true。
android:visible
布尔值,如果菜单项默认是可见的,那么就设置为true。
android:enabled
布尔值,如果菜单项目默认是可用的,那么就设置为true。
android:menuCategory
关键词。它的值对应了定义菜单项优先级的CATEGORE_*常量,有效值如下:
android:orderInCategory
整数值,它定义菜单项在菜单组中的重要性的顺序。
元素(ELEMENTS):
它定义了一个菜单组(它是一个具有共同特征的菜单项的组合,如菜单项的可见性、可用性或可复选性)。它要包含多个元素,而且必须是元素的子元素。
的属性
android:id
资源ID。它是资源的唯一标识。使用“@+id/name”格式给菜单项创建一个新的资源ID。“+”号指示应该给这个元素创建一个新的资源ID。
android:checkableBehavior
关键词。针对菜单组的可复选行为的类型。有效值如下:
android:visible
布尔值,如果菜单组是可见的,就设置为true。
android:enabled
布尔值,如果菜单组是可用的,就设置为true。
android:menuCategory
关键词。它的值对应了Menu类的CATEGORY_*常量,定义了菜单组的优先级。有效值如下:
android:orderInCategory
整数值,它定义了分类中菜单项目的默认顺序。
差不多就这些了,在res文件夹下创建一个名为 menu 的文件夹存放 menu的xml文件。取名为 draw_view.xml:
在创建一个头布局,命名为nav_header.xml:
好了,成功了一半,那么现在需要在 主xml文件 中布局使用 navigationView,最外层是需要DrawerLayout的。
这里我使用了一下百分比布局,防止有的产品经理有侧滑栏占屏幕的百分之多少多少之类的要求:
一些详细的介绍都写在了注释里,若还是有什么不懂的,可以参考这篇博客(介绍得比较详细):
http://blog.csdn.net/lamp_zy/article/details/50126531
FloatingActionButton
浮动操作按钮实在 Material Design 准则中新引入的组件。用于强调当前屏幕最重要,高频率的一些操作。
FloatingActionButton 正常显示的情况下有个填充的颜色,有个阴影;点击的时候会有一个 rippleColor,并且阴影的范围可以增大,那么问题来了:
这个填充色以及rippleColor如何自定义呢?
默认填充颜色取的是 theme 中的 colorAccent,所以你可以在 style 中定义 colorAccent。
colorAccent 对应 EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。详细请参考:
http://blog.csdn.net/lmj623565791/article/details/45303349
rippleColor 默认取的是theme中的colorControlHighlight。
我们也可以直接用属性定义这两个的颜色:
app:backgroundTint="#ff87ffeb"app:rippleColor="#33728dff"
立体感有没有什么属性可以动态指定?
和立体感相关有两个属性,elevation 和 pressedTranslationZ,前者用户设置正常显示的阴影大小;后者是点击时显示的阴影大小。大家可以自己设置尝试下。
在5.x的设备上运行,你会发现一些问题(测试系统5.0):
木有阴影
记得设置 app:borderWidth="0dp"。
按上述设置后,阴影出现了,但是竟然有矩形的边界(未设置margin时,可以看出)
需要设置一个margin的值。在5.0之前,会默认就有一个外边距(不过并非是margin,只是效果相同)。
so,良好的实践是:
添加属性app:borderWidth="0dp"
对于5.x设置一个合理的margin
写一个简单的使用例子:
由于没办法运行模拟器,就上个图片吧,app:rippleColor 这个是点击颜色,android:backgroundTint 这个是显示背景颜色。会有一个渐变的过程,可以试试。也可以参考鸿神的一篇介绍:
http://blog.csdn.net/lmj623565791/article/details/46678867
CoordinatorLayout
CoordinatorLayout 是 Design 引入的一个功能强大的布局,本质上是一个 增强的FrameLayout,它可以使得不同组件之间直接相互作用,并协调动画效果。我们可以定义 CoordinatorLayout 内部的视图组件如何相互作用并发生变化。
例如刚才的 FloatingActionButton 和 SnackBar,为了实现 SnackBar 出现时FAB能够上移,我们可以使用 CoordinatorLayout 为父容器。
然后在代码中,把 Coordinator 给 SnackBar:
Snackbar.make(coordinatorLayout,"点击了floatingActionButton",Snackbar.LENGTH_LONG).show();
这样就实现了简单的动画联动。这个是最简单的使用,等一下学了 CollapsingToolbarLayout和AppbarLayout 配合起来更华丽。
CollapsingToolbarLayout
完。。。。。。。。。。。。。。。。。。。。。
文章原创作者GuoLin 书籍推荐
郭林大神原创android 书籍:《第一行代码 android》