允许全屏捏缩放的 ImageView 库？答案

【问题标题】：ImageView library that allows full screen pinch zoom?允许全屏捏缩放的 ImageView 库？
【发布时间】：2018-09-01 00:40:30
【问题描述】：

我有一个 FrameLayout，其中包含一个我希望能够放大的 ImageView。如何在 ImageView 中启用“捏缩放”？

我希望能够不将缩放限制为 ImageView 的大小，而是限制为包含 FrameLayout 的大小，如此处所示（不同的应用程序）：

【问题讨论】：

顺便说一句，当您使用hammer.js 时，即使您阻止了页面/表单的缩放，当您加载hammer.js 库时，它也会允许缩放图像。它适用于任何平台 ios、android、windows 手机、网络浏览器等。我为您发布了 2 个示例，用于在网络浏览器上工作的图像。有关任何其他信息，请参阅hammer.js 的网站官方

标签： android android-layout android-imageview android-image

【解决方案1】：

您可以使用 android studio 来执行此操作，这是如何实现它的步骤。

你可以参考this link to使用它

1- 打开 Android Studio 并创建一个新项目并为其命名，在我们的例子中我们将其命名为 (ImageZoom)，选择 API 16 作为最低 SDK，然后选择一个空白活动，点击“完成”并等待 Android Studio 构建您的项目。

2- 打开 build.gradle (Module:app) 并添加 PhotoView 库。

编译'com.github.chrisbanes:PhotoView:2.1.3'

3- 现在你需要打开 build.gradle (Project) 并且你需要在 (allprojects) 标签内添加这行 maven { url "https://jitpack.io" }。

allprojects {
repositories {
    google()
    jcenter()
    maven { url "https://jitpack.io" }
}
}

4- 通过单击 (Sync Now) 同步项目。

android studio 同步 gradle 文件 Android Studio 同步 gradle 文件。（大预览）

5- 打开 activity_main.xml 文件，在这里您将添加 3 个视图： - 将保存图片的 Android ImageView。 – 图片标题和描述的 Android TextView。

6- 添加 Android ImageView 并确保您已在项目可绘制文件夹中添加要用于 ImageView 的图像。

7-：

ImageView
android:id="@+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/nature" />

8- 在 ImageView 上方添加一些边距并将其放在中心。

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:srcCompat="@drawable/nature" />

9- 当您在 Android Studio 预览窗口中点击 ImageView 时，您将看到 ImageView 顶部和底部的空白区域。您可以使用 android:scaleType="centerCrop" 来解决这个问题，它允许图像填充剩余空间。

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/nature" />

10- 当您在 Android Studio 预览窗口中点击 ImageView 时，您将看到 ImageView 顶部和底部的空白区域。您可以使用 android:scaleType="centerCrop" 来解决这个问题，它允许图像填充剩余空间。

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/nature" />

当您在 Android Studio 预览窗口中点击 ImageView 时，您将看到 ImageView 顶部和底部的空白区域。您可以使用 android:scaleType="centerCrop" 来解决这个问题，它允许图像填充剩余空间。

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/nature" />

添加将保存图片名称的Android TextView，此TextView将放置在ImageView（ivIcon）下方的中心，从顶部添加一些边距，尝试将文本大小增加到（20sp）并将文本样式更改为（斜体和粗体）。

<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_below="@+id/ivIcon"
android:text="@string/flower_name"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:textStyle="italic|bold" />

11- 现在你为这个布局添加最终的 TextView，它将包含关于图片的描述，这个 TextView 将放在 (tvName) 下方，尝试将文本大小增加到 (16sp) 并且不要忘记添加一些顶部的边距，使其看起来不会与 (tvName) TextView 一起关闭。

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvName"
android:textSize="16sp"
android:layout_marginTop="5dp"
android:text="@string/flower_description" />

12- 现在你已经完成了activity_main.xml文件的工作，接下来你需要打开MainActivity.java文件并初始化Android ImageView和Android AlertDialog。

13- 初始化 ImageView (ivIcon)。

 ImageView mIcon = findViewById(R.id.ivIcon);

14- 接下来您需要使用 RoundedBitmapDrawable 和 Bitmap 将 ImageView (ivIcon) 的形状更改为圆形。

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), 
R.drawable.nature);
RoundedBitmapDrawable mDrawable = 
RoundedBitmapDrawableFactory.create(getResources(), bitmap);
mDrawable.setCircular(true);
mIcon.setImageDrawable(mDrawable);

15- 构建并运行应用以查看进度。

16- 现在您需要在 Android AlertDialog 上工作，当您尝试点击 ImageView (ivIcon) 时，AlertDialog 将出现在屏幕上。在开始之前，您首先需要创建另一个布局文件，稍后您将在 AlertDialog 中使用它

16- 现在您需要在 Android AlertDialog 上工作，当您尝试点击 ImageView (ivIcon) 时，AlertDialog 将出现在屏幕上。在开始之前，您首先需要创建另一个布局文件，稍后您将在 AlertDialog 中使用它。

17- 创建一个新的布局文件并将其命名为（dialog_custom_layout.xml），该文件将有一个匹配屏幕宽度和高度的 PhotoView。

<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

18- 现在回到 MainActivity.java 文件，为了能够点击 ImageView，您需要使用 setOnClickListener 并且在 onClick 中您将创建 AlertDialog。

        mIcon.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            AlertDialog.Builder mBuilder = new 
            AlertDialog.Builder(MainActivity.this);
            View mView = 
            getLayoutInflater().inflate(R.layout.dialog_custom_layout, 
            null);
            PhotoView photoView = mView.findViewById(R.id.imageView);
            photoView.setImageResource(R.drawable.nature);
            mBuilder.setView(mView);
            AlertDialog mDialog = mBuilder.create();
            mDialog.show();
            }
            });

19- 构建并运行应用程序以测试 Android 捏合和缩放功能。

20- 嗯，图片似乎没有填满整个 AlertDialog！您实际上可以使用 android:scaleType="centerCrop" 来修复它。

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

21- 构建并运行应用程序以查看结果。

22- 太好了，现在您有了一个功能齐全的应用，带有捏缩放 Android 功能?

【讨论】：

此解决方案不适用于本机应用。
我没有关注你，我真的以为你在本机应用程序中使用的是 android 浏览器，我的意思是你可以在其中放置浏览器并且浏览器可以支持这个 js。如果它不是浏览器，你为什么要寻找 js 库，你为什么不使用 android it self 中的工具呢？我听不懂你在说什么..冲突！！
在用户提到的问题中，他在 FarmeLayout 中使用 ImageView。这两个组件都是 Android 原生的，因此解决方案应该是 Android 原生的。如果使用 WebView 或任何其他类似组件，您的解决方案是可以接受的。

【解决方案2】：

有一个库可以满足您的需求 - https://github.com/davemorrissey/subsampling-scale-image-view

将布局中的ImageView 替换为库中的SubsamplingScaleImageView。然后在您的片段或活动中，获取对 SubsamplingScaleImageView 的引用并使用资源、资产或 uri 设置图像，如下所示：

SubsamplingScaleImageView imageView = 
(SubsamplingScaleImageView) findViewById(id.imageView);
imageView.setImage(ImageSource.resource(R.drawable.monkey));
imageView.setImage(ImageSource.asset("map.png"));
imageView.setImage(ImageSource.uri("/sdcard/DCIM/DSCM00123.JPG"));

捏合时图片会自动缩放，无需额外配置。

【讨论】：

Tohu，请不要只发布一些工具或库作为答案。至少在答案本身中展示how it solves the problem。
我实际上是在寻找一个图书馆，所以这行得通！不过，下次我提出问题时，我一定会具体说明
@IsaacPerez 如果这是您正在寻找的答案，您能否将其标记为已回答？

【解决方案3】：

简单的回答，看看PhotoView library，它有一些很棒的功能。只需试用样品，看看哪一种最适合您的需求。

使用该库，您可以将您的 ImageView 替换为允许开箱即用的 PhotoView。

<com.github.chrisbanes.photoview.PhotoView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/full_screen_photo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"/>

它还允许您配置更多属性，例如启用旋转图像或对用户点击做出反应。

【讨论】：

【解决方案4】：

我也面临同样的问题：

我需要缩放图像。
我需要我的图像在缩小状态下向左、向右、向上和向下滚动。
它必须与 GLIDE 库一起使用，我将其用于我的 ACTIVITY 中的下一个功能。

以上解决方案不能满足我的所有要求。

对我有用的解决方案：使用 GIT HUB 提供的 TouchImageView 开源库。

链接：- https://github.com/MikeOrtiz/TouchImageView

它也适用于 Glide：

Glide
                                .with(ImageActivity.this)
                                .load(url)
                                .centerCrop()
                                .placeholder(R.drawable.logo)
                                .into(ivPlanDocument);

在您的 XML 文件中更改 ImageView：

<com.ortiz.touchview.TouchImageView
        android:id="@+id/iv_image_activity"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:scaleType="centerCrop"
        android:scrollbars="horizontal|vertical"
        />

我希望这会对某人有所帮助。

【讨论】：