如何在Kotlin中实现类似Instagram的点击图片全屏缩放功能？

最优方案：DialogFragment + PhotoView #

这是原生Android最贴合需求的实现方式，既避免Fragment跳转导致的状态重置，又能实现全屏缩放覆盖所有视图：

步骤1：添加依赖 #

在build.gradle(app)中引入PhotoView（解决缩放交互问题）：

implementation 'com.github.chrisbanes:PhotoView:2.3.0'

步骤2：创建全屏DialogFragment #

新建FullScreenImageDialogFragment，设置Dialog为全屏无标题，内部用PhotoView承载图片：

class FullScreenImageDialogFragment : DialogFragment() {
    private lateinit var photoView: PhotoView

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState)
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog.window?.apply {
            setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
            setBackgroundDrawable(ColorDrawable(Color.BLACK))
            setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)
        }
        return dialog
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.dialog_fullscreen_image, container, false)
        photoView = view.findViewById(R.id.photo_view)
        
        // 从参数获取图片资源/URL
        val imageRes = arguments?.getInt("image_res")
        val imageUrl = arguments?.getString("image_url")
        
        // 加载图片（示例用Glide，可替换为其他加载库）
        imageRes?.let { photoView.setImageResource(it) }
        imageUrl?.let { Glide.with(this).load(it).into(photoView) }
        
        // 点击图片关闭Dialog
        photoView.setOnClickListener { dismiss() }
        return view
    }
}

对应的布局dialog_fullscreen_image.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/photo_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"/>
</LinearLayout>

步骤3：在原Fragment中触发显示 #

给ConstraintLayout中的图片添加点击事件，启动DialogFragment：

// 示例：给imageView1添加点击事件
imageView1.setOnClickListener {
    val dialog = FullScreenImageDialogFragment()
    val args = Bundle().apply {
        putInt("image_res", R.drawable.your_image1)
        // 网络图替换为：putString("image_url", "your_image_url")
    }
    dialog.arguments = args
    dialog.show(childFragmentManager, "fullscreen_image")
}

其他可选方案（按需选择） #

• 自定义View + WindowManager：如果需要更精细的过渡动画（比如从原位置放大到全屏），可以直接通过WindowManager添加全屏自定义View，监听触摸事件实现缩放，同时处理动画逻辑。代码量稍大，但完全可控。
• ViewPager2 + BottomSheetDialogFragment：如果需要多图切换的图片浏览功能，可以用BottomSheetDialogFragment嵌套ViewPager2，每个页面放置PhotoView，实现可滑动的全屏图片浏览。

原方案失效原因说明 #

• 跳转Fragment：会触发Navigation栈操作，导致原Fragment状态重置，不符合需求。
• 原布局内用PhotoView：受ConstraintLayout约束，无法突破父布局边界实现全屏。
• ZoomHelper：需要适配Navigation组件的Fragment生命周期，实现成本高于DialogFragment。

内容的提问来源于stack exchange，提问作者Jesús Santoyo