自定义layout实现一个简单的CoordinatorLayou

先把我们要实现的效果图帖出来:

图片.png

是不是很好看? 这种样式还是很经常遇到的, 上面是一个可以滑动隐藏(渐隐淡出/滑出屏幕)的头部, 多半是一张图片, 上面也许会有一些显示元素, 比如头像, 名称之类的.

中间是一个tab栏, 可以有很多tab

最下面是一个ViewPager, 里面承载了对应多个的RecyclerView .

当用户上滑时, 顶部的图片淡出, 最终tab栏顶在屏幕上沿. 效果图如下:

好了, 我们都知道最简单的办法就是使用CoordinatorLayout是实现. 但是我们为了学习CoordinatorLayout, NestedScrollingParent, 今天我们要先自己实现一版最简单的. 通过自定义根控件来实现这个效果.

自定义一个layout, 继承自LinearLayout, 如下:

图片.png

其实目前就是一个LinearLayout. 然后在布局文件中使用
布局文件如下:

图片.png

目前的效果如下:

图片.png

但是当前无法响应用户的滑动, 屏幕是静止的. (但是仍然很养眼~)

好了不看了, 我们继续.
为我们的自定义CustomMyCoordinatorLayout 添加接口: implements NestedScrollingParent {
并实现两个最基本的方法:

图片.png

好了贴出全部的代码:

图片.png

改动仍然不大, 只是添加了两个接口方法而已. 现在我们的界面已经能够响应用户滑动操作.
滑到顶之后的效果:

图片.png

是的, butt不见了.
问题还是很明显的: 一是tab栏, 没有停在手机通知栏地下, 而是顶在了最上面. 这不是我们希望要的.
二是下面的recyclerView 上滑过程中, 可见区域高度没有变化, 导致最终的可见区域没有撑满全屏, 这也不是我们想要的.
但是除去上面两点, 我们基本已经实现了需要的滑动效果. 而我们唯一做的就是上面代码中implement一个接口, 并实现了两个接口方法. 很奇妙. 想其当初为了在词霸的查词结果页,实现一个类似的效果, 整了一周多, 最终的效果还不如这个. 知识真是生产力.

先把上面两个问题解决吧,
纯粹为了代码看着清爽一些, 定义几个子view变量:
private View headerView;
private View tabView;
private ViewPager viewPager;
private int headerHeight;
private int statusbarHeight;

重写onMeasure() 在其中动态修改viewpager的高度:

图片.png

在滑动过程中, 判断上滑上限时, 增加考虑状态栏高度. (假设代码运行在5.0以后的版本上)

图片.png

好了最后再贴出全部的代码:
抱歉, 太长了, 截不了图了, 就截关键部分吧.

图片.png

后面才是重点, 我们是为了学习CoordinatorLayout的实现原理才这么做的. ...........

原理学习后面再写吧.

代码在:
https://github.com/shaopx/CoordinatorLayoutExample