CoordinateLayout 自定义Behavior 仿百度外卖效果 实践

高仿百度外卖效果

代码地址：https://github.com/yaodiwei/CoordinatorLayoutTester

 

真百度外卖效果

 

 

自定义Behavior一半分为两种类型

一种是重写layoutDependsOn和onDependentViewChanged。然后根据dependency控件的大小或位置的改变，来使自己的控件改变。

一种是重写onStartNestedScroll、onNestedPreScroll和onNestedScroll等跟scroll相关的方法。这个是针对一些NestedScrollView或RecyclerView这些只会内部滑动而不会改变自身大小和位置的控件。

 

关于自定义Behavior的介绍文章。有两篇在用法方面介绍的很好。

Material Design 之 Behavior的使用和自定义Behavior

使用 CoordinatorLayout 实现复杂联动效果

 

 

 

 

关于这个仿百度外卖的控件，我本来是用第二种方法的。但是后来发现在 onNestedPreFling 方法上，不会回调多次。所以最后只能在NestedScrollView.setOnScrollChangeListener 这个监听类的 onScrollChange 方法上了。搞的最后好像跟 Behavior 没多大关系.........

注释都放在代码里了，这里实现该效果主要是依靠 HeaderBehavior 这个类。

放『附近商户』和『此刻最热』的称为MiddleContent。里面分为3部分

 

1. MiddleContent 还处于在标题栏底下
2. MiddleContent 已经和标题栏有重叠，属于变形阶段
3. MiddleContent 在屏幕上方了，此时 MiddleContent 需要固定在标题栏上。

关键点几个，

第二步时，需要把标题栏的背景颜色变透明。

第三步时，需要把 MiddleContent 这个 View 移动到标题栏上，就是parentView.removeView和addView方法。

还有在这3步状态转换时，要把所有的 View 重置，不然有时滚太快会让这些 View 处于中间状态。

 

 

 

 

代码地址：https://github.com/yaodiwei/CoordinatorLayoutTester