android 点击图片放大(大于屏幕)并四处移动,再次点击返回默认大小

android click image to zoom in (larger than screen) and move around, and click again to go back to default size

我确实进行了广泛的搜索,但我还没有找到我正在寻找的东西。因此,我没有任何代码来展示我想做什么。我想知道是否可能,首先,然后就如何实施这样的行动取得领先。

为了保持我的应用程序简单,我真的很想避免启动一个新的 activity,这似乎涉及我所见过的许多 "solutions"。

我的设置没有什么特别之处,只是一个布局,其中包含一些文本视图、按钮和与屏幕一样大的图像。

我希望用户能够点击图像,图像将 "zoom" 或 "enlarge" 放大到大约 4-5 倍大小,显然图像的大部分将不在屏幕上.然后,用户应该能够随意拖动图像以查看整个图像。当他们看完图片后,他们应该能够点击返回到原始尺寸。

我敢肯定,这将保证每个尺寸都有一张单独的图片(一张用于原始图片,一张更大、更详细的图片用于放大版本)。虽然,越简单越好。如果我可以保留一个更大的详细图像并在单击之前将其缩小为标准视图,那就太好了。

我假设他们会成为图片上的点击监听器,但我不确定如何在不完全开始新的 activity 的情况下做我想做的事,然后再次点击,返回到原来的activity。可以在同一个activity中完成吗?

提前致谢。

编辑:

我刚刚有个想法。我可以在相对视图中显示较大的图像并将其设为 invisible/gone,然后在单击 original/main 图像时使其可见。点击大图会使自己再次invisible/gone。但是,假设这可行,我不知道如何设置拖动它的动作和边界以确保你不能将它完全拖到屏幕之外。

我在我的项目中使用 this 库来缩放图像,它使用起来非常简单,可以帮助您...

https://github.com/chrisbanes/PhotoView

JAVA: 照片视图 mImageView; PhotoViewAttacher mAttacher;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Any implementation of ImageView can be used!
mImageView = (PhotoView) findViewById(R.id.iv_photo);

// Set the Drawable displayed
Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper);
mImageView.setImageDrawable(bitmap);

    // Attach a PhotoViewAttacher, which takes care of all of the zooming    functionality.
mAttacher = new PhotoViewAttacher(mImageView);
}


// If you later call mImageView.setImageDrawable/setImageBitmap/setImageResource/etc then you just need to call
  attacher.update();

XML:

<uk.co.senab.photoview.PhotoView
   android:id="@+id/iv_photo"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:padding="20dp" />

执行此操作的一个好方法是使用自定义 ImageView 来处理图像的缩放和拖动,这样您就可以将其保持在相同的布局中,而无需启动新的 activity。

您应该检查一下 TouchImageView library. It contains a custom ImageView,它允许捏合缩放、双击缩放、拖动以及手动设置图像缩放的功能。

如果不想包含完整的库,添加此功能的一种简单方法是将 TouchImageView java class 复制到您的应用程序包中(例如com.myapp.views)。

然后在您的 xml 布局中而不是使用:

<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image" />

更改图像以使用自定义视图的路径 class:

<com.myapp.views.TouchImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image" />

希望这对其他人有帮助,并且我的解决方案足以解决其他人的问题,我将用我发现的一个很好的解决方案来回答我自己的问题。

为了尽可能简单(因为实现这样的功能似乎需要更广泛的工作,我认为这是必要的),我使用了切换 hidden/invisible 视图的方法。

<FrameLayout>


    <!--Main Activity-->
    <LinearLayout>

        <!--Primary Image-->
        <ImageView
             android:onClick="makeZoomVisible"/>

    </LinearLayout>



    <!--ScrollView Holder for Enlarged Image-->
    <HorizontalScrollView
        android:visibility="gone">

        <!--Enlarged Image-->
        <ImageView
            android:onClick="makeZoomInvisible"/>

    </HorizontalScrollView>


</FrameLayout>

基本布局是一个框架布局,它允许我将放大图像支架(水平滚动视图)放在其他所有内容之上,因为它位于主 activity 视图(线性布局)之后。

单击主图像后,它会调用方法 "makeZoomVisible",正如您可能猜到的那样,它会切换包含放大图像的水平滚动视图的可见性。图像被放大到屏幕允许的高度。这对我有用,因为我的应用程序仅为纵向,并允许图像放大大约 4 倍的大小(原始图像大小的 2x2,仅用于比较)。由于图像在屏幕高度处最大化,因此无需 scroll/drag 上下移动。但是水平滚动允许图像左右移动以查看整个图像。

单击放大的图像会调用方法 "makeZoomInvisible",该方法会切换其可见性,将其清除并允许用户再次看到 activity 的主布局。

作为新的 Android 应用程序开发人员,这对我来说是最佳选择,因为它非常简单。为了避免切换活动,saving/pausing 当前 activity,实施第 3 方库以包括水平+垂直滚动,或捏缩放和拖动功能我能够实现我的应用程序所需的功能。

希望这对正在寻找简单解决方案的其他人有所帮助。

我知道您决定自己实现简单的转换而不使用第 3 方库。但如果其他人正在寻找更复杂的解决方案,我建议尝试 this library,它允许从 RecyclerView 项目缩放到带有动画的 ViewPager,并且还包括 zoom/pan/rotation 功能。

(注意,我是这个库的开发者)

简单使用示例:

  1. 将常规 ImageViewGestureImageView 添加到布局中:

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ImageView
            android:id="@+id/image_small"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <com.alexvasilkov.gestures.views.GestureImageView
            android:id="@+id/image_full"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </FrameLayout>
    
  2. 在两个视图中设置相同的图像:

    smallImage.setImageDrawable(...);
    fullImage.setImageDrawable(...);
    
  3. 开始动画:

    fullImage.getPositionAnimator().enter(smallImage, true);
    

有关详细信息,请参阅 documentation and sample project