Android开发：如何实现类似Instagram从网格布局切换到线性布局的效果

1. 点击Grid项时传递目标位置 #

在Grid布局对应的Adapter的item点击回调里，把点击的图片索引position通过Bundle传给目标Fragment：

// Grid页Adapter的点击事件处理
gridAdapter.setOnItemClickListener { position ->
    val previewFragment = ImagePreviewFragment()
    val bundle = Bundle()
    bundle.putInt("TARGET_POSITION", position)
    // 若需要传递全量图片列表，也可以存入bundle或通过全局ViewModel存储更方便
    previewFragment.arguments = bundle
    // 执行Fragment跳转逻辑
    supportFragmentManager.beginTransaction()
        .replace(R.id.container, previewFragment)
        .addToBackStack(null)
        .commit()
}

Java写法逻辑一致，仅Bundle存取语法有区别，可直接对应调整。

2. 预览页Fragment初始化时定位到目标图片 #

在ImagePreviewFragment的onViewCreated生命周期中，拿到传递的position后，调用LinearLayoutManager的scrollToPositionWithOffset方法完成定位，该方法可以精准控制目标item的展示位置，完全匹配需求：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    // 取目标位置，默认值0做异常兜底
    val targetPosition = arguments?.getInt("TARGET_POSITION", 0) ?: 0
    // 初始化线性RecyclerView
    val linearLayoutManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
    previewRecycler.layoutManager = linearLayoutManager
    previewRecycler.adapter = ImagePreviewAdapter(你的图片列表资源)
    // 核心定位逻辑：第二个参数为距离布局顶部的偏移量，填0即可让目标图片顶在屏幕最上方
    linearLayoutManager.scrollToPositionWithOffset(targetPosition, 0)
}

如果你的预览页是横向滑动的，只要把LinearLayoutManager的第二个参数改成LinearLayoutManager.HORIZONTAL即可，定位逻辑完全一致。

注意不要使用普通的scrollToPosition方法，该方法仅能保证目标item进入可见区域，无法固定展示位置，不符合需求。

可选优化：添加共享元素过渡动画 #

如果要实现点击Grid图片无缝放大到预览页的丝滑效果，可以搭配Android原生共享元素过渡实现，只要给Grid的item图片和预览页RecyclerView的item图片设置相同的transitionName，跳转时带上共享元素参数即可。

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