Android Design Support Library初探

作者: dongorigin | 来源:发表于2015-05-31 22:08 被阅读55151次

前言

在前几天的IO大会上，Google带来了Android M，同时还有Android支持库的新一轮更新，其中更是增加一个全新的支持库Android Design Support Library，包含了数个重要的Material Design组件，用于将Material Design适配到Android 2.1(API 7)。

Android Design Support Library

可以通过官方博客，文档，和Demo示例来快速了解。Design Support Library现在包含NavigationView，TextInputLayout，FloatingActionButton，Snackbar，TabLayout，CoordinatorLayout。
要使用Design Support Library，请先更新SDK中的Android Support Repository到最新版，然后在工程中添加依赖

compile 'com.android.support:design:22.2.0'

下面让我们先来试试Navigation View。

NavigationView

在Material Design中，Navigation drawer导航抽屉，被设计用于应用导航，提供了一种通用的导航方式，体现了设计的一致性。
而NavigationView的典型用途就是配合之前v4包的DrawerLayout，作为其中的Drawer部分，即导航菜单的本体部分。NavigationView是一个导航菜单框架，使用menu资源填充数据，使我们可以更简单高效的实现导航菜单。它提供了不错的默认样式、选中项高亮、分组单选、分组子标题、以及可选的Header。

示例工程
另外，上图导航菜单中的图标全部来自Google的Material icons项目，提供了非常多的图片供我们选择，好顶赞，我们的设计师表示压力很大感觉快失业了。下载图标时注意，作为菜单项的icon为24dp，并选择light即白色版。
至于图中icon的高亮效果，应该是利用了Drawable Tinting。图中的图标有高亮绿色与普通灰色两种颜色，但是实际上对应图片只有一张白色版本。

网友评论

daa91983a87d:有什么关键电吗，我用4.1闪退

曹半斤:用什么方法调出调出NavigationView

曹半斤:@dongorigin 知道了谢谢

dongorigin:调出是指打开？如果你是指打开侧滑菜单，这不是NavigationView的功能，是DrawerLayoutd的功能

逮虾户max:请问在使用的时候低版本手机上（5.0以下）为何不兼容，是否碰到过？

dongorigin:@诗和远方2000 官方的这几个支持库是支持到api 7的，我自己使用用到4.1都是没有问题的，建议你试试运行官方的demo，看看有没有问题 https://github.com/chrisbanes/cheesesquare

b8194c36f87b:如果我要设置选中时icon和文字的颜色，应该怎么办呢？？
是要设置 app:itemIconTint="" 这个属性吗？

dongorigin:@倾心成铭 itemIconTint是icon颜色，itemTextColor是文字颜色，注意使用selector来实现选中状态和普通状态下两种颜色

后端沉思录:感谢分享！

Jeongho:mDrawerLayout.closeDrawers()
NavigationView关闭的时候没有卡顿的现象么？

dongorigin:@Jeongho 是真机还是模拟器，试试真机呢？as默认工程有一阵子没用过了，不确定是否有问题

Jeongho: @dongorigin 我是用的as上面默认的那个带侧边栏的activity 有卡顿现象

dongorigin:@Jeongho 之前简单用过，没遇到卡顿问题。我觉得可以检查下执行closeDrawers前后是否有其他主线程的操作

e5293366e464:你好，item只能设置一个图片和一个title吗？我想在title的后面再放一个图片，也就是让抽屉里的item能多一些信息，查了好久都不得解决方法，求作者告知

dongorigin:@Donkey_man 目前官方的这个库限制是比较死的，基本功能如图所示，想定制基本是做不到的。建议你尝试下第三方的库https://github.com/mikepenz/MaterialDrawer，定制性强很多

云天明送恒心:请问如何让NavigationView不遮挡ToolBar呢？

dongorigin:@谁的青春不曾迷茫这个是DrawerLayout的使用问题，与NavigationView和Toolbar没有关系。可以参考我的demo的历史版本，之前就是不遮挡的https://github.com/dongorigin/AndroidDemo/blob/ccdbd599148f68a20a6faf980457793764b323ac/app/src/main/res/layout/activity_main.xml

舒啟莯:@dongorigin 好像DrawerLayout作为root，toobar放到LinearLayout里不行哦

dongorigin:@云天明送恒心这个主要是DrawerLayout的使用问题，只要简单调整一下DrawerLayout与Toolbar与NavagationView的嵌套就可以了。一种解决方案是DrawerLayout作为root，然后两个child为LinearLayout与NavigationView，最后Toolbar放到LinearLayout里面，就可以了。

72a7cb3c09ad:所以说app:headerLayout里的xml里的对象怎么用,直接findViewById()的到的对象是null

dongorigin:@李清Lin 我目前是使用View inflateHeaderView(int res)方法，这个方法可以在设定xml的同时，返回填充后的View，然后可以用这个View来找里面的其他View

dongorigin:@落幕丶Star 我现在也不清楚如何使用app:headerLayout中xml里的对象，我目前的用法是使用View inflateHeaderView(int res)方法，这个方法可以在设定xml的同时，返回填充后的View，然后可以用这个View来找里面的其他View

我是李小米:@落幕丶Star 也遇到了相同的问题，楼主能解决一下吗？谢谢！

373fbd2e1281:可以的学习到了。赞一个

51a39ee2a9ab:学习，正需要，谢谢

8476bb8c6e85:@dongorigin 毕竟这个控件也挺新的

dongorigin:@星落秋枫间距我也不会改，没找到相关方法

8476bb8c6e85:@dongorigin 是啊，果然还是大神牛逼

，请问你说的那个菜单间距要怎么实现？

dongorigin:@星落秋枫我也是在早晨突然想到了嵌套两个Navigation View的方案

其实也还好啦，依然比全部自己写要简单

8476bb8c6e85:@dongorigin 嵌套的话应该可以，但是这样的话感觉Navigation View的意义又不大了。要是想让位于底部的菜单也像Navigation View一样有高亮的效果，还得在RelativeLayout里面嵌套两个Navigation View

dongorigin:@星落秋枫你是指inbox那样吗，我想到解决方法了，其实很简单将Navigation View只作为布局的一部分，这样布局的其他部分就可以自由控制了，比如外层套一个RelativeLayout，然后将你需要的View设定位置

dongorigin:@星落秋枫好像并不可以呢，菜单间距也许可以改，但是直接设定某个菜单位置应该并不可以。

8476bb8c6e85:要是drawer里面的菜单项没有那么多，要怎么使setting那个菜单位于底部？

yilufeng0:很喜欢这样的样式👍

dongorigin:@屠龙多谢提醒，这么重要的问题我居然忘了写。请先更新sdk中的支持库版本到最新，然后在工程中增加依赖。地址我已经更新到文章开头部分了。

屠龙:赞一个,Android Design Support Library这个库如何使用,需要添加依赖,还是更新sdk?

魏魏魏魏:@屠龙根据使用的控件添加，郭神的第二行代码是这么用的

daa91983a87d:有什么关键电吗，我用4.1闪退
曹半斤:用什么方法调出调出NavigationView
曹半斤:@dongorigin 知道了谢谢
dongorigin:调出是指打开？如果你是指打开侧滑菜单，这不是NavigationView的功能，是DrawerLayoutd的功能
逮虾户max:请问在使用的时候低版本手机上（5.0以下）为何不兼容，是否碰到过？
dongorigin:@诗和远方2000 官方的这几个支持库是支持到api 7的，我自己使用用到4.1都是没有问题的，建议你试试运行官方的demo，看看有没有问题 https://github.com/chrisbanes/cheesesquare
b8194c36f87b:如果我要设置选中时icon和文字的颜色，应该怎么办呢？？
是要设置 app:itemIconTint="" 这个属性吗？
dongorigin:@倾心成铭 itemIconTint是icon颜色，itemTextColor是文字颜色，注意使用selector来实现选中状态和普通状态下两种颜色
后端沉思录:感谢分享！
Jeongho:mDrawerLayout.closeDrawers()
NavigationView关闭的时候没有卡顿的现象么？
dongorigin:@Jeongho 是真机还是模拟器，试试真机呢？as默认工程有一阵子没用过了，不确定是否有问题
Jeongho: @dongorigin 我是用的as上面默认的那个带侧边栏的activity 有卡顿现象
dongorigin:@Jeongho 之前简单用过，没遇到卡顿问题。我觉得可以检查下执行closeDrawers前后是否有其他主线程的操作
e5293366e464:你好，item只能设置一个图片和一个title吗？我想在title的后面再放一个图片，也就是让抽屉里的item能多一些信息，查了好久都不得解决方法，求作者告知
dongorigin:@Donkey_man 目前官方的这个库限制是比较死的，基本功能如图所示，想定制基本是做不到的。建议你尝试下第三方的库https://github.com/mikepenz/MaterialDrawer，定制性强很多
云天明送恒心:请问如何让NavigationView不遮挡ToolBar呢？
dongorigin:@谁的青春不曾迷茫这个是DrawerLayout的使用问题，与NavigationView和Toolbar没有关系。可以参考我的demo的历史版本，之前就是不遮挡的https://github.com/dongorigin/AndroidDemo/blob/ccdbd599148f68a20a6faf980457793764b323ac/app/src/main/res/layout/activity_main.xml
舒啟莯:@dongorigin 好像DrawerLayout作为root，toobar放到LinearLayout里不行哦
dongorigin:@云天明送恒心这个主要是DrawerLayout的使用问题，只要简单调整一下DrawerLayout与Toolbar与NavagationView的嵌套就可以了。一种解决方案是DrawerLayout作为root，然后两个child为LinearLayout与NavigationView，最后Toolbar放到LinearLayout里面，就可以了。
72a7cb3c09ad:所以说app:headerLayout里的xml里的对象怎么用,直接findViewById()的到的对象是null
dongorigin:@李清Lin 我目前是使用View inflateHeaderView(int res)方法，这个方法可以在设定xml的同时，返回填充后的View，然后可以用这个View来找里面的其他View
dongorigin:@落幕丶Star 我现在也不清楚如何使用app:headerLayout中xml里的对象，我目前的用法是使用View inflateHeaderView(int res)方法，这个方法可以在设定xml的同时，返回填充后的View，然后可以用这个View来找里面的其他View
我是李小米:@落幕丶Star 也遇到了相同的问题，楼主能解决一下吗？谢谢！
373fbd2e1281:可以的学习到了。赞一个
51a39ee2a9ab:学习，正需要，谢谢
8476bb8c6e85:@dongorigin 毕竟这个控件也挺新的
dongorigin:@星落秋枫间距我也不会改，没找到相关方法
8476bb8c6e85:@dongorigin 是啊，果然还是大神牛逼，请问你说的那个菜单间距要怎么实现？
dongorigin:@星落秋枫我也是在早晨突然想到了嵌套两个Navigation View的方案其实也还好啦，依然比全部自己写要简单
8476bb8c6e85:@dongorigin 嵌套的话应该可以，但是这样的话感觉Navigation View的意义又不大了。要是想让位于底部的菜单也像Navigation View一样有高亮的效果，还得在RelativeLayout里面嵌套两个Navigation View
dongorigin:@星落秋枫你是指inbox那样吗，我想到解决方法了，其实很简单将Navigation View只作为布局的一部分，这样布局的其他部分就可以自由控制了，比如外层套一个RelativeLayout，然后将你需要的View设定位置
dongorigin:@星落秋枫好像并不可以呢，菜单间距也许可以改，但是直接设定某个菜单位置应该并不可以。
8476bb8c6e85:要是drawer里面的菜单项没有那么多，要怎么使setting那个菜单位于底部？
yilufeng0:很喜欢这样的样式👍
dongorigin:@屠龙多谢提醒，这么重要的问题我居然忘了写。请先更新sdk中的支持库版本到最新，然后在工程中增加依赖。地址我已经更新到文章开头部分了。
屠龙:赞一个,Android Design Support Library这个库如何使用,需要添加依赖,还是更新sdk?
魏魏魏魏:@屠龙根据使用的控件添加，郭神的第二行代码是这么用的

Android Design Support Library初探

前言

Android Design Support Library

NavigationView

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

互联网的世界

Android札记

Pisces Zone

android收集

Android

android技术收藏

Android Dev

Android UI的收集