是否有一种通用的方法来显示大图,并使用户能够放大、缩小和平移图像?
到目前为止,我找到了两种方法:
覆盖ImageView,对于这样一个常见的问题,这似乎有点太多了。 使用webview,但对整体布局的控制较少等等。
是否有一种通用的方法来显示大图,并使用户能够放大、缩小和平移图像?
到目前为止,我找到了两种方法:
覆盖ImageView,对于这样一个常见的问题,这似乎有点太多了。 使用webview,但对整体布局的控制较少等等。
当前回答
In Response to Janusz original question, there are several ways to achieve this all of which vary in their difficulty level and have been stated below. Using a web view is good, but it is very limited in terms of look and feel and controllability. If you are drawing a bitmap from a canvas, the most versatile solutions that have been proposed seems to be MikeOrtiz's, Robert Foss's and/or what Jacob Nordfalk suggested. There is a great example for incorporating the android-multitouch-controller by PaulBourke, and is great for having the multi-touch support and alltypes of custom views.
就我个人而言,如果你只是简单地绘制一个画布到一个位图,然后在ImageView中显示它,并希望能够使用多点触摸缩放和移动,我发现MikeOrtiz的解决方案是最简单的。然而,出于我的目的,他提供的Git代码似乎只在他的TouchImageView自定义ImageView类是唯一的子类或提供布局参数时才能工作:
android:layout_height="match_parent"
android:layout_height="match_parent"
不幸的是,由于我的布局设计,我需要“wrap_content”为“layout_height”。当我把它改成这样的时候,图像在底部被裁剪了,我不能滚动或缩放到裁剪的区域。 所以我看了一下ImageView的源代码,看看Android是如何实现“onMeasure”的,并改变MikeOrtiz的以适应。
@Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//**** ADDED THIS ********/////
int w = (int) bmWidth;
int h = (int) bmHeight;
width = resolveSize(w, widthMeasureSpec);
height = resolveSize(h, heightMeasureSpec);
//**** END ********///
// width = MeasureSpec.getSize(widthMeasureSpec); // REMOVED
// height = MeasureSpec.getSize(heightMeasureSpec); // REMOVED
//Fit to screen.
float scale;
float scaleX = (float)width / (float)bmWidth;
float scaleY = (float)height / (float)bmHeight;
scale = Math.min(scaleX, scaleY);
matrix.setScale(scale, scale);
setImageMatrix(matrix);
saveScale = 1f;
// Center the image
redundantYSpace = (float)height - (scale * (float)bmHeight) ;
redundantXSpace = (float)width - (scale * (float)bmWidth);
redundantYSpace /= (float)2;
redundantXSpace /= (float)2;
matrix.postTranslate(redundantXSpace, redundantYSpace);
origWidth = width - 2 * redundantXSpace;
origHeight = height - 2 * redundantYSpace;
// origHeight = bmHeight;
right = width * saveScale - width - (2 * redundantXSpace * saveScale);
bottom = height * saveScale - height - (2 * redundantYSpace * saveScale);
setImageMatrix(matrix);
}
这里的resolveSize(int,int)是一个实用程序,用于将所需的大小与MeasureSpec施加的约束进行协调,其中:
参数:
- size How big the view wants to be
- MeasureSpec Constraints imposed by the parent
返回:
- The size this view should be."
本质上提供了一种行为更类似于图像加载时的原始ImageView类。还可以进行更多的更改,以支持修改纵横比的各种屏幕。但现在我希望这能有所帮助。感谢MikeOrtiz的原始代码,做得很好。
其他回答
@Robert Foss, @Mike Ortiz,非常感谢你们的工作。我合并了你的工作,并完成了罗伯特的android> 2.0课程与迈克的额外工作。
由于我的工作,我提出了Android触摸画廊,基于ViewPager和使用修改的TouchImageView。图片通过URL加载,你可以缩放和拖动它们。你可以在这里找到它https://github.com/Dreddik/AndroidTouchGallery
In Response to Janusz original question, there are several ways to achieve this all of which vary in their difficulty level and have been stated below. Using a web view is good, but it is very limited in terms of look and feel and controllability. If you are drawing a bitmap from a canvas, the most versatile solutions that have been proposed seems to be MikeOrtiz's, Robert Foss's and/or what Jacob Nordfalk suggested. There is a great example for incorporating the android-multitouch-controller by PaulBourke, and is great for having the multi-touch support and alltypes of custom views.
就我个人而言,如果你只是简单地绘制一个画布到一个位图,然后在ImageView中显示它,并希望能够使用多点触摸缩放和移动,我发现MikeOrtiz的解决方案是最简单的。然而,出于我的目的,他提供的Git代码似乎只在他的TouchImageView自定义ImageView类是唯一的子类或提供布局参数时才能工作:
android:layout_height="match_parent"
android:layout_height="match_parent"
不幸的是,由于我的布局设计,我需要“wrap_content”为“layout_height”。当我把它改成这样的时候,图像在底部被裁剪了,我不能滚动或缩放到裁剪的区域。 所以我看了一下ImageView的源代码,看看Android是如何实现“onMeasure”的,并改变MikeOrtiz的以适应。
@Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//**** ADDED THIS ********/////
int w = (int) bmWidth;
int h = (int) bmHeight;
width = resolveSize(w, widthMeasureSpec);
height = resolveSize(h, heightMeasureSpec);
//**** END ********///
// width = MeasureSpec.getSize(widthMeasureSpec); // REMOVED
// height = MeasureSpec.getSize(heightMeasureSpec); // REMOVED
//Fit to screen.
float scale;
float scaleX = (float)width / (float)bmWidth;
float scaleY = (float)height / (float)bmHeight;
scale = Math.min(scaleX, scaleY);
matrix.setScale(scale, scale);
setImageMatrix(matrix);
saveScale = 1f;
// Center the image
redundantYSpace = (float)height - (scale * (float)bmHeight) ;
redundantXSpace = (float)width - (scale * (float)bmWidth);
redundantYSpace /= (float)2;
redundantXSpace /= (float)2;
matrix.postTranslate(redundantXSpace, redundantYSpace);
origWidth = width - 2 * redundantXSpace;
origHeight = height - 2 * redundantYSpace;
// origHeight = bmHeight;
right = width * saveScale - width - (2 * redundantXSpace * saveScale);
bottom = height * saveScale - height - (2 * redundantYSpace * saveScale);
setImageMatrix(matrix);
}
这里的resolveSize(int,int)是一个实用程序,用于将所需的大小与MeasureSpec施加的约束进行协调,其中:
参数:
- size How big the view wants to be
- MeasureSpec Constraints imposed by the parent
返回:
- The size this view should be."
本质上提供了一种行为更类似于图像加载时的原始ImageView类。还可以进行更多的更改,以支持修改纵横比的各种屏幕。但现在我希望这能有所帮助。感谢MikeOrtiz的原始代码,做得很好。
我刚刚整合了Robert Foss的TouchImageView:它完美地开箱即用!谢谢!
我只是修改了一些代码,所以我可以从我的layout.xml实例化它。
只需添加两个构造函数
public TouchImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public TouchImageView(Context context) {
super(context);
init(context);
}
并将旧的构造函数转换为init方法:
private void init(Context context){
//...old code ofconstructor of Robert Moss's code
}
我使用WebView和加载图像从内存通过
webview.loadUrl("file://...")
WebView处理所有的平移、缩放和滚动。如果你使用wrap_content, webview不会比图像大,也不会显示白色区域。 WebView更好的ImageView;)
我改编了一些代码来创建一个支持多点触摸的TouchImageView(>2.1)。 它的灵感来自于《Hello, Android!》(第3版)
它包含在以下3个文件中 TouchImageView.java WrapMotionEvent.java EclairMotionEvent.java
TouchImageView.java
import se.robertfoss.ChanImageBrowser.Viewer;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
public class TouchImageView extends ImageView {
private static final String TAG = "Touch";
// These matrices will be used to move and zoom image
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
// We can be in one of these 3 states
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;
// Remember some things for zooming
PointF start = new PointF();
PointF mid = new PointF();
float oldDist = 1f;
Context context;
public TouchImageView(Context context) {
super(context);
super.setClickable(true);
this.context = context;
matrix.setTranslate(1f, 1f);
setImageMatrix(matrix);
setScaleType(ScaleType.MATRIX);
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent rawEvent) {
WrapMotionEvent event = WrapMotionEvent.wrap(rawEvent);
// Dump touch event to log
if (Viewer.isDebug == true){
dumpEvent(event);
}
// Handle touch events here...
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
Log.d(TAG, "mode=DRAG");
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
Log.d(TAG, "oldDist=" + oldDist);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
Log.d(TAG, "mode=ZOOM");
}
break;
case MotionEvent.ACTION_UP:
int xDiff = (int) Math.abs(event.getX() - start.x);
int yDiff = (int) Math.abs(event.getY() - start.y);
if (xDiff < 8 && yDiff < 8){
performClick();
}
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
Log.d(TAG, "mode=NONE");
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
// ...
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
} else if (mode == ZOOM) {
float newDist = spacing(event);
Log.d(TAG, "newDist=" + newDist);
if (newDist > 10f) {
matrix.set(savedMatrix);
float scale = newDist / oldDist;
matrix.postScale(scale, scale, mid.x, mid.y);
}
}
break;
}
setImageMatrix(matrix);
return true; // indicate event was handled
}
});
}
public void setImage(Bitmap bm, int displayWidth, int displayHeight) {
super.setImageBitmap(bm);
//Fit to screen.
float scale;
if ((displayHeight / bm.getHeight()) >= (displayWidth / bm.getWidth())){
scale = (float)displayWidth / (float)bm.getWidth();
} else {
scale = (float)displayHeight / (float)bm.getHeight();
}
savedMatrix.set(matrix);
matrix.set(savedMatrix);
matrix.postScale(scale, scale, mid.x, mid.y);
setImageMatrix(matrix);
// Center the image
float redundantYSpace = (float)displayHeight - (scale * (float)bm.getHeight()) ;
float redundantXSpace = (float)displayWidth - (scale * (float)bm.getWidth());
redundantYSpace /= (float)2;
redundantXSpace /= (float)2;
savedMatrix.set(matrix);
matrix.set(savedMatrix);
matrix.postTranslate(redundantXSpace, redundantYSpace);
setImageMatrix(matrix);
}
/** Show an event in the LogCat view, for debugging */
private void dumpEvent(WrapMotionEvent event) {
// ...
String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE",
"POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
StringBuilder sb = new StringBuilder();
int action = event.getAction();
int actionCode = action & MotionEvent.ACTION_MASK;
sb.append("event ACTION_").append(names[actionCode]);
if (actionCode == MotionEvent.ACTION_POINTER_DOWN
|| actionCode == MotionEvent.ACTION_POINTER_UP) {
sb.append("(pid ").append(
action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
sb.append(")");
}
sb.append("[");
for (int i = 0; i < event.getPointerCount(); i++) {
sb.append("#").append(i);
sb.append("(pid ").append(event.getPointerId(i));
sb.append(")=").append((int) event.getX(i));
sb.append(",").append((int) event.getY(i));
if (i + 1 < event.getPointerCount())
sb.append(";");
}
sb.append("]");
Log.d(TAG, sb.toString());
}
/** Determine the space between the first two fingers */
private float spacing(WrapMotionEvent event) {
// ...
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
}
/** Calculate the mid point of the first two fingers */
private void midPoint(PointF point, WrapMotionEvent event) {
// ...
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
}
}
WrapMotionEvent.java
import android.view.MotionEvent;
public class WrapMotionEvent {
protected MotionEvent event;
protected WrapMotionEvent(MotionEvent event) {
this.event = event;
}
static public WrapMotionEvent wrap(MotionEvent event) {
try {
return new EclairMotionEvent(event);
} catch (VerifyError e) {
return new WrapMotionEvent(event);
}
}
public int getAction() {
return event.getAction();
}
public float getX() {
return event.getX();
}
public float getX(int pointerIndex) {
verifyPointerIndex(pointerIndex);
return getX();
}
public float getY() {
return event.getY();
}
public float getY(int pointerIndex) {
verifyPointerIndex(pointerIndex);
return getY();
}
public int getPointerCount() {
return 1;
}
public int getPointerId(int pointerIndex) {
verifyPointerIndex(pointerIndex);
return 0;
}
private void verifyPointerIndex(int pointerIndex) {
if (pointerIndex > 0) {
throw new IllegalArgumentException(
"Invalid pointer index for Donut/Cupcake");
}
}
}
EclairMotionEvent.java
import android.view.MotionEvent;
public class EclairMotionEvent extends WrapMotionEvent {
protected EclairMotionEvent(MotionEvent event) {
super(event);
}
public float getX(int pointerIndex) {
return event.getX(pointerIndex);
}
public float getY(int pointerIndex) {
return event.getY(pointerIndex);
}
public int getPointerCount() {
return event.getPointerCount();
}
public int getPointerId(int pointerIndex) {
return event.getPointerId(pointerIndex);
}
}