- 浏览: 731030 次
文章分类
最新评论
-
dfjjfxyl:
开源项目推荐网站:http://binlily.imwork. ...
JAVA开源项目 -
喵喵大神:
这类免费API还是挺多的,博客上也整理过:https://my ...
Web Api --智能Api接口
Android浏览图片,点击放大至全屏效果
最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果。如下。
我不知道QQ那个是怎么做的,我的思路如下:
首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好。所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画。
一般缩略界面的ImageView的是如上图所示的正方形的,并且是CENTER_CROP缩放属性的。CENTER_CROP属性会导致ImageView中显示的Bitmap有被切割达到填充的效果。
而详情页面的ImageView一般都是FIT_CENTER的缩放属性。所以要保证这个跳转动画的流畅,要做如下的变化:
1、Bitmap的缩放,因为缩略图和详情图的缩放比例肯定不一样
2、Bitmap位置的平移,因为缩略图的位置是不确定的,我们要使他平移到中间
3、Bitmap的切割,因为CENTER_CROP是切割过得,而FIT_CENTER是没有切割的,那么两幅图显示的内容区域是不同的,所以也要显示区域的平滑变换。
要完成上面的效果,如果单单是指对ImageView做一个动画变换,我觉得是完成不了这个要求的。所以自己重写了ImageView来完成上述的变换。
直接贴上主要的ImageView
package com.roamer.ui.view; import android.animation.Animator; import android.animation.PropertyValuesHolder; import android.animation.ValueAnimator; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.drawable.BitmapDrawable; import android.util.AttributeSet; import android.util.Log; import android.view.animation.AccelerateDecelerateInterpolator; import android.widget.ImageView; /** * 2d平滑变化的显示图片的ImageView * 仅限于用于:从一个ScaleType==CENTER_CROP的ImageView,切换到另一个ScaleType= * FIT_CENTER的ImageView,或者反之 (当然,得使用同样的图片最好) * * @author Dean Tao * */ public class SmoothImageView extends ImageView { private static final int STATE_NORMAL = 0; private static final int STATE_TRANSFORM_IN = 1; private static final int STATE_TRANSFORM_OUT = 2; private int mOriginalWidth; private int mOriginalHeight; private int mOriginalLocationX; private int mOriginalLocationY; private int mState = STATE_NORMAL; private Matrix mSmoothMatrix; private Bitmap mBitmap; private boolean mTransformStart = false; private Transfrom mTransfrom; private final int mBgColor = 0xFF000000; private int mBgAlpha = 0; private Paint mPaint; public SmoothImageView(Context context) { super(context); init(); } public SmoothImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SmoothImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { mSmoothMatrix = new Matrix(); mPaint=new Paint(); mPaint.setColor(mBgColor); mPaint.setStyle(Style.FILL); // setBackgroundColor(mBgColor); } public void setOriginalInfo(int width, int height, int locationX, int locationY) { mOriginalWidth = width; mOriginalHeight = height; mOriginalLocationX = locationX; mOriginalLocationY = locationY; // 因为是屏幕坐标,所以要转换为该视图内的坐标,因为我所用的该视图是MATCH_PARENT,所以不用定位该视图的位置,如果不是的话,还需要定位视图的位置,然后计算mOriginalLocationX和mOriginalLocationY mOriginalLocationY = mOriginalLocationY - getStatusBarHeight(getContext()); } /** * 获取状态栏高度 * * @return */ public static int getStatusBarHeight(Context context) { Class<?> c = null; Object obj = null; java.lang.reflect.Field field = null; int x = 0; int statusBarHeight = 0; try { c = Class.forName("com.android.internal.R$dimen"); obj = c.newInstance(); field = c.getField("status_bar_height"); x = Integer.parseInt(field.get(obj).toString()); statusBarHeight = context.getResources().getDimensionPixelSize(x); return statusBarHeight; } catch (Exception e) { e.printStackTrace(); } return statusBarHeight; } /** * 用于开始进入的方法。 调用此方前,需已经调用过setOriginalInfo */ public void transformIn() { mState = STATE_TRANSFORM_IN; mTransformStart = true; invalidate(); } /** * 用于开始退出的方法。 调用此方前,需已经调用过setOriginalInfo */ public void transformOut() { mState = STATE_TRANSFORM_OUT; mTransformStart = true; invalidate(); } private class Transfrom { float startScale;// 图片开始的缩放值 float endScale;// 图片结束的缩放值 float scale;// 属性ValueAnimator计算出来的值 LocationSizeF startRect;// 开始的区域 LocationSizeF endRect;// 结束的区域 LocationSizeF rect;// 属性ValueAnimator计算出来的值 void initStartIn() { scale = startScale; try { rect = (LocationSizeF) startRect.clone(); } catch (CloneNotSupportedException e) { e.printStackTrace(); } } void initStartOut() { scale = endScale; try { rect = (LocationSizeF) endRect.clone(); } catch (CloneNotSupportedException e) { e.printStackTrace(); } } } /** * 初始化进入的变量信息 */ private void initTransform() { if (getDrawable() == null) { return; } if (mBitmap == null || mBitmap.isRecycled()) { mBitmap = ((BitmapDrawable) getDrawable()).getBitmap(); } //防止mTransfrom重复的做同样的初始化 if (mTransfrom != null) { return; } if (getWidth() == 0 || getHeight() == 0) { return; } mTransfrom = new Transfrom(); /** 下面为缩放的计算 */ /* 计算初始的缩放值,初始值因为是CENTR_CROP效果,所以要保证图片的宽和高至少1个能匹配原始的宽和高,另1个大于 */ float xSScale = mOriginalWidth / ((float) mBitmap.getWidth()); float ySScale = mOriginalHeight / ((float) mBitmap.getHeight()); float startScale = xSScale > ySScale ? xSScale : ySScale; mTransfrom.startScale = startScale; /* 计算结束时候的缩放值,结束值因为要达到FIT_CENTER效果,所以要保证图片的宽和高至少1个能匹配原始的宽和高,另1个小于 */ float xEScale = getWidth() / ((float) mBitmap.getWidth()); float yEScale = getHeight() / ((float) mBitmap.getHeight()); float endScale = xEScale < yEScale ? xEScale : yEScale; mTransfrom.endScale = endScale; /** * 下面计算Canvas Clip的范围,也就是图片的显示的范围,因为图片是慢慢变大,并且是等比例的,所以这个效果还需要裁减图片显示的区域 * ,而显示区域的变化范围是在原始CENTER_CROP效果的范围区域 * ,到最终的FIT_CENTER的范围之间的,区域我用LocationSizeF更好计算 * ,他就包括左上顶点坐标,和宽高,最后转为Canvas裁减的Rect. */ /* 开始区域 */ mTransfrom.startRect = new LocationSizeF(); mTransfrom.startRect.left = mOriginalLocationX; mTransfrom.startRect.top = mOriginalLocationY; mTransfrom.startRect.width = mOriginalWidth; mTransfrom.startRect.height = mOriginalHeight; /* 结束区域 */ mTransfrom.endRect = new LocationSizeF(); float bitmapEndWidth = mBitmap.getWidth() * mTransfrom.endScale;// 图片最终的宽度 float bitmapEndHeight = mBitmap.getHeight() * mTransfrom.endScale;// 图片最终的宽度 mTransfrom.endRect.left = (getWidth() - bitmapEndWidth) / 2; mTransfrom.endRect.top = (getHeight() - bitmapEndHeight) / 2; mTransfrom.endRect.width = bitmapEndWidth; mTransfrom.endRect.height = bitmapEndHeight; mTransfrom.rect = new LocationSizeF(); } private class LocationSizeF implements Cloneable{ float left; float top; float width; float height; @Override public String toString() { return "[left:"+left+" top:"+top+" width:"+width+" height:"+height+"]"; } @Override public Object clone() throws CloneNotSupportedException { // TODO Auto-generated method stub return super.clone(); } } /* 下面实现了CENTER_CROP的功能 的Matrix,在优化的过程中,已经不用了 */ private void getCenterCropMatrix() { if (getDrawable() == null) { return; } if (mBitmap == null || mBitmap.isRecycled()) { mBitmap = ((BitmapDrawable) getDrawable()).getBitmap(); } /* 下面实现了CENTER_CROP的功能 */ float xScale = mOriginalWidth / ((float) mBitmap.getWidth()); float yScale = mOriginalHeight / ((float) mBitmap.getHeight()); float scale = xScale > yScale ? xScale : yScale; mSmoothMatrix.reset(); mSmoothMatrix.setScale(scale, scale); mSmoothMatrix.postTranslate(-(scale * mBitmap.getWidth() / 2 - mOriginalWidth / 2), -(scale * mBitmap.getHeight() / 2 - mOriginalHeight / 2)); } private void getBmpMatrix() { if (getDrawable() == null) { return; } if (mTransfrom == null) { return; } if (mBitmap == null || mBitmap.isRecycled()) { mBitmap = ((BitmapDrawable) getDrawable()).getBitmap(); } /* 下面实现了CENTER_CROP的功能 */ mSmoothMatrix.setScale(mTransfrom.scale, mTransfrom.scale); mSmoothMatrix.postTranslate(-(mTransfrom.scale * mBitmap.getWidth() / 2 - mTransfrom.rect.width / 2), -(mTransfrom.scale * mBitmap.getHeight() / 2 - mTransfrom.rect.height / 2)); } @Override protected void onDraw(Canvas canvas) { if (getDrawable() == null) { return; // couldn't resolve the URI } if (mState == STATE_TRANSFORM_IN || mState == STATE_TRANSFORM_OUT) { if (mTransformStart) { initTransform(); } if (mTransfrom == null) { super.onDraw(canvas); return; } if (mTransformStart) { if (mState == STATE_TRANSFORM_IN) { mTransfrom.initStartIn(); } else { mTransfrom.initStartOut(); } } if(mTransformStart){ Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.startScale); Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.endScale); Log.d("Dean", "mTransfrom.scale:"+mTransfrom.scale); Log.d("Dean", "mTransfrom.startRect:"+mTransfrom.startRect.toString()); Log.d("Dean", "mTransfrom.endRect:"+mTransfrom.endRect.toString()); Log.d("Dean", "mTransfrom.rect:"+mTransfrom.rect.toString()); } mPaint.setAlpha(mBgAlpha); canvas.drawPaint(mPaint); int saveCount = canvas.getSaveCount(); canvas.save(); // 先得到图片在此刻的图像Matrix矩阵 getBmpMatrix(); canvas.translate(mTransfrom.rect.left, mTransfrom.rect.top); canvas.clipRect(0, 0, mTransfrom.rect.width, mTransfrom.rect.height); canvas.concat(mSmoothMatrix); getDrawable().draw(canvas); canvas.restoreToCount(saveCount); if (mTransformStart) { mTransformStart=false; startTransform(mState); } } else { //当Transform In变化完成后,把背景改为黑色,使得Activity不透明 mPaint.setAlpha(255); canvas.drawPaint(mPaint); super.onDraw(canvas); } } private void startTransform(final int state) { if (mTransfrom == null) { return; } ValueAnimator valueAnimator = new ValueAnimator(); valueAnimator.setDuration(300); valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator()); if (state == STATE_TRANSFORM_IN) { PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.startScale, mTransfrom.endScale); PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.startRect.left, mTransfrom.endRect.left); PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.startRect.top, mTransfrom.endRect.top); PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.startRect.width, mTransfrom.endRect.width); PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.startRect.height, mTransfrom.endRect.height); PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 0, 255); valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder); } else { PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.endScale, mTransfrom.startScale); PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.endRect.left, mTransfrom.startRect.left); PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.endRect.top, mTransfrom.startRect.top); PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.endRect.width, mTransfrom.startRect.width); PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.endRect.height, mTransfrom.startRect.height); PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 255, 0); valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder); } valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public synchronized void onAnimationUpdate(ValueAnimator animation) { mTransfrom.scale = (Float) animation.getAnimatedValue("scale"); mTransfrom.rect.left = (Float) animation.getAnimatedValue("left"); mTransfrom.rect.top = (Float) animation.getAnimatedValue("top"); mTransfrom.rect.width = (Float) animation.getAnimatedValue("width"); mTransfrom.rect.height = (Float) animation.getAnimatedValue("height"); mBgAlpha = (Integer) animation.getAnimatedValue("alpha"); invalidate(); ((Activity)getContext()).getWindow().getDecorView().invalidate(); } }); valueAnimator.addListener(new ValueAnimator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { /* * 如果是进入的话,当然是希望最后停留在center_crop的区域。但是如果是out的话,就不应该是center_crop的位置了 * , 而应该是最后变化的位置,因为当out的时候结束时,不回复视图是Normal,要不然会有一个突然闪动回去的bug */ // TODO 这个可以根据实际需求来修改 if (state == STATE_TRANSFORM_IN) { mState = STATE_NORMAL; } if (mTransformListener != null) { mTransformListener.onTransformComplete(state); } } @Override public void onAnimationCancel(Animator animation) { } }); valueAnimator.start(); } public void setOnTransformListener(TransformListener listener) { mTransformListener = listener; } private TransformListener mTransformListener; public static interface TransformListener { /** * * @param mode * STATE_TRANSFORM_IN 1 ,STATE_TRANSFORM_OUT 2 */ void onTransformComplete(int mode);// mode 1 } }
使用的时候,从前一个Activity传递到详情Activity下面几个主要的信息:
Intent intent = new Intent(MainActivity.this, SpaceImageDetailActivity.class); intent.putExtra("images", (ArrayList<String>) datas);//非必须 intent.putExtra("position", position); int[] location = new int[2]; imageView.getLocationOnScreen(location); intent.putExtra("locationX", location[0]);//必须 intent.putExtra("locationY", location[1]);//必须 intent.putExtra("width", imageView.getWidth());//必须 intent.putExtra("height", imageView.getHeight());//必须 startActivity(intent); overridePendingTransition(0, 0);
在详情Activity接受到这些参数,并对SmoothImageView初始化位置信息,然后就可以进行变化了。
mDatas = (ArrayList<String>) getIntent().getSerializableExtra("images"); mPosition = getIntent().getIntExtra("position", 0); mLocationX = getIntent().getIntExtra("locationX", 0); mLocationY = getIntent().getIntExtra("locationY", 0); mWidth = getIntent().getIntExtra("width", 0); mHeight = getIntent().getIntExtra("height", 0); imageView = new SmoothImageView(this); imageView.setOriginalInfo(mWidth, mHeight, mLocationX, mLocationY); imageView.transformIn(); imageView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1)); imageView.setScaleType(ScaleType.FIT_CENTER); setContentView(imageView); ImageLoader.getInstance().displayImage(mDatas.get(mPosition), imageView);
上面的就已经完成了图片的缩放效果,但是还需要设置下Activity透明的风格,才能使得alpha效果体验出来,用户体验更好。
对Activity设置如下风格,另外说明,在SmoothImageView中没有定位视图的位置,只是做了对状态栏的处理,所以要设置Activity 为NotitleBar,具体style如下:
<style name="IMTheme.Transparent" > <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowIsTranslucent">true</item> <item name="android:windowNoTitle">true</item> <item name="android:windowContentOverlay">@null</item> </style>
相关推荐
Android ImageView实现是对图片放大后可以局部的拉伸放大,双击放大
ViewPager实现点击放大到全屏
Image-Zoomer Specs Image zoomer provides easy way to add zoom animations to you ImageButton. You can set the animation duration and reverse mode to reverse the animation. Featured in ...
高仿现在主流的图片浏览的全屏缩放效果。如QQ好友动态、微信朋友圈。
android 图片点击一下就放大到全屏,再点一下就回到原界面
这个效果其实就和新浪微博一样的,不过做的可能没有那么好的...看网上没有这块的,要么是单独的点击图片放大,要么就是缩放的,而且缩放的例子是很多,但是效果都不好看,也不是我要的,这个就是自己结合在了一起了。
移动端点击图片会变成全屏查看的模式,然后可以进行手势缩放。微信端点击放大图片
版权声明:本文为博主原创文章,码字不易,转载请注明原文地址,谢谢。 https://blog.csdn.net/qq_16131393/article/
jquery 图片点击全屏放大展示 像浏览相册一样 浏览图片
主要为大家详细介绍了android实现点击图片全屏展示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
仿QQ空间图片放缩查看,点击图片从原位置放大到全屏,后退从全屏缩小到原位置,效果非常好.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
点击图片,根据图片所在位置开始全屏的动画效果+手势缩放图片
Android图片浏览全屏缩放.zip
实现简单的Android全屏显示图片效果,可以拿来借鉴下
Unity3D脚本:点击放大图片 Posted on 2013年02月21日 by U3d / Unity3D脚本/插件/被围观 276 次 Unity3D点击
jquery 图片点击全屏放大展示 然后点击叉叉关闭 有前进后退 和QQ相册差不多
仿QQ空间新版相册点击图片全屏预览大图效果,可以通过在线点击预览大图
iOS 实现点击图片放大到全屏
有时候页面显示的图片看不清,希望点击后放大查看,只是实现这样的一个功能比较...代码给出一个解决该问题的例子,实现鼠标移动到图片上时鼠标自动变为带加号的放大镜,点击后可以将图片放大成全屏显示,手机上也兼容。