目录
使用 appbarlayout 和 motionlayout 实现常用的布局效果
我们讲了协调滚动的一些定义方式,我们在开发中常用的几种效果都可用 appbarlayout 或 motionlayout 来实现。
这里先上效果图
可能大家都比较会appbarlayout这种实现方式,这里就直接上代码和效果图了。
一、appbarlayout viewpager
核心代码都在 coordinatorlayout 闭包中
很平常的效果了,也是用的比较多的效果,定义起来非常简单,在appbarlayout下面包裹2个view,图片view跟随滚动,而tabbarlayout则吸顶。
效果如下:
二、appbarlayout recyclerview
和上面一样的效果,这里我们可以指定下拉的时候把隐藏的布局显示出来,设置一个核心属性
app:layout_scrollflags="scroll|snap|enteralways
定义的布局如下:
效果如下:
三、motionlayout
motionlayout的定义主要看xml中控件的start end 的位置与状态。
页面xml:
定义场景xml : 控件多的话,定义的东西也会比较多
效果:
同样的效果我们可以用 motionlayout 实现一些 behavior 的效果:
... ... ... ... ... ...
定义的场景xml:
效果:
总结
类似这样的协调滚动布局,当底部列表滑动的时候,顶部的布局做响应的动作,我们都可以通过 appbarlayout 和 motionlayout 来实现。区别只是appbarlayout实现起来更简单,motionlayout 的定义可以更细。
需要注意的是 appbarlayout 定义的方式 可以定义一些相对复杂的页面,如果非常复杂的元素使用 motionlayout 来作为跟视图,全部的布局一股脑的写在 motionlayout 中,那么可能导致性能问题的,最直观的感受是启动这个activity都会很慢。
其实在高刷屏流行的今天,留给我们布局上屏的处理时间越来越少了,如果是特别复杂或是嵌套较深的布局,一定要慎重使用。常见的优化方式是异步加载布局、先展示占位图、优化 motionlayout 布局,只包裹需要改变的视图。