如何防止加载所有标签在Tablayout与Viewpager2初始化期间通过TabLayoutMediator?<

Question

我有一个Viewpager2通过TabLayoutMediator与Tablyout设置。Viewpager2的适配器为RecyclerView.Adapter

我正在初始化Viewpager2和Tablayout，并加载图像到标签如下:

myViewPager.apply {
offscreenPageLimit = 6
adapter = myRecycerViewAdapter
}
TabLayoutMediator(myTabLayout, myViewPager) { tab, position ->
val tabView: View =
LayoutInflater.from(context).inflate(R.layout.tab_magazine_preview, null)
Glide.with(context)
.load(urls[position])
.into(tabView.imageView)
tab.customView = tabView
}.attach()

现在这个实现在初始化期间创建所有选项卡，并将所有urls加载到选项卡中的imageview中。这是一种消耗资源的方法，因为用户可能不会一直滑动到最后。如果我有一个巨大的url列表，这将消耗更多的资源。

Viewpager2-offscreenPageLimit有一个很好的特性，它有助于只加载一定量的相邻页面。我是否可以为Tablayout提供类似的功能?

我想在用户滑动时每次只加载一定数量的相邻选项卡。

Answer 1

您可以使用View.OnScrollChangeListener检测TabLayout上的滑动手势然后加载图像，但快速测试表明，你需要手动加载图像初始化的可见选项卡，因为没有滚动。

tabLayout.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
if (v is TabLayout) {
val scrollBounds = Rect()
v.getHitRect(scrollBounds)
for (i in 0 until v.tabCount) {
if (v.getTabAt(i)!!.view.getLocalVisibleRect(scrollBounds)) {
Log.i("!!!!!!!!!!", "child visible at: "  + i);
// check if image is not loaded/loading and load
} else {
Log.i("!!!!!!!!!!", "child invisible: "  + i);
}
}
}
}

---

老回答。我误解了你的问题:

您可以通过监听ViewPager2.OnPageChangeCallback并告诉所需的片段根据页面位置加载它们的图像来做到这一点。

确保你的页面片段实现了允许它加载image的接口:

interface ILoadImage {
fun loadImage()
}
class MyPageFragment : Fragment(), ILoadImage {
private var isImageLoaded = false

override fun loadImage() {
if (isImageLoaded) return
/*
... load image
*/
isImageLoaded = true
}
}

然后在你的myRecycerViewAdapter创建函数，将接受选定的页面位置和更新片段

class MyRecycerViewAdapter /* ... */ {
val fragments: List<ILoadImage> = //...

fun loadImagesForPosition(position: Int) {
fragments[position].loadImage()
// also you can load images for next or prev fragments
}
}

最后监听OnPageChangedCallback并告诉适配器更新片段

myViewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
myRecycerViewAdapter.loadImagesForPosition(position)
}
})