安卓FloatingActionButton使用小技巧

1,项目中使用FloatingActionButton搭配AppBarLayout实现随着toolbar上图片的视差效果
2,一般我们看到的FloatingActionButton配合使用AppBarLayout都是这个样子的


安卓FloatingActionButton使用小技巧_第1张图片
bilibli.gif

3,无奈我们设计师设计的这个样子
想了好久不知道如何实现半圆
因为系统提供我们的方法是
app:layout_anchor="@id/app_bar_layout"
app:layout_anchorGravity="bottom|end"
搭配AppBarLayout会自行收缩动画,加上margin 可以实现类似1中的效果
美丽的metiral design,在设计师眼里走了样
最终,用一张半圆的图片衬在了viewpager上,刚好设置的位置在FloatingActionButton下,实现了背景半圆,但是
会明显感觉随着视差一起消失掉了,不过也不算有失大雅。
实际项目要求,能够给FloatingActionButton添加点击事件
点击之后,FloatingActionButton图片资源变化,并且要求背景颜色进行相应的变化
FloatingActionButton默认使用theme中的colorAccent颜色
当然通过源码我们可以知道用app:backgroundTint , app:rippleColor 在xml文件中可以更改默认的背景色以及按下的波纹颜 色。另外也可以进行相关阴影的高度设置,能让FloatingActionButton更加有立体感。
但是我们再点击之后又该如何呢? 代码如下,因为对rippleColor 颜色没有要求,所以默认在xml文件中进行了设置


安卓FloatingActionButton使用小技巧_第2张图片
QQ图片20160621184917.png

4,最终实现的效果如图:
安卓FloatingActionButton使用小技巧_第3张图片
my.gif

页面实现粗糙,没有改进,对凑可以看

5,这里有一篇介绍FloatingActionButton源码分析的文章,如果你有兴趣,可以自己去实现,感觉一定会不一样
转载:(不要追求我的责任哦,注明了的)
http://blog.csdn.net/chdjj/article/details/51296685

你可能感兴趣的:(安卓FloatingActionButton使用小技巧)