如何像 Instagram 一样点击缩放图像？科特林

Question

我正在尝试获得与 Instagram 类似的功能，当您点击或 捏住图像，现在图像覆盖了屏幕上方的所有图像 其他观点，喜欢 这个

我有一个在约束布局中包含 3 个图像的片段，我使用 导航组件。当有人 点击它们，就像聚焦在图像上一样。

首先，我尝试使用其他片段来模拟这一点。我的方法 是使用按钮，然后当您点击按钮时，它会导航到 另一个带有更大比例图像的片段。然而，由于 我正在用片段做的事情，这个方法不起作用，因为 它在浏览时重置其余信息 碎片。

然后，我尝试使用 PhotoView，但是由于 需要使布局响应，它不起作用，因为图像 只能在这样设置的约束内缩放：

  <com.github.chrisbanes.photoview.PhotoView
                     android:id="@+id/img_contenido"
                     android:layout_width="match_parent"
                     android:layout_height="0dp"
                     android:layout_marginTop="50dp"
                     android:src="@drawable/a_img3_entidad"
                     app:layout_constraintBottom_toTopOf="@id/txt_contenido2"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintHeight_percent="0.06"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@id/txt_contenido" />

所以这对我来说没什么用，因为我基本上需要拍摄图像 在屏幕上。

然后我尝试了ZoomHelper，但是 因为我使用带有导航组件的片段，所以我不知道 如何正确实施。

我也遇到过这个zoom_pinch_overlay 包 正是我所需要的，但我对 Flutter 完全陌生，而且我 假设我不能以任何方式在我的应用程序中使用它

最好的方法是什么，或者我应该尝试哪种方法 弄清楚了吗？

Answer 1

我终于通过StfalconImageViewer

找到了我需要的东西

以防万一有人遇到类似的 ViewBinding 和 Fragments 情况，为了用单个图像来测试它，我这样做了：

//Set up StfalconImageViewer when the image is clicked
            binding.imgNota.setOnClickListener {
                showImageWithStfalconViewer()
            }

方法：

private fun showImageWithStfalconViewer() {
        // Replace 'R.drawable.img' with the actual drawable resource ID or image URL
        val imageUrl = R.drawable.img
        val images = listOf(imageUrl)

        val builder = StfalconImageViewer.Builder<Int>(requireContext(), images) { view, image ->
            // Load the image directly into the ImageView
            view.setImageResource(image)
        }

        // Optional set a transparent background color
        builder.withBackgroundColor(Color.TRANSPARENT)
            .allowSwipeToDismiss(true) // Allow dismissing by clicking outside the image
            .show()
    }