Android 顶部带Banner的TabLayout吸顶实现方案

前言
本文实现了多列表下banner可上滑，条目可吸顶的效果。

欢迎加入学习小组QQ群: 193765960。

版权归作者所有，如有转发，请注明文章出处：http://www.jianshu.com/u/d43d948bef39

技术方案

场景：

• 使用自定义的Titlebar
• 多tab多列表切换
• 顶部有公用的view,要求在列表上滑时，顶部View要滑出屏幕，tabs吸顶

选型：

• 其实项目之初，是没有明确要求顶部view是可上下跟随滑动的，所以开始开发时自然而然的选择了：TabLayout+Viewpager+fragment的方案。其中fragment的内容为列表，可上拉自动加载：RecyclerView实现。
  效果如下图：
  
  

  Banner展开状态
• 后来产品确认时指出顶部的view要可上下跟随滑动，Tabs要吸顶。
  效果如下图：
  
  

  Banner收起，Tabs吸顶状态
  
  第一反应是使用CollapsingToolbarLayout，但是因为app统一使用的自定义Titlebar,所以认为这个方案可能不合适，毕竟CollapsingToolbarLayout是要搭配AppBarLayout和Toolbar来使用的，目的是为了实现可伸缩的toolbar。
  • 实践证明我还是浅薄的很，对知识的掌握还是不够
  • CollapsingToolbarLayout远比我想的要灵活，以后再也不要认为CollapsingToolbarLayout就是专用于实现伸缩性Toolbar了。

顶部view可滑动跟随的最终方案：

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout，熟悉的同学可以发现，我们这里是不带Toolbar玩了。

    
    

    

        
            
                
                //顶部view
                

            
        

        //正常视图
        

            

            

        
        //正在加载中视图
        
        

        //断网时，重新加载视图
        
            ...
        
    

细节处理

• 收缩的顶部view显示处理：要求整个滑动过程一直可见

app:contentScrim="@android:color/transparent":view收缩到最后阶段，前景色显示透明，这样就可以显示后面的图片

• fragment中显示空界面和异常界面时，也要求整个屏幕可以滑动

使用ScrollView或者NestedScrollview包裹fragment的空界面和异常界面，这样就可以触发系统的滑动机制，将滑动事件交给外层的CollapsingToolbarLayout来协同滑动。

后记
如果原本就允许使用系统的toolbar,选型上不会经历很多的纠结，不过好在还是尝试并成功了。通过这次的尝试，也是对CollapsingToolbarLayout有了更新的认识，举一反三，做吸顶类的项目我们是不是掌握了更加便捷的实现？