Home

Awesome

ZoomPreviewPicture

本项目受Google官方demo Zooming a View 启发,实现了点击小图放大至全屏预览,退出全屏恢复至原来位置这两个过程的动画过渡。 常见应用场景如微信朋友圈照片九宫格和微信聊天图片,视频,gif预览,某些手机系统相册等viewpager图片查看 缩放 拖拽下拉缩小退出(效果同微信图片浏览)

Download

特点

通过Gradle抓取:

  compile 'com.ycjiang:ImagePreview:2.3.7'

1.本项目类库依赖第三库,()

注意: 由于的photoview 1.3.1版本源代码修改采用依赖本地。重新 photoview版本库回退到1.3.1版本。

2.3.5 新增图片只有没有放大缩小,才能拖拽图片返回,(场景预览放大情况,容易点击误返回)实例代码:

 GPreviewBuilder.from((Activity) context)
                         .setData(list)
                         .setIsScale(true)
      compile 'com.android.support:support-fragment:26.1.0'
      compile 'com.android.support:support-core-utils:26.1.0'

2.示例代码

    @Override
      public void onCreate() {
          super.onCreate();
          ZoomMediaLoader.getInstance().init(new TestImageLoader());
      }

1.使用方式

     GPreviewBuilder.from(GridViewCustomActivity.this)//activity实例必须
                            .to(CustomActivity.class)//自定义Activity 使用默认的预览不需要
                            .setData(mThumbViewInfoList)//集合
                            .setUserFragment(UserFragment.class)//自定义Fragment 使用默认的预览不需要
                            .setCurrentIndex(position)
                            .setSingleFling(false)//是否在黑屏区域点击返回
                            .setDrag(false)//是否禁用图片拖拽返回  
                            .setType(GPreviewBuilder.IndicatorType.Dot)//指示器类型
                            .start();//启动            

2.列表控件item点击事件添加相应代码。 (RecyclerView为例,demo有(ListView和GridView和九宫格控件实例代码))

     mRecyclerView.addOnItemTouchListener(new OnItemClickListener() {
            @Override
            public void SimpleOnItemClick(BaseQuickAdapter baseQuickAdapter, View view, int position) {
              //在你点击时,调用computeBoundsBackward()方法
                computeBoundsBackward(mGridLayoutManager.findFirstVisibleItemPosition());
              GPreviewBuilder.from(RecycleViewActivity.this)
                                .setData(mThumbViewInfoList)
                                .setCurrentIndex(position)
                                .setType(GPreviewBuilder.IndicatorType.Number)
                                .start();
            }
        });
    /**
     ** 查找信息
     * 从第一个完整可见item逆序遍历,如果初始位置为0,则不执行方法内循环
     */
    private void computeBoundsBackward(int firstCompletelyVisiblePos) {
        for (int i = firstCompletelyVisiblePos;i < mThumbViewInfoList.size(); i++) {
            View itemView = mGridLayoutManager.findViewByPosition(i);
            Rect bounds = new Rect();
            if (itemView != null) {
                ImageView thumbView = (ImageView) itemView.findViewById(R.id.iv);
                thumbView.getGlobalVisibleRect(bounds);
            }
            mThumbViewInfoList.get(i).setBounds(bounds);
        }
    }

2.构造实体类: 你的实体类实现IThumbViewInfo接口

注意:IThumbViewInfo 实现 Parcelable 接口 注意序列化化

public class UserViewInfo implements IThumbViewInfo {
    private String url;  //图片地址
    private Rect mBounds; // 记录坐标
    private String user;//
     private String videoUrl;//视频链接 //不为空是视频
     
    public UserViewInfo(String url) {
        this.url = url;
    }

    @Override
    public String getUrl() {//将你的图片地址字段返回
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    @Override
    public Rect getBounds() {//将你的图片显示坐标字段返回
        return mBounds;
    }
    
    public void setBounds(Rect bounds) {
        mBounds = bounds;
    }
   } 

3.使用自定义图片加载配置 注意这个必须实现哦。不然加载

public class TestImageLoader implements IZoomMediaLoader {
    @Override
    public void displayImage(Fragment context, String path,ImageView imageView, final MySimpleTarget<Bitmap> simpleTarget) {
            Glide.with(context).load(path)
                       .asBitmap()
                        .error(R.drawable.ic_default_image)
                        .listener(new RequestListener<String, Bitmap>() {
                            @Override
                            public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
                                simpleTarget.onLoadFailed(null);
                                return false;
                            }

                            @Override
                            public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {
                                simpleTarget.onResourceReady();
                                return false;
                            }
                        })
                        .into(imageView);
    }
        @Override
        public void displayGifImage(@NonNull Fragment context, @NonNull String path, ImageView imageView, @NonNull final MySimpleTarget simpleTarget) {
            Glide.with(context).load(path)
                   .asGif()
                    //可以解决gif比较几种时 ,加载过慢  //DiskCacheStrategy.NONE
                    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                    .error(R.drawable.ic_default_image)
                    .dontAnimate() //去掉显示动画
                    .listener(new RequestListener<String, GifDrawable>() {
                        @Override
                        public boolean onException(Exception e, String model, Target<GifDrawable> target, boolean isFirstResource) {
                            simpleTarget.onResourceReady();
                            return false;
                        }

                        @Override
                        public boolean onResourceReady(GifDrawable resource, String model, Target<GifDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                            simpleTarget.onLoadFailed(null);
                            return false;
                        }
                    })
                    .into(imageView);
        }
     @Override
     public void onStop(@NonNull Fragment context) {
           Glide.with(context).onStop();
     }
     @Override
     public void clearMemory(@NonNull Context c) {
              Glide.get(c).clearMemory();
     }

4.视频的支持

1.自定义播放视频控制

   GPreviewBuilder.from(VideoViewActivity.this)
                       .setData(mThumbViewInfoList)
                       .setCurrentIndex(position)
                       .setSingleFling(true)
                      .setOnVideoPlayerListener(new VideoClickListener(){
                           @Override
                           public void onPlayerVideo(String url) {
                               Log.d("onPlayerVideo",url);
                               Intent intent=new Intent(VideoViewActivity.this,VideoPlayerDetailedActivity.class);
                               intent.putExtra("url",url);
                               startActivity(intent);
                           }
                       })
                       .setType(GPreviewBuilder.IndicatorType.Number)
                       .start();

5.自定义Activity,Fragment

1.实现自定义Activity,实现你业务操作例如加入标题栏,ViewPager切换动画等等 .image.png

在你的布局中,引用类库核心布局

<include layout="@layout/activity_image_preview_photo" />

2.实现自定义Fragment 实现自定义业务 例如 长按保存图片,编辑图片,对图片说明内容等等 图片缩放效果采用PhotoView image.png

需要布局自定义重写onCreateView()。引用你自定义布局中添加 <include layout="@layout/fragment_image_photo_layout" />

3 使用细节注意:

1 Activity和Fragment可以单独使用,也可以组合一起使用

  1. 自定义使用布局时,不在子类使用setContentView()方法
  1. 你在Activity 重写 setContentLayout(),返回你的自定义布局
  1. 在你布局内容 使用include layout="@layout/activity_image_preview_photo" 预览布局添加你布局中
  1. GPreviewBuilder 调用 from()方法后,调用to();指向你.to(CustomActivity.class)自定义预览activity
  1. 别忘了在AndroidManifest activity 使用主题

示例: <!--注册自定义activity--> <activity android:name=".custom.CustomActivity" android:screenOrientation="portrait" android:theme="@android:style/Theme.Translucent.NoTitleBar" />

九宫格图片控件来自laobie

升级日志

2.3.4

2.2.8

2.2.7

2.2.6

2.2.5

2.2.3

2.2.2

2.2.1

升级日志

2.2.0

2.1.8

2.1.7

2.1.6

2.1.5

2.1.3

2.1.4

2.1.3

2.1.2

2.1.0

2.0.9

2.0.8

2.0.5

2.0.4

2.0.0

1.1.3

1.1.2

1.1.0

1.0.9

1.0.8

1.0.7

1.0.6

1.0.4

1.0.3

1.0.2

1.0.1