前言
在谷歌提出 material design 之后,终于推出了 android.support.design 这个官方的material design库,这几天我也简单浏览了下这个库,基本上我们常用的组件都有了,从今天开始,就可以一步步替换掉
以前使用的github上的那些开源控件了,毕竟谷歌出品才属精品~~另外分析这个design库的源码我认为是非常有意义的,android上的app 在以前各家都有各家的风格,但是在谷歌出了material design这门新的
设计语言以及官方的库以后,相信越来越多的app 会逐步优化自己的ui 来符合官方的标准,学习这个design库的源码可以让我们以后改写自定义控件的时候更加柔韧有余。
首先,来看一下这个官方的介绍:SnackBars&Toasts
这个文章系统的阐述了snackbar和toast的区别和正确使用snackbar的方式。
我简单归纳如下:
- 1.比toast更加好,毕竟snackbar 可以响应点击事件。
- 2.snackbar 同一时间有且只有一个在显示。
- 3.snackbar 上不要有图标。
- 4.snackbar上action 只能有一个。
- 5.如果有悬浮按钮 floating action button的话,snackbar 在弹出的时候不要覆盖这个button。
Snackbar 在一定程度上可以替代dialog的某些应用场景。比如以前网络不通的情况下登陆失败,会给一个dialog提示,现在就可以用snackbar 来做这个有action的提示,更加方便快捷。
使用snackbar
1.导入support design 库 (这一步在以后的design库的 控件文章里都会舍去)
首先找到你app的build gradle文件。然后增加一个compile语句即可
2.编写xml文件以及java文件
|
|
效果如下:
FAB遮挡问题
然后我们来看一下,如果和正常的FAB(悬浮按钮)在一起会有什么效果(注意这里的悬浮按钮我们也使用design库里的并不使用github上开源的)
先看一下xml文件:
activity代码
运行效果:
大家可以看到当我们的snackbar在弹出的时候,会覆盖到我们的FAB,那这体验是非常糟糕的,这里也给出一个完美的解决方案,其实也很简单用一下design库里的layout即可,java代码不需要改变,只要稍微改一下布局文件:
运行效果:
改变这个snackbar的背景色:
源码解析
基本的用法要点就是这些,我们来看一下这个snackbar的源码,看看谷歌官方是如何编写 material design 风格控件的。
这里我无法贴上全部源码,因为太多,只挑重要的流程说 可以从make开始。
大家可以看一下第六行。实际上这个mView就是一个内部类的对象。
然后接着看第六行的xml文件(到这里其实我们也能猜到了 真正自定义view的snackbar是由snackbar的内部类snackbarlayout来完成的)
继续看下内部类
找到我们真正的snackbar的布局文件 注意这个地方讨巧的使用了merge标签 这是一个比较好的优化xml的写法:
Snackbar 样式
|
|
Snackbar 背景色
Snackbar 透明度
Snackbar 文字颜色
Snackbar 位置
Snackbar 位置设置需要配合
渐入渐出动画配合使用,Snackbar 动画设置可以参考 Snackbar 源码进行设置。