Code Monkey home page Code Monkey logo

pinchimageview's Introduction

PinchImageView

这是一个手势体验极棒但使用简单的ImageView控件,实现了手势放大缩小,平移等功能。PinchImageView继承于ImageView,可以在所有ImageView可以使用的情况下使用。全部的程序仅一个类文件,没有依赖任何特殊的外部库,非常易于集成。

QQ交流群:1011201647

Demo Video

demo

完整Demo视频:http://v.youku.com/v_show/id_XMTUyOTA0NzI3Ng==.html

APK下载:demo.apk

Demo说明

  1. 手势控件与ViewPlayer结合,当图片不在当前页时加载一张缩略图,切换到当前页后更新成大图。
  2. 点击缩略图切换到大图浏览使用放大动画过渡;当返回时从大图到缩略图使用动画过渡。无论大图到状态和小图的位置都保证过渡平滑。
  3. 浏览超大尺寸图片时使用分片加载策略保证不OOM。

Features

手势

  1. 单指滑动
  2. 单指滑动惯性
  3. 滑动触及边界停止
  4. 双击放大缩小
  5. 双击放大时双击点会尽量移动到控件中心
  6. 双手指手势放大缩小
  7. 缩放模式下可以移动图片
  8. 缩放模式下图片允许移动到边界之外
  9. 缩放模式下允许图片放大缩小超过边界尺寸
  10. 缩放模式下屏幕上有多于2个手指并且按照任意顺序抬起放下均不会引起错乱和不平滑
  11. 缩放模式下最后一个手指抬起如果图片处于边界之外或者尺寸过大过小会使用动画回弹到最接近的正确位置
  12. 回弹动画过程中允许立即通过手势进入缩放模式并且保持平滑

显示

  1. 允许显示任何ImageView能显示的内容,使用ImageView相同的api设置显示内容
  2. 允许任何情况下(包括手势进行中,动画进行中)替换显示内容(例如将低清图换成高清图),并且保持当前的缩放尺寸
  3. 允许设置矩形遮罩

扩展性

  1. 允许设置click,长按事件
  2. 允许设置图片大小位置变化的事件监听
  3. 允许获得图片当前变换过后的大小以及位置
  4. 允许获得PinchImageView当前的手势状态
  5. 允许通过api为图片执行缩放移动动画
  6. 允许通过api为图片遮罩执行移动缩放动画
  7. 允许通过override设置图片的最大放大尺寸
  8. 允许通过override设置图片双击之后要放大或缩小到的比例

Quick start

1) 将PinchImageView.java复制到项目中

2) 在布局文件中添加如下代码,它已经能显示一张资源中的图片了:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.boycy815.pinchimageview.PinchImageView
        android:id="@+id/pic"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/my_pic"/>
</RelativeLayout>

2) 接下来你可以直接把它作为ImageView取出来使用:

//作为ImageView取出来
ImageView imageView = (ImageView)findViewById(R.id.pic);
//可以使用任何ImageView支持的方式设置图片
imageView.setImageResource(R.drawable.my_pic);
//or...
imageView.setImageBitmap(bitmap);
//or...
imageView.setImageDrawable(drawable);
//or 你还能使用第三方图片加载库加载图片,如ImageLoader
imageLoader.displayImage("http://host.com/my_pic.jpg", imageView);

end

pinchimageview's People

Contributors

boycy815 avatar cameoh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pinchimageview's Issues

Picasso加载图片闪烁问题

在Demo应用中我将图片加载方式由ImageLoader 改 为Picasso方式出现闪烁问题。
//Global.getImageLoader(getApplicationContext()).displayImage(image.getUrl(100, 100), piv, thumbOptions);
Picasso.with(PagerActivity.this).load(image.getUrl(100,100)).into(piv);

//Global.getImageLoader(getApplicationContext()).displayImage(image.getUrl(image.getOriginWidth(), image.getOriginHeight()), piv, originOptions);
Picasso.with(PagerActivity.this).load(image.getUrl(image.getOriginWidth(), image.getOriginHeight())).into(piv);

如何兼容侧滑返回呢?

如何兼容侧滑返回呢?
没有双击放大前可以侧滑返回
双击放大后,滑动到边缘后才能侧滑返回

组件使用的是BGASwipeBackLayout

旋转后出现问题

matrix.postRotate(90, mImageView.getWidth()/2, mImageView.getHeight()/2);
mImageView.outerMatrixTo(matrix, 200);
当outerMatrixTo接口传递一个旋转的matrix时,放大后,图片消失在视图中。
有没有什么办法解决?

存在性能问题 一直渲染绘制

在GridView中使用发现PinchImageView一直在渲染绘制
只在显示数据的情况下有一直渲染绘制,点击后就没有一直渲染绘制,回来又有一直渲染绘制。
@OverRide
protected void onDraw(Canvas canvas) {
//在绘制前设置变换矩阵
if (isReady()) {// debug这一直返回true
……
setImageMatrix(getCurrentImageMatrix(matrix));
……
}
……
}

onDraw()->isReady()->setImageMatrix()->invalidate()->onDraw()->isReady()…进入死循环…onDraw()->isReady()->setImageMatrix()->invalidate()
手机打开Profile GUP rendering 选 On screen as bars 显示一直在渲染绘制

viewpager冲突

跟viewpager联用有冲突...使用你demo里面自己写的viewpager也是一样...

为什么要自己实现 ViewPager?

从可维护性的角度,更合适的做法是继承 ViewPager,重写部分方法。为什么要整个重写 ViewPager?希望能改进一下。

看代码过程中有一点疑问

Hi, 我是一个android程序员,github上发现了你做的PincnImageView这个神奇的库。
我在使用这个库的过程中,有一点疑问:

图片放大缩小的动画过程中,除了对matrix的放大缩小之外,为什么还要同步进行一个mask的放大缩小动画?

我尝试注视掉相关的代码,也能正常运行,出现预期的效果

能不能简单的给我解释一下,mask存在的意义....

谢谢啦

viewpager 结合

请问跟viewpager 结合的时候需要注意什么? 谢谢

长图展示不了

你好,这个控件很好用,我十分喜欢,但是不能展示长图,我想问问,能不能优化一下,让长图也能展示,谢谢

长图展示为问题

加载一个长图是可以让图片宽度适配整个屏幕,目前是中间一个长条。

图片宽度

求助:怎么获得图片缩放后的宽度 还有平移后左边未显示部分的宽度 谢谢

报错啦

This custom view should extend android.support.v7.widget.AppCompatImageView instead

图片缩放后得到imageview区域显示的图片

作者您好

本人在使用您的控件的过程中需要获取到缩放后imageview显示部分的图片,我看了您的代码,似乎没有找到api , 不知道该如何获取。

希望能得到您的回复与解答

谢谢!

如何获取点击位置对应的图片位置

// 对方法进行扩展~(直接改的源码)
public boolean onSingleTapConfirmed(MotionEvent e) {
//触发点击
if (mOnClickListener != null) {
mOnClickListener.onClick(PinchImageView.this);
}
if (null != imageOnClickListener){
// 获取触摸点的坐标 x, y
float x = e.getX();
float y = e.getY();
// 目标点的坐标
float dst[] = new float[2];
// 获取到ImageView的matrix
Matrix imageMatrix = getImageMatrix();
// 创建一个逆矩阵
Matrix inverseMatrix = new Matrix();
// 求逆,逆矩阵被赋值
imageMatrix.invert(inverseMatrix);
// 通过逆矩阵映射得到目标点 dst 的值
inverseMatrix.mapPoints(dst, new float[]{x, y});
float dstX = dst[0];
float dstY = dst[1];
// 获取图片的大小
float drawWidth = getDrawable().getBounds().width();
float drawHeight = getDrawable().getBounds().height();
float deviceX = dstX/drawWidth;
float deviceY = dstY/drawHeight;
// 判断dstX, dstY在Bitmap上的位置即可
if (!(deviceX<0 || deviceX>1 || deviceY<0 || deviceY>1)){
imageOnClickListener.onClick(deviceX,deviceY);
}
}
return true;
}

Glide拿不到监听回调

大图很多都是全屏参看的,全屏加载需要知道Loading,error,success状态. 当把该控件findviewbyid转化为Imageview后, 通过Glide加载,使用监听器RequestListener,发现拿不到任何回调,原因未知, findviewbyid为此自定义控件也不行, 用普通的Imageview就可以拿到回调. Glide版本3.7.0.

大图超卡

3MB的图片双指操作已经卡到不能接受

配合Glide使用

配合Glide使用加载小图的时候 会拉伸图片尺寸,请问怎么修改

有些超大的图片加载的时候不显示

图片地址: http://wimg.spriteapp.cn/x/640x400/ugc/2016/09/21/57e1bf635a4e2.jpg
这个图片的尺寸是 640*17195.

加载相对小一些的图片是非常完美的,但是上面提到的这张图片就是加载不进去 也不报错,我试了一下在photoView中是可以显示出来的,imageView中也是可以的.希望有时间可以看看这个问题.(不止上面提到的这一张图片有问题,还有其他的比如 http://wimg.spriteapp.cn/x/640x400/ugc/2016/09/23/57e45fc869587.jpg)

最近我也在看你的这个控件.非常的赞

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.