Android仿微信朋友圈图片展示效果,图片查看器
现在越来越多的APP都会有图片展示,这里是模仿微信朋友圈图片展示效果,图片查看器。
主要分为4部分:
1.透明Activity
2.计算gridView下iamgeView Item所在位置
3.一张图大小
4.图片展示动画
1.透明Activity
(1)设置透明Activity的theme
<style name="AppTheme.Transparent" parent="@style/AppTheme"><item name="android:windowBackground">@android:color/transparent</item><item name="android:windowNoTitle">true</item><item name="android:windowFullscreen">true</item><item name="android:windowIsTranslucent">true</item><item name="android:windowContentOverlay">@null</item><item name="android:backgroundDimEnabled">false</item></style>
(2)解决全屏,非全屏间切换导致的界面重绘(方法封装在BaseActivity,只要继承即可)
在setContentView前
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
public void hideStatusBar() {WindowManager.LayoutParams attrs = getWindow().getAttributes();attrs.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;getWindow().setAttributes(attrs);is_full_screen = false;((FrameLayout.LayoutParams)rootView.getLayoutParams()).topMargin = 0;}
public void showStatusBar() {WindowManager.LayoutParams attrs = getWindow().getAttributes();attrs.flags &= ~WindowManager.LayoutParams.FLAG_FULLSCREEN;getWindow().setAttributes(attrs);is_full_screen = true;((FrameLayout.LayoutParams)rootView.getLayoutParams()).topMargin = SystemConfig.getTop();}
在BaseActivity里setContentView后
if (!is_full_screen){((FrameLayout.LayoutParams)rootView.getLayoutParams()).topMargin = SystemConfig.getTop();}
在
setContentView后要改变状态栏的显示隐藏调用
记录当前IamgeFragment以及上一个,下一个,为了按返回键的时候能够调用当前amgeFragment关闭的动画
要重写透明Activity的返回键调用关闭动画 2.计算gridView下iamgeView Item所在位置
/*** 当前位置获取首item x,y** @param position* @return*/public int[] buildOriginXY(int position) {int[] location = new int[2];int buildX = x - (position % column_num)* (item_width + horizontal_space);int buildY = y - (position / column_num)* (item_hight + vertical_space);location[0] = buildX;location[1] = buildY;return location;}/*** 根据首item x,y获取当前item 的x,y** @param position* @return*/public int[] buildXY(int position) {int[] location = new int[2];int buildX = x + (position % column_num)* (item_width + horizontal_space);int buildY = y + (position / column_num)* (item_hight + vertical_space);location[0] = buildX;location[1] = buildY;return location;}
3.一张图大小 (1).设置gridview的
if (list.get(position).getImageDatas().size() == 1) {viewHold.gvPic.setNumColumns(1);viewHold.gvPic.getLayoutParams().width = StringUtil.getThumbSize(list.get(position).getImageDatas().get(0) + "").x;} else {viewHold.gvPic.setNumColumns(3);viewHold.gvPic.getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;}
(2).设置gridview 的imageVIewitem 多图的图片大小
imageSize = (SystemConfig.getWidth() - NormalUtil.dip2px(mContext, 90)- 2*NormalUtil.dip2px(mContext, 3))/3;
其中SystemConfig.getWidth() - NormalUtil.dip2px(mContext,90)是gridView的宽度,
NormalUtil.dip2px(mContext, 3)是horizontalSpacing,2是gridView默认列数-1,/3中的3是gridView默认列数
if (getCount() == 1) {Point sizeData = StringUtil.getThumbSize(imageUrl);width = sizeData.x;hight = sizeData.y;}else {width = itemSize;hight = itemSize;}
4.图片展示动画 (1)判断原图是否已经加载过
boolean originalBitmapExist = BitmapUtil.checkImageExist(StringUtil.getOrg(imgData));if (originalBitmapExist) {RelativeLayout.LayoutParams photoViewParams = (RelativeLayout.LayoutParams) photoView.getLayoutParams();photoViewParams.topMargin = (int)y;photoViewParams.leftMargin = (int)x;photoView.setLayoutParams(photoViewParams);loadOrgImg(StringUtil.getOrg(imgData),false);}else {loadThumbImg(StringUtil.getThumb(imgData, width, hight));}
(2).第一次加载背景透明度渐变
/*** 第一次加载背景透明度渐变*/public void setBgAlphaAnimation(){if (position == ((ShowPictureActivity)mContext).getPositon() && ((ShowPictureActivity)mContext).isFirst()){((ShowPictureActivity)mContext).setFirst(false);v_parent.setBackgroundColor(Color.BLACK);bgAlphaAnimation = new AlphaAnimation(0, (float) 1);bgAlphaAnimation.setDuration(NORMAL_SCALE_DURATION);bgAlphaAnimation.setFillAfter(true);v_parent.startAnimation(bgAlphaAnimation);}}
(3).缩略图从默认位置到中心位置动画 居中后才加载大图
/*** 缩略图从默认位置到中心位置的动画* 通过改变photoview 的 topMargin ,leftMargin*/public void centerView(){//第一张看到的图且第一次加载的动画if (((ShowPictureActivity)mContext).isFirst() && ((ShowPictureActivity)mContext).getPositon() == position) {setBgAlphaAnimation();valueAnimator = ValueAnimator.ofFloat(0,100);valueAnimator.addUpdateListener(new AnimatorUpdateListener() {//持有一个IntEvaluator对象,方便下面估值的时候使用private IntEvaluator mEvaluator = new IntEvaluator();@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float currentValue = (float) animation.getAnimatedValue();//计算当前进度占整个动画过程的比例,浮点型,0-1之间float fraction = currentValue / 100f;RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) photoView.getLayoutParams();/*** 估算当前值*/params.topMargin = mEvaluator.evaluate(fraction, y, SystemConfig.getHight()/2-hight/2);//从当前y到居中params.leftMargin = mEvaluator.evaluate(fraction, x, SystemConfig.getWidth()/2-width/2);//从当前x到居中photoView.setLayoutParams(params);}});valueAnimator.setDuration((long) (NORMAL_SCALE_DURATION));valueAnimator.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animator) {}@Overridepublic void onAnimationEnd(Animator animator) {errorTime = 0;/*** 居中动画结束,加载原图*/loadOrgImg(StringUtil.getOrg(imgData),true);}@Overridepublic void onAnimationCancel(Animator animator) {}@Overridepublic void onAnimationRepeat(Animator animator) {}});valueAnimator.start();}else {//不是第一张或第一次,直接显示居中位置RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) photoView.getLayoutParams();params.topMargin = (int) SystemConfig.getHight()/2-hight/2;params.leftMargin = (int) SystemConfig.getWidth()/2-width/2;photoView.setLayoutParams(params);errorTime = 0;loadOrgImg(StringUtil.getOrg(imgData),true);}}
(4).photoview当前位置放大到全屏动画
/*** photoview当前位置放大到全屏的动画* 通过改变photoview 的 topMargin ,leftMargin,height,width* @param x photoview的左上角x坐标* @param y photoview的左上角y坐标* @param from_center 是否从中心来的*/public void fullScreen(final int x,final int y,boolean from_center){//int x, int y,int width,int hightLogger.i(Tag, Tag+"fullScreenrx:"+x+"y:"+y);if (((ShowPictureActivity)mContext).isFirst() && ((ShowPictureActivity)mContext).getPositon() == position|| (from_center && ((ShowPictureActivity)mContext).getCurrentPosition() == position)) {//第一张要显示的图或者居中的且是当前看到的位置setBgAlphaAnimation();valueAnimator = ValueAnimator.ofFloat(0,100);valueAnimator.addUpdateListener(new AnimatorUpdateListener() {//持有一个IntEvaluator对象,方便下面估值的时候使用private IntEvaluator mEvaluator = new IntEvaluator();@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float currentValue = (float) animation.getAnimatedValue();//计算当前进度占整个动画过程的比例,浮点型,0-1之间float fraction = currentValue / 100f;RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) photoView.getLayoutParams();params.height = mEvaluator.evaluate(fraction, hight, SystemConfig.getHight());//从当前缩略图的高度到满屏params.width = mEvaluator.evaluate(fraction, width, SystemConfig.getWidth());//从当前缩略图的宽度到满屏params.topMargin = mEvaluator.evaluate(fraction, y, 0);//从photoview的y到0params.leftMargin = mEvaluator.evaluate(fraction, x, 0);//从photoview的x到0photoView.setLayoutParams(params);}});valueAnimator.setDuration((long) (NORMAL_SCALE_DURATION));valueAnimator.start();}else {RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) photoView.getLayoutParams();params.leftMargin = (int) 0;params.topMargin = (int) 0;params.height = (int) SystemConfig.getHight();params.width = (int) SystemConfig.getWidth();photoView.setLayoutParams(params);}}
(5),关闭动画
/*** 关闭动画*/public void close(){/*** 背景透明*/v_parent.setBackgroundColor(Color.TRANSPARENT);photoView.setBackgroundColor(Color.TRANSPARENT);mAttacher.setScaleType(ScaleType.CENTER_CROP);/*if (closeScaleType == 1) {mAttacher.setScaleType(ScaleType.CENTER_INSIDE);}else {mAttacher.setScaleType(ScaleType.CENTER_CROP);}*/final int closeHight = bitMapHight;//结束时的高度以photoView 加载的bitmap高度为准final int closeMarginTop = (SystemConfig.getHight() - bitMapHight)/2;valueAnimator = ValueAnimator.ofFloat(0,100);valueAnimator.addUpdateListener(new AnimatorUpdateListener() {//持有一个IntEvaluator对象,方便下面估值的时候使用private IntEvaluator mEvaluator = new IntEvaluator();@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float currentValue = (float) animation.getAnimatedValue();//计算当前进度占整个动画过程的比例,浮点型,0-1之间float fraction = currentValue / 100f;RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) photoView.getLayoutParams();params.height = mEvaluator.evaluate(fraction, closeHight, hight);//从当前满屏到缩略图的高度params.width = mEvaluator.evaluate(fraction, SystemConfig.getWidth(), width);//从当前满屏到缩略图的宽度params.topMargin = mEvaluator.evaluate(fraction, closeMarginTop, y);//从bitmap的左上角y坐标到缩略图的yparams.leftMargin = mEvaluator.evaluate(fraction, 0, x);//从bitmap的左上角x坐标到缩略图的xphotoView.setLayoutParams(params);}});valueAnimator.setDuration((long) (NORMAL_SCALE_DURATION));valueAnimator.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animator) {}@Overridepublic void onAnimationEnd(Animator animator) {((ShowPictureActivity)mContext).finishAct();}@Overridepublic void onAnimationCancel(Animator animator) {}@Overridepublic void onAnimationRepeat(Animator animator) {}});valueAnimator.start();}
demo以及代码下载地址
http://download.csdn.net/detail/yyyangyy/9777892
第一次发表文章,欢迎指正
@Overridepublic void onPageSelected(int position) {Logger.i(Tag,Tag +" onPageSelected position:"+position);if (position + 1 == currentPosition){imageFragmentNext = imageFragmentCurrent;imageFragmentCurrent = imageFragmentPre;}else if (position - 1 == currentPosition){imageFragmentPre = imageFragmentCurrent;imageFragmentCurrent = imageFragmentNext;}currentPosition = position;}
@Overridepublic Fragment getItem(int position) {Logger.i(Tag,Tag +" ImagePagerAdapter getItem position:"+position);ImageFragment imageFragment = ImageFragment.newInstance(imgDatas.get(position),item_width, item_hight, position, buildXY(position)[0],buildXY(position)[1]);/*** 记录最多3个imageFragment*/if (position == viewPager.getCurrentItem()){imageFragmentCurrent = imageFragment;}else if (position + 1 == viewPager.getCurrentItem()){imageFragmentPre = imageFragment;}else if (position - 1 == viewPager.getCurrentItem()){imageFragmentNext = imageFragment;}return imageFragment;// return fragments.get(position);}
showStatusBar();
hideStatusBar();
Android仿微信朋友圈图片展示效果,图片查看器相关推荐
- 高仿微信朋友圈图片展示效果 ImageWatcher
ImageWatcher 大图查看,它能够 * 动画顺畅切换到查看状态,同样动画顺畅退出查看界面 * 左右滑动多图查看 * 仿微信下拽退出 示例下载 在 previews文件夹下 app-debug. ...
- Android仿微信朋友圈图片上传选择器布局
标题有点绕口,直接上一个效果图,如果符合你的需求的请在往下看,避免浪费你的时间 当当当当,标红的区域就是今天我们要干的活了 ,搞起来! 思路: 对android有点了解的人都知道在列表显示中我们可以使 ...
- Android仿微信朋友圈图片查看器
转载请注明出处:http://blog.csdn.net/allen315410/article/details/40264551 看博文之前,希望大家先打开自己的微信点到朋友圈中去,仔细观察是不是发 ...
- Android自定义View分享——仿微信朋友圈图片合并效果
写在前面 笔者近来在学习Android自定义View,收集了一些不算复杂但又"长得"还可以的自定义View效果实现,之前分享过两个效果:一个水平的进度条,一个圆形温度显示器,如果你 ...
- Android仿微信朋友圈图片打开退出过渡动画
大家好,最近又是不断地改需求,终于闲下来了.看到微信朋友圈的图片打开退出的过渡动画,正好我们项目中也有类似功能,但是转换效果干巴巴的,麻麻赖赖的,一点都不圆润.没关系,盘他!先来看我实现的效果: 实现 ...
- android点击加号,Android仿微信朋友圈点击加号添加图片功能
本文为大家分享了类似微信朋友圈,点击+号图片,可以加图片功能,供大家参考,具体内容如下 xml: xmlns:app="http://schemas.android.com/apk/res- ...
- Android 仿微信朋友圈图片效果
转载:https://www.cnblogs.com/zhujiabin/p/7184001.html 最新项目需求展示图片,在网上找了一圈,发现这个比较好用,和大家分享一下.但是还有个图片的点击滑动 ...
- Android 仿微信朋友圈9宫格图片展示多选图片
转载请标明出处: http://blog.csdn.net/airsaid/article/details/51026447 本文出自:[周游的博客] 申明 该项目后续没有维护,并且里面存在一些 Bu ...
- 安卓开发仿微信图片拖拽_Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动)...
[实例简介] Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动) [实例截图] [核心代码] ImageDemo-2014-02-18 └── ImageDemo-2014-02-18 ├ ...
最新文章
- ORACLE 添加删除列脚本
- IOS 移除storyboard
- 在微信小程序中调用本地接口
- Java Date 和 Calendar 实例
- 我的javaweb学习之旅--html常用块级标签
- 3.爱跑步的蜗壳人动态(下同)
- 基于KD树的K近邻算法(KNN)算法
- Android之开发中用到的几个多线程解析
- html制作彩虹_制作彩虹
- 商汤科技2020数据分析师0820笔试题目整理
- C++调用Go方法的字符串传递问题及解决方案
- Kali Linux 秘籍 第三章 高级测试环境
- RFGSD DF DS
- 2.页面截长图工具-FireShot
- 小米android安装包下载安装,小米应用商店安装包下载
- 【spark】map算子n种简化写法
- Excel小笔记——冻结窗格
- 入门级服务器的选购——DIY篇
- 第五章 执行计划详解
- Linux中断子系统(一)中断控制器GIC架构