Android ViewPager2全屏图片首次居顶，滑动返回后居中问题咨询

问题：我正在Android中开发一个全屏图片查看器Fragment，采用ViewPager2实现。Fragment启动时，首张图片显示在顶部；向右滑动切换图片后再返回首张，图片变为居中显示。请问首次显示居顶的原因是什么？

FullScreenImageFragment.kt #

class FullScreenImageFragment : Fragment() {
   private var images = arrayListOf<String>()
   private lateinit var binding: FragmentFullScreenBinding
   private lateinit var fullScreenImageSliderAdapter: FullScreenImageSliderAdapter

   override fun onCreateView(
       inflater: LayoutInflater,
       container: ViewGroup?,
       savedInstanceState: Bundle?,
   ): View? {
       binding = FragmentFullScreenBinding.inflate(inflater)
       if (arguments?.getStringArrayList(Constant.IMAGES) != null)
           images = arguments?.getStringArrayList(Constant.IMAGES) as ArrayList<String>

       return binding.root
   }

   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
       fullScreenImageSliderAdapter = FullScreenImageSliderAdapter()
       binding.fullScreenViewPager.adapter = fullScreenImageSliderAdapter

       TabLayoutMediator(
           binding.intoTabLayout,
           binding.fullScreenViewPager
       )
       { _, _ -> }.attach()

       fullScreenImageSliderAdapter.setList(images)
   }
}

FullScreenImageSliderAdapter.kt #

class FullScreenImageSliderAdapter :
    RecyclerView.Adapter<FullScreenImageSliderAdapter.ModelViewHolder>() {
    private lateinit var itemBinding: ImageSliderItemBinding
    private var images = arrayListOf<String>()

    class ModelViewHolder(private val itemBinding: ImageSliderItemBinding) :
        RecyclerView.ViewHolder(itemBinding.root) {
        fun bindItems(s: String) {
            Picasso.get().load(s).into(itemBinding.imageView)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ModelViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        itemBinding = ImageSliderItemBinding.inflate(inflater, parent, false)
        itemBinding.imageView.scaleType = ImageView.ScaleType.CENTER
        return ModelViewHolder(itemBinding)
    }

    override fun getItemCount(): Int {
        return images.size
    }

    override fun onBindViewHolder(holder: ModelViewHolder, position: Int) {
        holder.bindItems(images[position])
    }

    fun setList(newImages: ArrayList<String>) {
        images.clear()
        images.addAll(newImages)
        notifyDataSetChanged()
    }
}

ImageItem.xml #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/image_slider_item_background">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/placeholder"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

FragmentFullScreen.xml #

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/fullScreenViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/into_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/transparent"
        app:tabBackground="@drawable/tab_pager_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />
</FrameLayout>

问题原因分析 #

1. 异步加载与视图测量时机不匹配
   首次启动时，ViewPager2的首个页面已经完成布局测量，但Picasso加载图片是异步操作。此时ImageView被强制设置为CENTER缩放模式，但图片尚未加载完成，只能以占位图的尺寸显示。等图片加载完成后，ImageView没有自动触发重新测量布局，就一直保持着占位图的居顶状态。

2. 缩放模式的双重配置冲突
   XML中ImageView默认设置的是centerCrop，但你在onCreateViewHolder里硬编码改成了CENTER，这本身就存在配置冲突。滑动切换页面后，ViewPager2会重新创建或绑定首个页面的View，这时图片已经缓存完成，ImageView能获取到正确的图片尺寸，使用CENTER模式就能正常居中显示。

3. 数据设置顺序导致视图状态异常
   你先给ViewPager2设置适配器，再调用setList更新数据。这会导致首个页面的View在数据准备完成前就初始化完毕，异步加载图片时无法及时更新布局，从而出现显示异常。

解决方案 #

1. 统一缩放模式配置
   移除onCreateViewHolder中对scaleType的硬编码，保持XML中的centerCrop（如果需要居中显示则直接在XML中改为CENTER），避免配置冲突。

2. 调整数据设置顺序
   先给适配器设置数据，再将适配器绑定到ViewPager2，确保视图初始化时已有完整数据：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    fullScreenImageSliderAdapter = FullScreenImageSliderAdapter()
    fullScreenImageSliderAdapter.setList(images) // 先设置数据
    binding.fullScreenViewPager.adapter = fullScreenImageSliderAdapter // 再绑定适配器

    TabLayoutMediator(
        binding.intoTabLayout,
        binding.fullScreenViewPager
    ) { _, _ -> }.attach()
}

3. 监听图片加载完成，触发视图重绘
   在Picasso的加载回调中通知ImageView重新布局，确保图片加载完成后能正确显示：

fun bindItems(s: String) {
    Picasso.get()
        .load(s)
        .into(itemBinding.imageView, object : Callback {
            override fun onSuccess() {
                itemBinding.imageView.requestLayout() // 加载完成后触发重新布局
            }

            override fun onError(e: Exception?) {
                // 错误处理逻辑
            }
        })
}

内容的提问来源于stack exchange，提问作者Murat Aktay