博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
类似微信图片浏览,常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览...
阅读量:6165 次
发布时间:2019-06-21

本文共 5362 字,大约阅读时间需要 17 分钟。

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

特点 1.支持自定义图片加载框架。 2.支持重写activity,完成切换切换效果。 3.图片查看 缩放 拖拽下拉缩小退出。 4.支持自定义activity,Fragment。 5.支持类似微信朋友圈照片九宫格和微信聊天图片预览。 6.指示器类型选择 圆点模式(贝塞尔圆点指示器)和数字模式。 7.增加接口实体类。不在使用数据转化。 ####效果如下:

通过Gradle抓取:

compile 'com.ycjiang:ImagePreview:2.1.2'复制代码

1.本项目类库依赖第三库

注意: 由于的photoview有些事件冲突,将1.3.1版本源代码修改采用依赖本地。

compile 'com.android.support:support-fragment:25.3.1'      compile 'com.android.support:support-core-utils:25.3.1'复制代码

2.示例代码

注意:: 你实现自定义类,在你 app onCreate() 中

@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接口

public class UserViewInfo implements IThumbViewInfo {    private String url;  //图片地址    private Rect mBounds; // 记录坐标    private String user;//    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.使用自定义图片加载配置 注意这个必须实现哦。不然加载

1在你项目工程,创建一个类 实现接口IZoomMediaLoader接口 如下代码 demo 采用glide ,可以使用Picassor Imagloader 图片加载框架

public class TestImageLoader implements IZoomMediaLoader {    @Override    public void displayImage(Fragment context, String path, final MySimpleTarget
simpleTarget) { Glide.with(context).load(path).asBitmap().centerCrop().diskCacheStrategy(DiskCacheStrategy.SOURCE) .error(R.drawable.ic_default_image) .into(new SimpleTarget
() { @Override public void onResourceReady(Bitmap resource, GlideAnimation
glideAnimation) { simpleTarget.onResourceReady(resource); } @Override public void onLoadStarted(Drawable placeholder) { super.onLoadStarted(placeholder); simpleTarget.onLoadStarted(); } @Override public void onLoadFailed(Exception e, Drawable errorDrawable) { super.onLoadFailed(e, errorDrawable); simpleTarget.onLoadFailed(errorDrawable); } }); } @Override public void onStop(@NonNull Fragment context) { Glide.with(context).onStop(); } @Override public void clearMemory(@NonNull Context c) { Glide.get(c).clearMemory(); }复制代码

4.自定义Activity,Fragment

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

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

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

需要布局自定义重写onCreateView()。引用你自定义布局中添加 3 使用细节注意:

1.Activity和Fragment可以单独使用,也可以组合一起使用 2.自定义使用布局时,不在子类使用setContentView()方法 3.你在Activity 重写 setContentLayout(),返回你的自定义布局 4.在你布局内容 使用include 5.layout="@layout/activity_image_preview_photo" 预览布局添加你布局中 6.GPreviewBuilder 调用 from()方法后,调用to();指向你.to(CustomActivity.class)自定义预览activity 7.别忘了在AndroidManifest activity 使用主题

博客原文地址:http://www.apkbus.com/blog-928212-77251.html

转载地址:http://bluba.baihongyu.com/

你可能感兴趣的文章
查询个人站点的文章、分类和标签查询
查看>>
基础知识:数字、字符串、列表 的类型及内置方法
查看>>
JS图片跟着鼠标跑效果
查看>>
Leetcode 3. Longest Substring Without Repeating Characters
查看>>
416. Partition Equal Subset Sum
查看>>
app内部H5测试点总结
查看>>
[TC13761]Mutalisk
查看>>
while()
查看>>
常用限制input的方法
查看>>
IIS7下使用urlrewriter.dll配置
查看>>
并行程序设计学习心得1——并行计算机存储
查看>>
C++ 迭代器运算
查看>>
【支持iOS11】UITableView左滑删除自定义 - 实现多选项并使用自定义图片
查看>>
【算法笔记】多线程斐波那契数列
查看>>
java8函数式编程实例
查看>>
jqgrid滚动条宽度/列显示不全问题
查看>>
在mac OS10.10下安装 cocoapods遇到的一些问题
查看>>
css技巧
查看>>
Tyvj 1728 普通平衡树
查看>>
javascript性能优化
查看>>