Android实现图片查看功能

一、效果图

二、支持功能

  • 本地与网络图片
  • 可用于各大图片加载框架(Fresco,Glide,Picasso)
  • 图片缩放
  • 放大后的图片惯性滑动
  • 下拉缩小退出

三、核心实现方法

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

参数解析:

  • sx: 目标宽度 / 现有宽度
  • sy: 目标高度 / 现有高度
  • (px,py): 缩放焦点坐标

使用示例:

/**
 * 缩放手势监听
 */
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 移动 Matrix.postTranslate(float dx, float dy)

参数解析:

  • dx: 目标位置X坐标 - 当前位置X坐标
  • sy: 目标位置Y坐标 - 当前位置Y坐标

使用示例:

/**
 * 简单手势监听
 */
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的操作关联到ImageView上

View提供onDraw的方法,可以操作到Canvas,Canvas提供concat的方法来关联Matrix。每次针对Matrix有操作之后调用invalidate()刷新一下onDraw()即可。这就是个操作配置,而且是View早就提供好了的配置。

调用示例:

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

3.4 惯性滑动

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

参数解析:

  • (startX, startY): 初始位置坐标
  • (velocityX, velocityY): XY方向的初始速度
  • (minX, maxX, minY, maxY): 限定了移动后的位置边界

使用示例:

/**
 * 惯性滑动工具类
 * 使用fling方法开始滑动
 * 使用stop方法停止滑动
 */
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使用的惯性滑动插值器
   * 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只提供在基于已有位置和已有速度下的位置计算,需要主动调用scroller.getCurrY()和scroller.getCurrX()方法去获取位置信息。
这里使用的是RecyclerView中的惯性滑动的实现方式。

四、三个必要的细节处理

在有了上面的4个方法,基本上一个可缩放的ImageView所需要的功能都可以实现了。但是,一些细节方面的问题也不可忽视,比如说:

移动不能超过图片的边缘

在ImageView的ScaleType为FIT_CENTER时,获取真实的图片内容的宽高,毕竟需要缩放的是图片的内容

图片是否移动到最左侧或最右侧,用于ViewPager中的滑动判断

4.1 边缘处理

在移动前,校验此次的移动是否会造成图片内容是否会移动超出边界。Canvas关联的Matrix是针对整个ImageView的,我们需要知道ImageView中图片部分在ImageView中的初始位置信息,如图:

在得到图片内容在初始状态下的展示区域Rect(a,b,c,d)后,使用Matrix提供的Matrix.mapRect(Rect)方法,可以得到经历缩放后的展示区域。得到内容缩放后的展示区域后,与ImageView的展示区域Rect(0,0,W,H)作比较便可得出是否超出边界。

示例方法:

/**
 * 获得缩放移动后的图片内容的位置区域
 *
 * @param matrix
 * @return RectF
 */
private RectF getScaledRect(Matrix matrix) {
  RectF rectF = new RectF(mImageRectF);
  //转化为缩放后的相对位置
  matrix.mapRect(rectF);
  return rectF;
}

/**
 * 针对边缘问题,约束移动
 *
 * @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中内容的宽高

针对不同的网络加载框架有不同的操作方式,这里一Fresco位示例:
PipelineDraweeControllerBuilder提供setControllerListener方法,可以设置一个图片加载的监听。

示例代码:

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) {
      //获取到最新的图片内容的宽高
      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的滑动冲突

需要明确:

左滑时,当图片内容到达右侧边界,进行图片切换的处理(事件交由ViewPager处理)

右滑时,当图片内容到达左侧边界,进行图片切换的处理(事件交由ViewPager处理)

剩下的ImageView自己处理

ImageView中的处理:
在约束移动的时候标记图片是否已经触及左右边界。并提供方法:

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

ViewPager中的处理:
在canScroll方法中进行状态判断。重写ViewPager:

/**
 * 相册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

到这里就结束啦.

以上就是Android实现图片查看功能的详细内容,更多关于Android 图片查看功能的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android图片处理教程之全景查看效果实现

    前言 在玩头条的时候,现在我们会发现有很多的全景图的广告这样快看起来非常的酷.今天就来说说这个小效果的实现 PS:Android对于图片处理这块资源还是挺多的,之前用OpenGL制作图片的全景效果,耗时耗力,而且只能点击进去后看到,但是效果是非常的号,今天所写的是编写好的一个图片控件,只要拿来用就可以了.效果不是那么好,处理的之后就是一张图片截取中间部分放大再显示在屏幕中间,通过摆动手机查看被遮挡部分 如图:一开始图片是这样的 上面就是效果图了 实现方法如下 1:添加依赖 //全景图片 comp

  • android查看网络图片的实现方法

    本文实例为大家分享了android查看网络图片的具体代码,供大家参考,具体内容如下 需求描述: 输入一个 图片地址,下载到本地 展示. 效果展示 代码清单 MainActivity.java package com.example.www.checkimage; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.os.Han

  • Android 通过网络图片路径查看图片实例详解

    Android 通过网络图片路径查看图片实例详解 1.在项目清单中添加网络访问权限 <!--访问网络的权限--> <uses-permission android:name="android.permission.INTERNET"/> 2.获取网络图片数据 /** * 获取网络图片的数据 * @param path 网络图片路径 * @return * @throws Exception */ public static byte[] getImage(Str

  • Android 网络图片查看器与网页源码查看器

    在AndroidManifest.xml里面先添加权限访问网络的权限: <uses-permission android:name="android.permission.INTERNET"/> 效果图如下: 下面是主要代码: package com.hb.neting; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import android.ann

  • Android 实现WebView点击图片查看大图列表及图片保存功能

    在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片.本文将就这一系列问题的实现进行说明. 图示: 项目的知识点: 加载网页后如何捕捉网页中的图片点击事件: 获取点击的图片资源后进行图片显示,获取整个页面所有的图片: 支持查看上下一张的图片以及对图片缩放显示: 对图片进行保存: 其他:图片缓存的处理(不用每次都重新加载已查看过的图片) 项目代码结构: 前期准备(添加权限.依赖和混淆设置): 添加权限: <us

  • android自定义Camera拍照并查看图片

    本文实例为大家分享了android自定义Camera拍照并查看图片的具体代码,供大家参考,具体内容如下 1.打开相机 a.预览拍摄图片,需用到SurfaceView,并且实现其回调函数implements SurfaceHolder.Callback: activity_camera.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/

  • Android 简单的图片查看器源码实现

    本文介绍了Android 简单的图片查看器源码实现,分享给大家,具体如下: public class MainActivity extends Activity { private EditText et_path; private ImageView iv; //创建handler 对象 // private Handler handler = new Handler(){ // // //处理消息 // public void handleMessage(android.os.Message

  • Android仿百度图片查看功能

    我们知道,进入百度图片后,输入一个关键字后,首先看到的是很多缩略图,当我们点击某张缩略图时,我们就可以进入到大图显示页面,在大图显示页面,中包含了一个图片画廊,同时当前大图为刚刚我们点击的那张图片.现在我们看看在Android中如何实现类似的效果: 首先,我们需要有一个控件来显示缩略图,这里没有什么比GridView更加合适了. 配置文件如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout

  • android网络图片查看器简单实现代码

    本文实例为大家分享了android网络图片查看器的具体代码,供大家参考,具体内容如下 效果图: 1.输入一个图片url 2.转换成bitmap位图 3.展示到ImageView上 xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t

  • Android实现图片查看功能

    一.效果图 二.支持功能 本地与网络图片 可用于各大图片加载框架(Fresco,Glide,Picasso) 图片缩放 放大后的图片惯性滑动 下拉缩小退出 三.核心实现方法 3.1 缩放 Matrix.postScale(float sx, float sy, float px, float py) 参数解析: sx: 目标宽度 / 现有宽度 sy: 目标高度 / 现有高度 (px,py): 缩放焦点坐标 使用示例: /** * 缩放手势监听 */ private ScaleGestureDet

  • Android实现图片选择器功能

    本文实例为大家分享了Android实现图片选择器功能的具体代码,供大家参考,具体内容如下 图片选择功能用的是GitHub上的依赖库,网址 先来看下我运行的效果图如下所示: 该依赖库是Android平台上拍照/录像,图片/视频选择,编辑和压缩的一站式解决方案. 添加依赖,在app->build.gradle里面添加依赖 //图片/视频选择.预览.编辑与拍照 implementation 'com.github.guoxiaoxing:phoenix:1.0.15' 初始化: public clas

  • Qt利用ImageWatch实现图片查看功能

    使用Qt实现ImageWatch图片查看功能,图片放大可见RGB像素值.支持打开大图片,即打开一个几百MB甚至几GB的大图片. 1.什么是ImageWatch Visual Studio有专门针对OpenCV开发的插件,名叫ImageWatch,图片放大之后可以查看RGB的像素值. Image Watch 2019 - Visual Studio Marketplace Image Watch Help 2.得空自己用Qt仿照实现了一下这个功能: 纯粹Qt写的,没有使用Halcon和OpenCV

  • Android实现图片叠加功能

    前几天工作碰到这样一个需求,将二维码与一张海报叠加,并将合成后的海报分享到微信.由于经验不足,在实现功能的过程中,碰到了这样或那样的问题,我就来分享一下我碰到的坑. 一.图片叠加的处理 处理思路是在一张新建画布上分别将两张图片绘制出来 1.首先获取需要两张图片,并转成Bitmap类型 Bitmapbg = ((BitmapDrawable) getResources().getDrawable( R.drawable.background)).getBitmap(); Bitmapfg = ((

  • Android 微信图片分享功能

    我们都知道,通过 微信官方 分享sdk 支持图片分享,而且有多种方式.官方链接 可直接查看,不再赘述. 本文要解决的问题是,分享本地带二维码的图片给微信好友和朋友圈.朋友圈图片能够实现长按识别,给微信好友对话框的图片 在 iOS 可以正常识别,但是 Android 端却不能识别 ,为什么? 以下引用网友的回答: 经过分析和功能对比,android wechat app 中有两种图片浏览方式,图片预览,和图片本地发送后的打开查看(这个有识别动作)页面.预览图片功能中,不包含长按手势的识别功能,仔细

  • Android实现图片拖拉功能

    这次记录的是实现Android图片用手拖拉的功能,,供大家参考,具体内容如下 编译环境:eclipse Android版本4.0 创建工程过程略 实现图片在页面内的拖拉 原理图: 计算出手指移动的位移,通过matrix矩阵对象,将图片空间矩阵化之后根据手指位移让矩阵移动, 从而达到图片移动的效果 实现图片在页面内的拖拉 mian.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android实现图片区域裁剪功能

    今天做的就是关于实现图片的区域裁剪功能.由于项目功能的需要笔者需要实现PDF文档的阅读,并且就某个页面实现"图片"裁剪(一个页面理解为一张图片).笔者对着方面是一点儿也不熟悉,因此就得上网查资料了.之后笔者找到了Android可以通过调用系统相册.拍照实现图片的裁剪.缩放功能. 这一过程就像是在某个应用中上传头像,并对头像进行调整.现做一个记录与分享. 首先我们还是来看看实际的效果图吧! 一开始的界面: 接下来: 看看实际实现区域裁剪的效果吧?需要注意的是这是系统自带的功能来实现的.

  • viewpager+photoview实现图片查看器

    本文实例为大家分享了Android实现图片查看器的具体代码,供大家参考,具体内容如下 效果需要两个手指禁止缩放,所以没有光标,只能用手机投放电脑上录制动态图片: demo中实用了一个第三方的photoview,非常简单实用:可实现图片双击放大,手势放大缩小,当手指离开屏幕时如果图片小于原图可自动恢复原图大小,可实现点击监听,长按图片监听: 整个demo非常简单,整体就是一个activity,页面布局只有一个viewpager和textview <RelativeLayout xmlns:andr

随机推荐