CoordinatorLayout实现TabLayout吸顶效果

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

先奉上一个效果图


接下来是饿了么的示例:


再看下闲鱼的:

最后是贝壳找房的(跟链家相似):

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

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

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

先看一下页面布局结构:

    

        

            
                ``````````
            

        

        
            ````````
        
        
    

整个父布局是CoordinatorLayout,然后下面分了两个子布局,分别是AppBarLayoutLinearLayoutCompatAppBarLayout下面嵌套的是CollapsingToolbarLayout,再下面我简单放了个AppCompatImageViewLinearLayoutCompat下面是TabLayoutViewPage2

下面是完整的布局内容:

  

        

            

                

            

        

        

            

            

        

    

下面贴上业务代码:

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就可以看到折叠效果:

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

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

demo的github地址:

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

你可能感兴趣的:(学习记录,android)