类京东商详页——一步实现TabLayout与RecyclerView绑定与锚点定位

2,636 阅读1分钟

背景

相信大家现在都很了解TabLayout+ViewPager2的组合使用,其中TabLayoutViewPager2的绑定类TabLayoutMediator可以很非常简单的实现TabLayoutViewPager2的绑定,这次我们就是按照TabLayoutMediator的思路实现TabLayoutRecyclerView的绑定

简介

TabLayoutMediator2TabLayoutRecyclerView的绑定与锚点定位的仓库,非常适合电商App商品详情页的锚点定位使用,并且支持CoordinatorLayout+AppBarLayout+TabLayout+RecyclerView(TabLayout与RecyclerView不重叠的情况)和TabLayout+RecyclerView(TabLayout与RecyclerView的情况)。

Github地址

效果

sample

原理

上篇文章已经介绍过:文章地址,这次又增加了对TabLayout与RecyclerView重叠情况的支持,完善了demo

使用方法

在gradle中添加

dependencies {
		implementation 'io.kailuzhang.github.tablayoutmediator2:tablayoutmediator2:0.1.0'
}

可以很简单的调用

// offset就是RecyclerView与TabLayout重叠的高度
TabLayoutMediator2(
  tabLayout = binding.tabLayout,
  recyclerView = binding.itemList,
  tabCount = tabList.size,
  appBarLayout = binding.appbar,
  offset = 0,
  autoRefresh = false,
  tabConfigurationStrategy = object : TabLayoutMediator2.TabConfigurationStrategy {
    override fun onConfigureTab(tab: TabLayout.Tab, position: Int): IntArray {
      tabList[position].apply {
        tab.text = title
    		// 返回当前tab对应RecyclerView Adapter的起始ViewType与结束ViewType
        return intArrayOf(startViewType, endViewType)
      }
    }
  }
).attach()

两种使用情形

  1. 不重叠情况(CoordinatorLayout+AppBarLayout+TabLayout+RecyclerView)

    这种布局是图库控件与TabLayout都放在AppBarLayout中,RecyclerView在AppBarLayout下方,这种情况下offset = 0

    不重叠

  2. 重叠情况(TabLayout+RecyclerView)

    这种布局是图库控件是作为RecyclerView的一个Item,TabLayout与RecyclerView重叠,offset = tablayot.height

    重叠

最后

目前该仓库已上线我们的项目(日活超过50万)超过3个月了,稳定运行。

如果大家觉得这个库好用的话,欢迎大家star,多谢!

另外最近也在找工作,位置上海或者武汉,希望有大佬可以帮忙内推,多谢!

邮箱: zhkl2014@gmail.com