Question

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

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

Answer 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（项目），并需要在（allprojects）标记中添加此行maven {url“ https://jitpack.io”}。

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

4-通过单击（立即同步）来同步项目。

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

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

6- 添加Android ImageView并确保已将要用于ImageView的图像添加到项目drawable文件夹中。

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功能的功能齐全的应用程序

Answer 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"));

在捏住图像时应自动缩放图像，而无需进行任何其他配置。

Answer 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"/>

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

Answer 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"
        />

我希望这会有所帮助。

ImageView库可以全屏缩放吗？

4 个答案: