Android Design Support Library使用详解

作者简介 原创微信公众号郭霖 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及其以上)库又有哪些控件呢。主要包括SnackBarNavigation ViewFloatActionbuttonCoordinatorLayoutCollapsingToolBarLayout等。我在Git上看见一个非常炫的效果:


把该项目的Git附上,觉得有用的自行下载看源码:

https://github.com/frogermcs/InstaMaterial

现在来一一介绍Design系列控件。

SnackBar

SnackBar 是带有动画效果的快速提示栏,它显示在屏幕底部,是用来代替 Toast 的一个全新控件,它基本上继承了 Toast 的属性和方法,用户可以点击按钮执行对应的操作,Snackbar 支持滑动消失,如果没设任何操作,那么到时间自动消失。

SnackBar 的构造:

SnackBar 的常用方法:

Snackbar 需要一个控件容器view用来容纳,官方推荐使用 CoordinatorLayout 来确保 Snackbar 和其他组件的交互,比如滑动取消 Snackbar、Snackbar 出现时 FloatingActionButton 上移。举一个简单运用的例子:

这些运用都很简单,就不更多的嚼舌根了。有个花式使用SnackBar的连接,感兴趣的可以去看看:

http://www.jianshu.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》

淘宝链接: https://s.click.taobao.com/t?e=m%3D2%26s%3DgKUfuKdAZKocQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67p2n%2BQBNMyE6Rku8%2Bpj6eJall3bs%2B3NRhNHnsKI%2BqxhyM0iVZhTFBom4YIorMPnmg8G0g2OJi%2FzmXHfenomYtn5EW9vzeG8LzfPUwktUBEmkxg5p7bh%2BFbQ%3D&pvid=10_106.6.161.154_3367_1490163222155

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容

  • Android Design Support Library使用详解 Google在2015的IO大会上,给我们带...
    eclipse_xu阅读 2,515评论 5 25
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,259评论 25 707
  • This is an H1 This is an H2 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题...
    海魂2046阅读 316评论 0 0
  • 长城赏秋 飒飒西凉扫古台,赏秋来晚叶黄衰。 不如坐看天穷处,云淡风轻雁对来。
    BRS阅读 237评论 3 1
  • 人际关系投入时间:1.2天发个信息,3天打电话, 2.要是想换掉一个合作长期的供应商不是那么容易的事情.3找对...
    爱吃娴蛋黄的蛋蛋阅读 623评论 0 0