类似微信图片浏览,常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览
2018-03-15 16:10
579 查看
本项目受Google官方demo Zooming a View 启发,实现了点击小图放大至全屏预览,退出全屏恢复至原来位置这两个过程的动画过渡。 常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览,某些手机系统相册等viewpager图片查看 缩放 拖拽下拉缩小退出(效果同微信图片浏览)
特点
1.支持自定义图片加载框架。
2.支持重写activity,完成切换切换效果。
3.图片查看 缩放 拖拽下拉缩小退出。
4.支持自定义activity,Fragment。
5.支持类似微信朋友圈照片九宫格和微信聊天图片预览。
6.指示器类型选择 圆点模式(贝塞尔圆点指示器)和数字模式。
7.增加接口实体类。不在使用数据转化。 ####效果如下:
通过Gradle抓取:
注意: 由于的photoview有些事件冲突,将1.3.1版本源代码修改采用依赖本地。
注意:: 你实现自定义类,在你 app onCreate() 中
1在你项目工程,创建一个类 实现接口IZoomMediaLoader接口 如下代码 demo 采用glide ,可以使用Picassor Imagloader 图片加载框架
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
特点
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<Bitmap> simpleTarget) { Glide.with(context).load(path).asBitmap().centerCrop().diskCacheStrategy(DiskCacheStrategy.SOURCE) .error(R.drawable.ic_default_image) .into(new SimpleTarget<Bitmap>() { @Override public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> 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
相关文章推荐
- 类似iOS自带相册应用的图片浏览的实现
- Android仿微信照片选择器实现预览查看图片
- Android应用实现点击back键时,使应用返回桌面,而不是退出应用,类似微信,qq等聊天软件
- 模仿微信朋友圈 仿微信js-sdk wx.previewImage javascript实现,支持图片预览,滑动切换,双指缩放,图片缓存 h5 html5 js
- previewImage.js实现类似微信朋友圈图片预览功能
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案一
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案二
- 在类似qq或者微信聊天中。如何根据不同的手机发送图片
- android 类似qq空间微博微信九宫格图片
- 模仿微信朋友圈 图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存
- 在类似qq或者微信聊天中。如何根据不同的手机发送图片
- MessageDisplayKit 一个类似微信App的IM应用,拥有发送文字、图片、语音、视频、地理位置消息,管理本地通信录、分享朋友圈、漂流交友、摇一摇和更多有趣的功能。
- Android聊天页面发送图片定制(类似微信)
- 将view剪切为各种形状的view(类似微信聊天图片展示)。
- 03-UI 图片浏览,九宫格,应用管理界面搭建
- 自己研究的新软件HappyTime(类似微信聊天)
- php实现微信中的图片合并-九宫格图片
- 自定义控件一百行代码实现微信朋友圈九宫格图片显示
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
- (转)单例模式(Singleton)的常见应用场景