Code Monkey home page Code Monkey logo

photoview's Introduction

PhotoView 图片浏览缩放控件

一个流畅的photoview

效果图

PhotoView PhotoView

注意

由于facebook的Fresco图片加载组件所加载出来的drawable图片并非真实的drawable,无法直接获取图片真实宽高,也无法直接响应ImageMatrix的变换, 且根据Fresco文档的介绍,在后续的版本中,DraweeView会直接继承自View,所有暂不考虑支持Fresco。 对于其他第三方图片加载库如Glide,ImageLoader,xUtils都是支持的

使用

1.Gradle添加依赖 (推荐)

dependencies {
    compile 'com.bm.photoview:library:1.4.1'
}

(或者也可以将项目下载下来,将Info.java和PhotoView.java两个文件拷贝到你的项目中,不推荐)

2.xml添加

 <com.bm.library.PhotoView
     android:id="@+id/img"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:scaleType="centerInside"
     android:src="@drawable/bitmap1" />

3.java代码

PhotoView photoView = (PhotoView) findViewById(R.id.img);
// 启用图片缩放功能
photoView.enable();
// 禁用图片缩放功能 (默认为禁用,会跟普通的ImageView一样,缩放功能需手动调用enable()启用)
photoView.disenable();
// 获取图片信息
Info info = photoView.getInfo();
// 从普通的ImageView中获取Info
Info info = PhotoView.getImageViewInfo(ImageView);
// 从一张图片信息变化到现在的图片,用于图片点击后放大浏览,具体使用可以参照demo的使用
photoView.animaFrom(info);
// 从现在的图片变化到所给定的图片信息,用于图片放大后点击缩小到原来的位置,具体使用可以参照demo的使用
photoView.animaTo(info,new Runnable() {
       @Override
       public void run() {
           //动画完成监听
       }
   });
// 获取/设置 动画持续时间
photoView.setAnimaDuring(int during);
int d = photoView.getAnimaDuring();
// 获取/设置 最大缩放倍数
photoView.setMaxScale(float maxScale);
float maxScale = photoView.getMaxScale();
// 设置动画的插入器
photoView.setInterpolator(Interpolator interpolator);

关于

若遇到使用上的问题,请先翻看Issues,大部分问题是已经有人提出过的。(如#9,#5)
若没找到相关的问题,可以先在Issues中提出,这样以便其他人遇到同样问题时可快速找到答案。
若长时间未回复,可邮件给我[email protected]

版本

v1.4.0

  • 增加对普通ImageView的支持,可通过PhotoView的静态方法getImageViewInfo(ImageView)从一个普通的ImageView中获取Info,参照ImageViewActivity
  • 添加长按事件的监听,setOnLongClickListener()
  • 提高图片缩放到屏幕边缘的情况下滑动的流畅性
  • 新增get/setAnimaDuring() get/setMaxScale 获取设置动画的持续时间和图片最大缩放倍数
  • 通过setInterpolator可设置动画插入器

v1.3.6

  • 增加图片的旋转功能
  • 版本号命名改变

v2.0.7

  • 宽高属性可以设置为wrap_content,添加对adjustViewBounds属性的支持
  • 修复某些情况下会闪动
  • 增加对ScaleType.FIT_START,FIT_END对animaFrom的支持

v2.0.0

  • 添加animaTo,animaFrom方法,支持图片点击放大缩小浏览功能
  • 添加enable()和disenable() 打开和关闭触摸缩放方法,默认打开 (当普通ImageView使用的时候建议关闭触摸缩放功能)
  • 支持所有ScaleType属性

v1.0

photoview's People

Contributors

bm-x avatar bryant1410 avatar thiasap avatar viviwen123 avatar zhoulujue 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

photoview's Issues

混淆

大哥混淆怎么弄 keep 哪些class

小图使用 android:scaleType="centerCrop"问题

小图使用 android:scaleType="centerCrop" ,放大和缩小动画 都不是以我设置Imageview的大小开始,而是从 比我设置的宽高要大的地方开始 小图使用的是普通的Imageview

查看大图的问题

作者你好,项目中有点击查看大图的需求,但是之前用的不好点击消失,然后看到作者的开源项目感觉相当不错,但是也遇到了一点小问题,我是在ListView里面点击一张图片查看大图,如果点击的Item在下方,点击显示大图时,图片不是居中显示的,而是在屏幕的上方显示的,如果点击的Item在上方,点击显示图片,图片显示在屏幕下方,这个问题该怎么解决啊?

点击大图问题

作者你好,我使用了你的控件后再点击大图后偶尔会出现大图显示的位置上方或者下方会出现一点白色的部分,对同一张图片来说都会有时候正常有时候又会有白色的部分出现,大图加载我用的是Glide加载的。看你之前的回复说把placeholder设置为空但是对我的好像没效果啊

点击查看大图问题

先加载ScaleType.CENTER_INSIDE类型的缩略图
然后获取网络上的大图使用Glide加载的
将加载好的图片通过mPhotoView.setImageDrawable(resource);
设置到photoview上第一次进入没有问题但是第二次进入位置会向下移动

效果图的第二张,demo中貌似没有

效果图第二张点击图片 是启动activity里面放一个viewpager,还是隐藏的viewpager。如果启动activity的话,貌似缩放的就不能利于lib自带的了,但是如果要自定义里面的内容,比如里面有:下载,收藏,分享按钮等,使用隐藏view显得层级太多。不知道作者如何实现的

点击显示大图时定位不准并且设置黑色背景点击时会有黑色横条

作者您好,非常感谢您开源出来的项目,已经在项目中投入使用,使用过程中发现在recyclerview中子条目点击显示大图时时不时大图的位置不准确,不知道是不是有什么问题.而且在设置大图背景为黑色是,点击显示大图,会最先出现黑色横条,然后在进行动画,不知道有没有改进的办法?

从大图会到小图的时候 缩小动画没有有点问题

使用alertDialog 显示大图 ,在缩小的过程中,左右缩小到和小图一样的宽度,但高度缩小没有缩小到原来的高度,感觉是按照大图的比例缩小的 动画完成时,高度还比小图的高度高很多。

animaTo时info报空指针异常

activity.bigImage.setOnClickListener(new View.OnClickListener() {
@OverRide
public void onClick(View v) {
activity.bigImage.animaTo(info, new Runnable() {//这个时候的info还不为空
@OverRide
public void run() {
if (null == info){//这里info不为空,无log
Log.i("vicky","info怎么会为空的?bigImageClick");
}
activity.bigImage.setVisibility(View.GONE);
}
});
}
});

但是到了这里就报空指针异常
public void animaTo(Info info, Runnable completeCallBack) {
if (isInit) {
mTranslate.stop();
mTranslateX = 0;
mTranslateY = 0;
if (null == info){//info为空,有log
Log.i("vicky","info怎么会为空的?PhotoView的animaTo处");
}
float tcx = info.mRect.left + info.mRect.width() / 2;//info.mRect出错,应该是info为空了
float tcy = info.mRect.top + info.mRect.height() / 2;

长按事件冲突了,photoView.setOnLongClickListener

点击事件能正确响应,长按事件没有任何响应

view.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Sys.toast(getApplicationContext(), "点击了");
                    }
                });

view.setOnLongClickListener(new View.OnLongClickListener() {
                    @Override
                    public boolean onLongClick(View v) {
                        Sys.toast(getApplicationContext(),"长按了");
                        return true;
                    }
                });

使用photoview对图片在scaletype=FitStart时有问题,会抖动。

对Photoview设置scaletype为fitstart,在显示图片的时候,一进去都是正常,但是,只要往下拉一下,图片立刻回聚焦到**(与centerCrop)效果类似,图片这样的瞬间位移就会感觉抖一下。这个现象只有图片高度比屏幕高长的情况下才会明显,只要比全屏高的图片就可以。第一下往下拉都会抖,随后的拉动就没事了。

补:这应该是一个刻意的设置,我发现小的图片,稍微拉一下,也会自动从fitstart到centerInside状态。自动聚焦到屏幕**。

photoview不能嵌套在scrollview里

希望的效果是,用scrollview把大图包住,可以上下拖动,也可以放大,旋转!但是现在放进去,发现photoview和scrollview互相干涉。

FIT_START模式下长图有点小问题

FIT_START模式下,如果图片是竖向的长方形,图片加载出来后,显示最顶部的部分,正常,然后这时如果往上化大力一点,图片就会飘出去很远了,导致一片背景色,必须手动拉回来,就恢复正常。

viewpageractivity示例中,如果把图放大,然后view.disenable()锁定图片放大功能后viewpager的滑动只能在边缘滑动了。

修改代码如:
public class ViewPagerActivity extends Activity {

private ViewPager mPager;

private int[] imgsId = new int[]{R.mipmap.aaa, R.mipmap.bbb, R.mipmap.ccc, R.mipmap.ddd, R.mipmap.ic_launcher, R.mipmap.image003};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_view_pager);

    mPager = (ViewPager) findViewById(R.id.pager);
    mPager.setPageMargin((int) (getResources().getDisplayMetrics().density * 15));
    mPager.setAdapter(new PagerAdapter() {
        @Override
        public int getCount() {
            return imgsId.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            final PhotoView view = new PhotoView(ViewPagerActivity.this);
            view.enable();

            //实现点击后琐定图片,先放大图片,然后再点击这张图片以后会锁定图处的放大功能,然后用viewpager滑动就会有问题
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    view.disenable();
                }
            });

            view.setScaleType(ImageView.ScaleType.FIT_CENTER);
            view.setImageResource(imgsId[position]);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    });
}

}

旋转问题

1、要实现点击按钮,直接旋转图片(不通过手势),我是设置了里面的mDegrees='角度',然后调用onUp()方法。在PAD可以正常旋转,可是到了手机端就不行了?
2、手机端如果用手势旋转一下,然后再点击按钮就可以正常旋转。每次都必须得先手势,再点按钮就行。请问,那哪部分代码是必须要执行一边才可以执行onUp啊? 小白请教一下~

目标PhotoView的位置问题

目标PhotoView可能存在不同的布局环境中,比如自身设置了 对应的 layout_margin值 或者 包裹其的parent GroupView有对应的padding值,就导致执行 animteFrom 或者 animateTo 目标PhotoView的位置有偏差,我这边由于不是在你原始工程上开发没法PR。
可能以下方法可以作为优化方案:

        ViewGroup parent = (ViewGroup) getParent();//获取直接的父类,便于获取对应padding
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams(); //获取自身的margin参数

animateFrom 方法中 change

 float ocx = info.mRect.left + info.mRect.width() / 2;
 float ocy = info.mRect.top + info.mRect.height() / 2;
 mTranslate.withTranslate(0, 0, (int) (tcx - mScaleCenter.x), (int) (tcy - mScaleCenter.y));

to

 float ocx = info.mRect.left + info.mRect.width() / 2 - params.leftMargin - parent.getPaddingLeft();
 loat ocy = info.mRect.top + info.mRect.height() / 2 - params.topMargin - parent.getPaddingTop();
 mTranslate.withTranslate(0, 0, (int) (tcx - mScaleCenter.x - params.leftMargin - parent.getPaddingLeft()), (int) (tcy - mScaleCenter.y - params.topMargin - parent.getPaddingTop()));

同样在 animateTo方法中 change

mTranslate.withTranslate(0, 0, (int) (tcx - mScaleCenter.x), (int) (tcy - mScaleCenter.y));

to

mTranslate.withTranslate(0, 0, (int) (tcx - mScaleCenter.x - params.leftMargin - parent.getPaddingLeft()), (int) (tcy - mScaleCenter.y - params.topMargin - parent.getPaddingTop()));

希望这个能被作者采纳或者给出更好的适配方案..
BTW: Nice library...

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.