效果预览
效果描述：
通过切换Tab（点击\滑动）来滑动定位到RecyclerView的所需条目位置，如切换tab到A则RecyclerView滚动到其Item的position为0的位置，切换tab到B则RecyclerView滚动到其Item的position为1的位置。同理，下滑或者上滑RecyclerView的布局，也可以控制顶部Tab完成切换。两者互相影响，互相定位。
国际惯例，先上效果
布局文件
<LinearLayout android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6">
<!--类型tab-->
<com.androidkun.xtablayout.XTabLayout
android:id="@+id/fieldTab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginVertical="6dp"
android:background="@color/white"
app:xTabIndicatorColor="#2938FF"
app:xTabIndicatorWidth="20dp"
app:xTabSelectedTextColor="@color/black_000000"
app:xTabSelectedTextSize="@dimen/rules_size_16"
app:xTabTextColor="@color/black_000000"
app:xTabTextSelectedBold="true"
app:xTabTextSize="@dimen/rules_size_16"
tools:ignore="MissingConstraints" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:onClick="@{()->viewModel.switchToBigView()}"
android:orientation="vertical">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:src="@mipmap/look_big_pigpic" />
<TextView
android:id="@+id/tvSwitchText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:gravity="center"
android:text='@{viewModel.listSmallRecVisible?"切换大图":"切换小图"}'
android:textColor="#D8000000"
android:textSize="10dp"
tools:text="切换大图" />
</LinearLayout>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvFenceBigView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="12dp"
android:visibility="@{viewModel.listSmallRecVisible?View.GONE:View.VISIBLE}"
app:itemBinding="@{viewModel.itemBinding1}"
app:items="@{viewModel.items}"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/fieldTypeLL"
tools:ignore="MissingConstraints"
tools:itemCount="3"
tools:listitem="@layout/item_farm_situation_chart_big" />
代码逻辑
class PigHouseEnvFragment : BaseMvvmFragment<FragmentPigHouseEnvBinding, PigHouseEnvViewModel>() {
private var titleList = ArrayList<String>()
override fun getLayoutId(): Int = 0
//获取到需要指定给的recycler的布局管理
lateinit var rvManager: LinearLayoutManager
override fun onLoad(rootView: View?) {
//ViewModel中请求接口加载RecyclerView数据完成后的MutableLiveData对象(Boolean类型)
viewModel.loadTabLayout.observe(this, {
//只能通过延迟初始化方式，形如： lateinit var rvManager：......
rvManager = binding.rvFenceBigView.layoutManager as LinearLayoutManager
setTabLayout()
setRvScroll()
})
}
private fun setTabLayout() {
titleList.clear()
if (viewModel.items.size > 0) {
titleList.add(0, "全部")
viewModel.items.forEach {
titleList.add(it.group)
}
//切换tablayout模式
switchTabLayoutMode(viewModel.items.size)
}
fieldTab.setScrollPosition(0, 0f, true)
rvManager.scrollToPositionWithOffset(0, 0)
Log.d("setTabLayout==: ", titleList.size.toString())
val titleStr = titleList.toTypedArray()
for (i in titleStr.indices) {
fieldTab.addTab(fieldTab.newTab().setText(titleStr[i]))
}
//tab点击事件
fieldTab.addOnTabSelectedListener(object : XTabLayout.OnTabSelectedListener {
override fun onTabReselected(tab: XTabLayout.Tab?) {}
override fun onTabUnselected(tab: XTabLayout.Tab?) {}
override fun onTabSelected(tab: XTabLayout.Tab?) {
when (tab?.position) {
0 -> {
rvManager.scrollToPositionWithOffset(0, 0)
}
else -> {
tab?.let {
var currentTabPosition = it.position - 1
rvManager.scrollToPositionWithOffset(currentTabPosition ?: 0, 0)
}
}
}
}
})
}
private fun setRvScroll() {
if (Build.VERSION.SDK_INT >= 23) { //23版本才有此方法
rvFenceBigView.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
val position = rvManager.findFirstVisibleItemPosition() + 1 //有个全部，所以位置+1
fieldTab.setScrollPosition(position, 0f, true)
Log.d("test == position === ", "$position")
}
} else {
rvFenceBigView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
super.onScrollStateChanged(recyclerView, newState)
val position = rvManager.findFirstVisibleItemPosition() + 1
fieldTab.setScrollPosition(position, 0f, true)
}
})
}
}
private fun switchTabLayoutMode(size: Int) {
if (size < 7) {
fieldTab.tabMode = MODE_FIXED //设置tab模式：固定
} else {
fieldTab.tabMode = MODE_SCROLLABLE //设置tab模式：可滑动
}
}
}
期间遇到的问题：
Kotlin语言中by lazy可以完成懒加载，例如此处，可形如：
val rvManager by lazy {
binding.rvFenceBigView.layoutManager as LinearLayoutManager
}
但是这里不能却这么用，只能通过：lateinit 关键字进行延迟初始化
lateinit var rvManager: LinearLayoutManager
原因剖析
如果使用懒加载by lazy{} 的方式，不能保证当前RecyclerView的LayoutManager为最新的，只能获取到最开始初始化的那个rvManager，会产生RecyclerView与其LayoutManager不匹配的问题，导致无法切换tab完成RecyclerView的滚动定位。（如果切出该页面再重新进来会发生该bug）
而如果采用代码中的延迟初始化lateinit关键字的方式，每一次重新请求完数据，都会重新获取rvManager = binding.rvFenceBigView.layoutManager as LinearLayoutManager，就可以保证当前RecyclerView的LayoutManager为当前最新的，消除了不匹配的bug
网友评论