Android實(shí)現(xiàn)圖片查看功能

更新時(shí)間：2021年04月07日 08:39:19 作者：符號(hào)Rajesh

這篇文章主要介紹了Android如何實(shí)現(xiàn)圖片查看功能，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下

一、效果圖

二、支持功能

本地與網(wǎng)絡(luò)圖片
可用于各大圖片加載框架（Fresco，Glide，Picasso）
圖片縮放
放大后的圖片慣性滑動(dòng)
下拉縮小退出

三、核心實(shí)現(xiàn)方法

3.1 縮放 Matrix.postScale(float sx, float sy, float px, float py)

參數(shù)解析：

sx: 目標(biāo)寬度 / 現(xiàn)有寬度
sy: 目標(biāo)高度 / 現(xiàn)有高度
(px,py): 縮放焦點(diǎn)坐標(biāo)

使用示例：

/**
 * 縮放手勢(shì)監(jiān)聽
 */
private ScaleGestureDetector.OnScaleGestureListener mOnScaleGestureListener = new ScaleGestureDetector.SimpleOnScaleGestureListener() {

  @Override
  public boolean onScale(ScaleGestureDetector detector) {
    float scaleFactor = detector.getScaleFactor();
    float wantScale = mScale * scaleFactor;
    if (wantScale >= MIN_SCALE) {
      mScale = wantScale;
      focusX = detector.getFocusX();
      focusY = detector.getFocusY();
      mMatrix.postScale(scaleFactor, scaleFactor, focusX, focusY);
      invalidate();
    }
    return true;
  }
};

3.2 移動(dòng) Matrix.postTranslate(float dx, float dy)

參數(shù)解析：

dx: 目標(biāo)位置X坐標(biāo) - 當(dāng)前位置X坐標(biāo)
sy: 目標(biāo)位置Y坐標(biāo) - 當(dāng)前位置Y坐標(biāo)

使用示例：

/**
 * 簡(jiǎn)單手勢(shì)監(jiān)聽
 */
private GestureDetector.SimpleOnGestureListener mOnGestureListener = new GestureDetector.SimpleOnGestureListener() {

  ...

  @Override
  public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    if (!isAlwaysSingleTouch) {
      return true;
    }
    mMatrix.postTranslate(-distanceX, -distanceY);
    invalidate();
    return false;
  }

  ...
};

3.3 將Matrix的操作關(guān)聯(lián)到ImageView上

View提供onDraw的方法，可以操作到Canvas，Canvas提供concat的方法來(lái)關(guān)聯(lián)Matrix。每次針對(duì)Matrix有操作之后調(diào)用invalidate()刷新一下onDraw()即可。這就是個(gè)操作配置，而且是View早就提供好了的配置。

調(diào)用示例：

@Override
protected void onDraw(Canvas canvas) {
  int saveCount = canvas.save();
  canvas.concat(mMatrix);
  super.onDraw(canvas);
  canvas.restoreToCount(saveCount);
}

3.4 慣性滑動(dòng)

OverScroller.fling(int startX, int startY, int velocityX, int velocityY,int minX, int maxX, int minY, int maxY)

參數(shù)解析：

(startX, startY): 初始位置坐標(biāo)
(velocityX, velocityY): XY方向的初始速度
(minX, maxX, minY, maxY): 限定了移動(dòng)后的位置邊界

使用示例：

/**
 * 慣性滑動(dòng)工具類
 * 使用fling方法開始滑動(dòng)
 * 使用stop方法停止滑動(dòng)
 */
private class FlingUtil implements Runnable {
  private int mLastFlingX = 0;
  private int mLastFlingY = 0;
  private OverScroller mScroller;
  private boolean mEatRunOnAnimationRequest = false;
  private boolean mReSchedulePostAnimationCallback = false;

  /**
   * RecyclerView使用的慣性滑動(dòng)插值器
   * f(x) = (x-1)^5 + 1
   */
  private final Interpolator sQuinticInterpolator = new Interpolator() {
    @Override
    public float getInterpolation(float t) {
      t -= 1.0f;
      return t * t * t * t * t + 1.0f;
    }
  };

  public FlingUtil() {
    mScroller = new OverScroller(getContext(), sQuinticInterpolator);
  }

  @Override
  public void run() {
    disableRunOnAnimationRequests();
    final OverScroller scroller = mScroller;
    if (scroller.computeScrollOffset()) {
      final int y = scroller.getCurrY();
      int dy = y - mLastFlingY;
      final int x = scroller.getCurrX();
      int dx = x - mLastFlingX;
      mLastFlingY = y;
      mLastFlingX = x;
      constrainScrollBy(dx, dy);
      postOnAnimation();
    }
    enableRunOnAnimationRequests();
  }

  public void fling(int velocityX, int velocityY) {
    mLastFlingX = 0;
    mLastFlingY = 0;
    mScroller.fling(0, 0, velocityX, velocityY, Integer.MIN_VALUE, Integer.MAX_VALUE, Integer.MIN_VALUE, Integer.MAX_VALUE);
    postOnAnimation();
  }

  public void stop() {
    removeCallbacks(this);
    mScroller.abortAnimation();
  }

  private void disableRunOnAnimationRequests() {
    mReSchedulePostAnimationCallback = false;
    mEatRunOnAnimationRequest = true;
  }

  private void enableRunOnAnimationRequests() {
    mEatRunOnAnimationRequest = false;
    if (mReSchedulePostAnimationCallback) {
      postOnAnimation();
    }
  }

  void postOnAnimation() {
    if (mEatRunOnAnimationRequest) {
      mReSchedulePostAnimationCallback = true;
    } else {
      removeCallbacks(this);
      ViewCompat.postOnAnimation(ZoomImageView.this, this);
    }
  }
}

Scroller只提供在基于已有位置和已有速度下的位置計(jì)算，需要主動(dòng)調(diào)用scroller.getCurrY()和scroller.getCurrX()方法去獲取位置信息。
這里使用的是RecyclerView中的慣性滑動(dòng)的實(shí)現(xiàn)方式。

四、三個(gè)必要的細(xì)節(jié)處理

在有了上面的4個(gè)方法，基本上一個(gè)可縮放的ImageView所需要的功能都可以實(shí)現(xiàn)了。但是，一些細(xì)節(jié)方面的問(wèn)題也不可忽視，比如說(shuō)：

移動(dòng)不能超過(guò)圖片的邊緣

在ImageView的ScaleType為FIT_CENTER時(shí)，獲取真實(shí)的圖片內(nèi)容的寬高，畢竟需要縮放的是圖片的內(nèi)容

圖片是否移動(dòng)到最左側(cè)或最右側(cè)，用于ViewPager中的滑動(dòng)判斷

4.1 邊緣處理

在移動(dòng)前，校驗(yàn)此次的移動(dòng)是否會(huì)造成圖片內(nèi)容是否會(huì)移動(dòng)超出邊界。Canvas關(guān)聯(lián)的Matrix是針對(duì)整個(gè)ImageView的，我們需要知道ImageView中圖片部分在ImageView中的初始位置信息,如圖：

在得到圖片內(nèi)容在初始狀態(tài)下的展示區(qū)域Rect(a,b,c,d)后，使用Matrix提供的Matrix.mapRect(Rect)方法，可以得到經(jīng)歷縮放后的展示區(qū)域。得到內(nèi)容縮放后的展示區(qū)域后，與ImageView的展示區(qū)域Rect(0,0,W,H)作比較便可得出是否超出邊界。

示例方法：

/**
 * 獲得縮放移動(dòng)后的圖片內(nèi)容的位置區(qū)域
 *
 * @param matrix
 * @return RectF
 */
private RectF getScaledRect(Matrix matrix) {
  RectF rectF = new RectF(mImageRectF);
  //轉(zhuǎn)化為縮放后的相對(duì)位置
  matrix.mapRect(rectF);
  return rectF;
}

/**
 * 針對(duì)邊緣問(wèn)題，約束移動(dòng)
 *
 * @param dx
 * @param dy
 */
private void constrainScrollBy(float dx, float dy) {
  RectF rectF = getScaledRect(mMatrix);
  float scaleImageWidth = rectF.width();
  float scaleImageHeight = rectF.height();

  if (scaleImageWidth > mWidth) {
    //right
    if (rectF.right + dx < mWidth) {
      dx = -rectF.right + mWidth;
    }
    //left
    if (rectF.left + dx > 0) {
      dx = -rectF.left;
    }
  } else {
    //center
    dx = -rectF.left + ((float) mWidth - scaleImageWidth) / 2;
  }

  if (scaleImageHeight > mHeight) {
    //bottom
    if (rectF.bottom + dy < mHeight) {
      dy = -rectF.bottom + mHeight;
    }
    //top
    if (rectF.top + dy > 0) {
      dy = -rectF.top;
    }
  } else {
    //center
    dy = -rectF.top + ((float) mHeight - scaleImageHeight) / 2;
  }

  mMatrix.postTranslate(dx, dy);
  invalidate();
  checkBorder();
}

4.2 獲取ImageView中內(nèi)容的寬高

針對(duì)不同的網(wǎng)絡(luò)加載框架有不同的操作方式，這里一Fresco位示例：
PipelineDraweeControllerBuilder提供setControllerListener方法，可以設(shè)置一個(gè)圖片加載的監(jiān)聽。

示例代碼：

private ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {
  @Override
  public void onFinalImageSet(String id, @Nullable ImageInfo imageInfo, @Nullable Animatable anim) {
    if (imageInfo == null) {
      return;
    }
    int preWidth = imageInfo.getWidth();
    int preHeight = imageInfo.getHeight();
    if (preWidth != mWidth || preHeight != mHeight) {
      //獲取到最新的圖片內(nèi)容的寬高
      mWidth = preWidth;
      mHeight = preHeight;
    }
  }

  @Override
  public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) {
    Log.d("zhufeng", "Intermediate image received");
  }

  @Override
  public void onFailure(String id, Throwable throwable) {
    throwable.printStackTrace();
  }
};

public void loadImage(int resizeX, int resizeY, Uri uri) {
  ImageRequest request = ImageRequestBuilder
      .newBuilderWithSource(uri)
      .setResizeOptions(new ResizeOptions(resizeX, resizeY))
      .build();
  PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder().setControllerListener(controllerListener).setOldController(getController()).setImageRequest(request).build();
  setController(controller);
}

4.3 處理與ViewPager的滑動(dòng)沖突

需要明確：

左滑時(shí)，當(dāng)圖片內(nèi)容到達(dá)右側(cè)邊界，進(jìn)行圖片切換的處理（事件交由ViewPager處理）

右滑時(shí)，當(dāng)圖片內(nèi)容到達(dá)左側(cè)邊界，進(jìn)行圖片切換的處理（事件交由ViewPager處理）

剩下的ImageView自己處理

ImageView中的處理：
在約束移動(dòng)的時(shí)候標(biāo)記圖片是否已經(jīng)觸及左右邊界。并提供方法：

/**
 * 用于ViewPager滑動(dòng)攔截
 *
 * @param direction
 * @return
 */
public boolean canScroll(int direction) {
  return !((direction < 0 && isRightSide()) || (direction > 0 && isLeftSide()));
}

ViewPager中的處理：
在canScroll方法中進(jìn)行狀態(tài)判斷。重寫ViewPager：

/**
 * 相冊(cè)ViewPager
 *
 * @author zhufeng on 2017/10/22
 */
public class AlbumViewPager extends ViewPager {

  ...

  @Override
  protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
    if (v instanceof ZoomImageView) {
      return ((ZoomImageView) v).canScroll(dx) || super.canScroll(v, checkV, dx, x, y);
    }
    return super.canScroll(v, checkV, dx, x, y);
  }

  ...

}

源碼地址：

https://github.com/zhufeng1222/Gallery

到這里就結(jié)束啦.

以上就是Android實(shí)現(xiàn)圖片查看功能的詳細(xì)內(nèi)容，更多關(guān)于Android 圖片查看功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: