CoordinatorLayout实现TabLayout吸顶效果

吸顶是目前市场上很多应用都会采用的方式，例如京东、闲鱼、美团、美团外卖、饿了么、链家、贝壳找房等首页都有，如果细心的话，其他主流App也都能找到这种效果的实现。先奉上一个效果图

示例.gif

接下来是饿了么的示例：

饿了么.gif

再看下闲鱼的：

闲鱼.gif

最后是贝壳找房的（跟链家相似）:

贝壳找房.gif

没有对比就没有伤害，是不是比起主流应用也很丝滑？

之前公司项目也有这方面的需求，网上找了很久这种效果，基本都是自定义RecyclerView，然后去处理滑动事件，但是实现出来都不是很理想。后来做其他项目，用了一下CoordinatorLayout，无意间发现也可以实现吸顶，不得不高呼一声，谷歌爸爸真好！

下面开始正文，我一直认为CoordinatorLayout的布局嵌套特别复杂，所以不是很想用，不过做出来的效果...真香！

先看一下页面布局结构：

    

        

            
                ``````````
            

        

        
            ````````
        
        
    

整个父布局是CoordinatorLayout，然后下面分了两个子布局，分别是AppBarLayout和LinearLayoutCompat，AppBarLayout下面嵌套的是CollapsingToolbarLayout，再下面我简单放了个AppCompatImageView，LinearLayoutCompat下面是TabLayout和ViewPage2

下面是完整的布局内容:

下面贴上业务代码：

class MultiplexFragment : DataBindingFragment() {
    companion object {
        fun newInstance(): MultiplexFragment {
            return MultiplexFragment()
        }
    }
    private val strArray = arrayOf("关注", "推荐", "视频", "直播", "图片", "段子", "精华", "热门")

    override fun initView(view: View, savedInstanceState: Bundle?) {
        mViewData?.apply {
            Glide.with(getThis())
                .load("https://wx2.sinaimg.cn/mw690/002Po4pSly1grt79wku06j61jk0rskjl02.jpg").into(ivImage)
//            这种用法当fragment不会有内存泄露 虽然fragment很多 但是每次都是用的RecyclerFragment.newInstance()
            viewPager2.adapter = object :FragmentStateAdapter(getThis()){
                override fun getItemCount(): Int = strArray.size

                override fun createFragment(position: Int): Fragment {
                    return RecyclerFragment.newInstance()
                }
            }
            TabLayoutMediator(tabLayout,viewPager2){tab,position->
                tab.text = strArray[position]
            }.attach()
        }
    }

    //配置当前页面的内容 各项参数都可为空
    //BR.xxxxViewModel是kotlin-kapt插件默认生成的 对应xml文件里的xxxxViewModel
    override fun getDataBindingConfig(): DataBindingConfig? {
        return DataBindingConfig(layoutId = R.layout.fragment_multiplex,variableId = BR.MultiplexViewModel,
            vmClass = MultiplexViewModel::class.java)
    }
}

以上就是实现吸顶效果的所有代码了，急着用的童鞋可以直接拿过去交差了，不急的可以接着往下看，我们不仅要知其然，还要知其所以然。

刚开始了解CoordinatorLayout，是因为它的折叠效果，用它来做吸顶不过是意外发现。这其中转变的一个重要属性就是app:layout_collapseMode="pin"，它还有另一个属性app:layout_collapseMode="parallax"我们将demo中的属性改为parallax就可以看到折叠效果：

折叠.gif

可以看到parallax属性会将图片以折叠的效果隐藏，pin属性会将图片以向上滚动的效果隐藏。

关于CoordinatorLayout的更多属性可参考：
CoordinatorLayout 学习

demo的github地址：

Android Jetpack最佳实践！结合MVVM快速开发，助力开发者深入理解Jetpack！