PinchImageView

English | 简体中文

A gesture-friendly and easy-to-use image pinch-zoom control. It extends ImageView, is contained in a single class file, has no external dependencies, and is lightweight and easy to integrate.

Demo

Demo Description

• Integrated with ViewPlayer, preloads thumbnail images when the image is not on the current page, and switches to high-definition images when the page is in view.
• Transition animations between thumbnail and full-size image viewing modes.
• Loads extremely large images in segments.
• Long image browsing mode.

Features

Gestures

• Single-finger swipe
• Single-finger swipe inertia
• Swipe stops at the boundary
• Double-tap to zoom in and out
• When double-tapping to zoom in, the tap point is centered as much as possible
• Pinch-zoom with two fingers to enter zoom mode
• In zoom mode, the image can be moved
• In zoom mode, the image can be moved beyond the boundaries
• In zoom mode, the image can be zoomed in or out beyond the boundary size
• Exit zoom mode (all fingers lifted), and the image rebounds to the nearest appropriate position

Display

• Compatible with ImageView API
• Supports image resolution switching
• Rectangular mask overlay

Extensibility

• Click and long-press events
• Listeners for image size and position changes
• Get current size and position
• Get current gesture state
• API to perform image zoom and move animations
• API to perform mask move and zoom animations
• Override to set the maximum zoom size for images
• Override to set the scale for zooming in or out after double-tap

Quick Start

1) Copy PinchImageView.java into your project.

2) Add the following code to your layout file; it can already display an image from resources:

width="matchparent" android:layoutheight="matchparent"> width="matchparent" android:layoutheight="matchparent" android:src="@drawable/my_pic"/>

3) Use it directly as an ImageView:

// Retrieve it as an ImageView ImageView imageView = (ImageView) findViewById(R.id.pic); // You can set the image using any method supported by ImageView imageView.setImageResource(R.drawable.my_pic); // or... imageView.setImageBitmap(bitmap); // or... imageView.setImageDrawable(drawable); // or you can even use third-party image loading libraries, like ImageLoader imageLoader.displayImage("http://host.com/my_pic.jpg", imageView);