安卓开发ViewPager图片预览之图片的放大缩小，移动，切换教程 / iVAN

1，自由的放大和缩小

2.双击放大与缩小

3.放大以后可以进行自由的移动

4.处理与ViewPager之间的的事件冲突

需要用到的知识点

1.Matrix (图片放大，缩小需要用到矩阵)

2.ScaleGestureDetector(检测用户多指触控时缩放的手势)

3.GestureDetector:检测用户双击时需要做的一些处理

4.事件分发机制（当我们图片放大时，我们的图片是可以左右移动的，在ViewPager左右切换图片，两者会有冲突）。

----------------------------------------------------代码设计

第一课

第一步：自定义ImageView 实现图片自适应控件大小：（效果是：图片小于控件大小时，放大到控件大小，图片大于控件大小时，自动缩小到控件大小）

package com.example.viewpagerimage;

//实现监听器OnGlobalLayoutListener，监听图片是否加载完成
public class MyImageView extends ImageView implements OnGlobalLayoutListener{

private boolean mOnce;//判断是否初始化
private float mInitScale;//初始化时缩放的值
private float mMidScale;//双击放大到达的值
private float mMaxScale;//放大的最大值

private Matrix mScaleMatrix;
public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  //init
  mScaleMatrix = new Matrix();
  setScaleType(ScaleType.MATRIX);
  //当图片加载时，图片可能很大，也可能很小，需要让图片自适应屏幕大小，当图片太大时自动缩小到屏幕大小，当图片太小时放大到屏幕大小。

}

public MyImageView(Context context, AttributeSet attrs) {
this(context, attrs,0);
// TODO Auto-generated constructor stub
}

public MyImageView(Context context) {
  this(context,null);
  // TODO Auto-generated constructor stub
}
@Override
protected void onAttachedToWindow() {
  // TODO Auto-generated method stub
  super.onAttachedToWindow();//当View 显示在屏幕上时调用
  getViewTreeObserver().addOnGlobalLayoutListener(this);//注册接口
}
@SuppressWarnings("deprecation")
@Override
protected void onDetachedFromWindow() {
  // TODO Auto-generated method stub
  super.onDetachedFromWindow();//当View从屏幕上移除时调用
  getViewTreeObserver().removeGlobalOnLayoutListener(this);//移除接口
}
/**
* 获取ImageView加载完成的图片
*/
@Override
public void onGlobalLayout() {
  // 全局的布局完成后调用
  if(!mOnce){
   //得到控件的宽和高
   int width = getWidth();
   int height = getHeight();
   //得到我们的图片以及宽和高
   Drawable d = getDrawable();
   if(d == null)
    return;

   int dw = d.getIntrinsicWidth();
   int dh = d.getIntrinsicHeight();
   float scale = 1.0f;//缩放值
   //如果图片的宽度大于控件高度，但是宽度小于控件的宽度，将其缩小
   if(dw > width && dh < height){
    scale = width*1.0f/dw;
   }
   else if(dh > height && dw < width){
    scale = height*1.0f /dh;
   }

   else if(dw > width && dh > height){
    scale = Math.min(width*1.0f/dw, height*1.0f/dh);
   }
   else if(dw < width && dh < height){
    scale = Math.min(width *1.0f/dw, height*1.0f/dh);
   }
   /*
    * 得到初始化时缩放的比例
    * */

   mInitScale = scale;
   mMaxScale = mInitScale * 4;
   mMidScale = mInitScale * 2;

   //将图片移动到当前控件的中心
   int dx = getWidth()/2 - dw /2;
   int dy = getHeight()/2 - dh/2;

   mScaleMatrix.postTranslate(dx, dy);//平移
   mScaleMatrix.postScale(mInitScale, mInitScale,width/2,height/2);//缩放,后面两个参数是缩放的中心点
   setImageMatrix(mScaleMatrix);

mOnce = true;

}
}
}

布局文件使用：

    <com.example.viewpagerimage.MyImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="matrix"
        android:src="@drawable/viewpatherimage" />

</LinearLayout>

第二步：给自定义控件添加支持手指触控缩放的功能：（支持手指触控放大）

因为涉及到手势触摸事件所以要实现OnScaleGestureListener,OnTouchListener这两个接口。

声明成员变量： private ScaleGestureDetector mScaleGestureDetector;//捕获用户多指触控缩放的比例

在构造函数中初始化：

mScaleGestureDetector = new ScaleGestureDetector(context, this);
setOnTouchListener(this);

添加方法：

/**\
* 获取当前图片的缩放值
* @return
*/
public float getScale(){
  float[] values = new float[9];
  mScaleMatrix.getValues(values);
  return values[Matrix.MSCALE_X];

}

实现接口中的方法：

//缩放的区间，initScale maxScale
@Override
public boolean onScale(ScaleGestureDetector detector) {
  // TODO Auto-generated method stub
  float scale = getScale();
  float scaleFactor = detector.getScaleFactor();//得到缩放的值

  if(getDrawable() == null){
   return true;
  }
  //缩放范围的控制
  if((scale < mMaxScale && scaleFactor > 1.0f) || (scale > mInitScale && scaleFactor < 1.0f)){
   if(scale * scaleFactor < mInitScale){
    scaleFactor = mInitScale / scale;//当手指缩放小于最小值时，默认显示最小的比例
   }
   if(scale * scaleFactor > mMaxScale){//当手指缩放大于于最大值时，默认显示最大的比例
    scale = mMaxScale/scale;
   }
   //缩放
   mScaleMatrix.postScale(scaleFactor, scaleFactor, getWidth()/2, getHeight()/2);
   setImageMatrix(mScaleMatrix);
  }
  return true;//设置完成返回true保证事件能够进行
}

@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
// TODO Auto-generated method stub
return true;//必须返回true
}

@Override
public void onScaleEnd(ScaleGestureDetector detector) {
// TODO Auto-generated method stub

}

@Override
public boolean onTouch(View v, MotionEvent event) {
  // TODO Auto-generated method stub
  mScaleGestureDetector.onTouchEvent(event);//把event传递给mscaleGestureDetector处理
  return true;//必须返true
}

全部代码如下：

package com.example.viewpagerimage;

import android.content.Context;
import android.graphics.Matrix;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.ScaleGestureDetector.OnScaleGestureListener;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ImageView;
import android.view.View.OnTouchListener;

//实现监听器OnGlobalLayoutListener，监听图片是否加载完成
public class MyImageView extends ImageView implements OnGlobalLayoutListener, OnScaleGestureListener,OnTouchListener{

private boolean mOnce;//判断是否初始化
private float mInitScale;//初始化时缩放的值
private float mMidScale;//双击放大到达的值
private float mMaxScale;//放大的最大值

private ScaleGestureDetector mScaleGestureDetector;//捕获用户多指触控缩放的比例

  mScaleGestureDetector = new ScaleGestureDetector(context, this);

  setOnTouchListener(this);
  //当图片加载时，图片可能很大，也可能很小，需要让图片自适应屏幕大小，当图片太大时自动缩小到屏幕大小，当图片太小时放大到屏幕大小。

}

public MyImageView(Context context, AttributeSet attrs) {
this(context, attrs,0);
// TODO Auto-generated constructor stub
}

   mInitScale = scale;
   mMaxScale = mInitScale * 4;
   mMidScale = mInitScale * 2;

   //将图片移动到当前控件的中心
   int dx = getWidth()/2 - dw /2;
   int dy = getHeight()/2 - dh/2;

   mScaleMatrix.postTranslate(dx, dy);//平移
   mScaleMatrix.postScale(mInitScale, mInitScale,width/2,height/2);//缩放,后面两个参数是缩放的中心点
   setImageMatrix(mScaleMatrix);

mOnce = true;

  }
}
/**\
* 获取当前图片的缩放值
* @return
*/
public float getScale(){
  float[] values = new float[9];
  mScaleMatrix.getValues(values);
  return values[Matrix.MSCALE_X];

}
//缩放的区间，initScale maxScale
@Override
public boolean onScale(ScaleGestureDetector detector) {
  // TODO Auto-generated method stub
  float scale = getScale();
  float scaleFactor = detector.getScaleFactor();//得到缩放的值

@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
// TODO Auto-generated method stub
return true;//必须返回true
}

@Override
public void onScaleEnd(ScaleGestureDetector detector) {
// TODO Auto-generated method stub

}

目前实现的效果：无论手指触摸哪里都是以中心点位中心开始缩放的。

下面实现的效果是：以手指触控的任意点为中心开始缩放

第三课（第三步）：支持以手指触控的任意点为中心开始缩放

关键部分是在缩放的时候不断进行边界检测，防止放大后缩小后出现白边：

/**
* 在缩放的时候进行边界控制范围位置控制
*/

private void checkBorderAndCenterWhenScale() {
  // TODO Auto-generated method stub
  RectF rect = getMatrixRectF();
  float deltaX = 0;
  float deltaY = 0;

  float width = getWidth();
  float height = getHeight();
  //缩放时进行边界检测，放在出现白边
  if(rect.width() >= width){
   if(rect.left > 0){//处理左边的空白
    deltaX = -rect.left;
   }
   if(rect.right < width){//处理右边的空白
    deltaX = (int) (width - rect.right);
   }
  }
  if(rect.height() >= height){
   if(rect.top > 0){
    deltaY = -rect.top;
   }
   if(rect.bottom < height){
    deltaY = height - rect.bottom;
   }
  }
  //如果宽度或高度小于控件的宽或高，则让其居中
  if(rect.width() < width){
   deltaX = width/2f -rect.right + rect.width()/2f;
  }
  if(rect.height() < height){
   deltaY = height /2f -rect.bottom + rect.height()/2f;
  }
  mScaleMatrix.postTranslate(deltaX, deltaY);

}

全部代码：

package com.example.viewpagerimage;

import android.content.Context;
import android.graphics.Matrix;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.ScaleGestureDetector.OnScaleGestureListener;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ImageView;

//实现监听器OnGlobalLayoutListener，监听图片是否加载完成
public class MyImageView extends ImageView implements OnGlobalLayoutListener, OnScaleGestureListener,OnTouchListener{

private boolean mOnce;//判断是否初始化
private float mInitScale;//初始化时缩放的值
private float mMidScale;//双击放大到达的值
private float mMaxScale;//放大的最大值

private ScaleGestureDetector mScaleGestureDetector;//捕获用户多指触控缩放的比例

mScaleGestureDetector = new ScaleGestureDetector(context, this);

setOnTouchListener(this);
//当图片加载时，图片可能很大，也可能很小，需要让图片自适应屏幕大小，当图片太大时自动缩小到屏幕大小，当图片太小时放大到屏幕大小。

}

public MyImageView(Context context, AttributeSet attrs) {
this(context, attrs,0);
// TODO Auto-generated constructor stub
}

   mInitScale = scale;
   mMaxScale = mInitScale * 4;
   mMidScale = mInitScale * 2;

   //将图片移动到当前控件的中心
   int dx = getWidth()/2 - dw /2;
   int dy = getHeight()/2 - dh/2;

   mScaleMatrix.postTranslate(dx, dy);//平移
   mScaleMatrix.postScale(mInitScale, mInitScale,width/2,height/2);//缩放,后面两个参数是缩放的中心点
   setImageMatrix(mScaleMatrix);

mOnce = true;

  }
}
/**
* 获取当前图片的缩放值
* @return
*/
public float getScale(){
  float[] values = new float[9];
  mScaleMatrix.getValues(values);
  return values[Matrix.MSCALE_X];

  if(getDrawable() == null){
   return true;
  }
  //缩放范围的控制
  if((scale < mMaxScale && scaleFactor > 1.0f) || (scale > mInitScale && scaleFactor < 1.0f)){
   if(scale * scaleFactor < mInitScale){
    scaleFactor = mInitScale / scale;//当手指缩放小于最小值时，默认显示最小的比例
   }
   if(scale * scaleFactor > mMaxScale){//当手指缩放大于于最大值时，默认显示最大的比例
    scale = mMaxScale/scale;
   }
   //缩放,缩放中心是手指触控的地方
   mScaleMatrix.postScale(scaleFactor, scaleFactor, detector.getFocusX(),detector.getFocusY());
   checkBorderAndCenterWhenScale();

   setImageMatrix(mScaleMatrix);
  }
  return true;//设置完成返回true保证事件能够进行
}

/**
* 获得图片放大缩小以后的宽和高以及l r t b
* @return
*/
private RectF getMatrixRectF(){
  Matrix matrix = mScaleMatrix;
  RectF recF = new RectF();
  Drawable d = getDrawable();
  if(d != null){
   recF.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
   matrix.mapRect(recF);
  }
  return recF;
}
/**
* 在缩放的时候进行边界控制范围位置控制
*/

private void checkBorderAndCenterWhenScale() {
  // TODO Auto-generated method stub
  RectF rect = getMatrixRectF();
  float deltaX = 0;
  float deltaY = 0;

}

@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
// TODO Auto-generated method stub
return true;//必须返回true
}

@Override
public void onScaleEnd(ScaleGestureDetector detector) {
// TODO Auto-generated method stub

}

时间： 2024-09-17 14:13:29

安卓开发ViewPager图片预览之图片的放大缩小，移动，切换教程

安卓开发ViewPager图片预览之图片的放大缩小，移动，切换教程的相关文章

急请教web开发中遇到的图片预览问题

微信小程序开发之图片预览

【Android开发】经典范例1-实现仿Windows7图片预览窗格效果

本地图片预览图片不能正常显示

Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)_Android

基于HTML5的可预览多图片Ajax上传_AJAX相关

js实现纯前端的图片预览_javascript技巧

基于HTML5的可预览多图片Ajax上传

JavaScript教程:详细解析网页图片预览效果