Android浏览图片,点击放大至全屏效果

最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果。如下。

vc28xqzP6sfp0rPD5qOs06a4w8rHtNPSu7j2QWN0aXZpdHnM+Neqtb3B7c3i0ru49kFjdGl2aXR5o6zTprjDzbzGrM/qx+nSs8Pm0rLT0LrctuCy2df3o6zTw1ZpZXe78tXfRGlhbG9nsrvKx7rcusOho8v50tTP1tTaxNG1477NysejrMjnus7KubXDx7DSu7j2vefD5rXESW1hZ2VWaWV31NrB7c3i0ru49r3nw+bX9sv1t8XH0Ljutq+7raGjPC9wPgo8cD7Su7Djy/XC1L3nw+a1xEltYWdlVmlld7XEysfI58nPzbzL+cq+tcTV/be90M61xKOssqLH0srHQ0VOVEVSX0NST1DL9bfFyvTQ1LXEoaNDRU5URVJfQ1JPUMr00NS74bW81sJJbWFnZVZpZXfW0M/Uyr61xEJpdG1hcNPQsbvH0LjutO+1vczus+S1xNCnufuhozwvcD4KPHA+tvjP6sfp0rPD5rXESW1hZ2VWaWV30ruw47a8ysdGSVRfQ0VOVEVStcTL9bfFyvTQ1KGjy/nS1NKqsaPWpNXiuPbM+Neqtq+7rbXEwfezqaOs0qrX9sjnz8K1xLHku6+jujwvcD4KPHA+MaGiQml0bWFwtcTL9bfFo6zS8s6qy/XC1M28us3P6sfpzby1xMv1t8WxyMD9v8+2qLK70rvR+TwvcD4KPHA+MqGiQml0bWFwzrvWw7XExr3SxqOs0vLOqsv1wtTNvLXEzrvWw8rHsrvIt7aotcSjrM7Sw8fSqsq5y/vGvdLGtb3W0LzkPC9wPgo8cD4zoaJCaXRtYXC1xMfQuO6jrNLyzqpDRU5URVJfQ1JPUMrHx9C47rn9tcOjrLb4RklUX0NFTlRFUsrHw7vT0MfQuO61xKOsxMfDtMG9t/nNvM/Uyr61xMTayN3H+NPyyseyu82stcSjrMv50tTSstKqz9TKvsf40/K1xMa9u6yx5Lu7oaM8L3A+CjxwPjxicj4KPC9wPgo8cD7Sqs3qs8nJz8PmtcTQp7n7o6zI57n7taW1pcrH1ri21EltYWdlVmlld9f20ru49ravu62x5Lu7o6zO0r71tcPKx83qs8myu8HL1eK49tKqx/O1xKGjy/nS1NfUvLrW2NC0wctJbWFnZVZpZXfAtM3qs8nJz8r2tcSx5Lu7oaM8L3A+CjxwPtaxvdPM+cnP1vfSqrXESW1hZ2VWaWV3PC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">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 ag国际馆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) 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) 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如下:

 



http://www.bkjia.com/Androidjc/768852.htmlwww.bkjia.comtruehttp://www.bkjia.com/Androidjc/768852.htmlTechArticle最近做一个项目类于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类的效果。如下。 v...

本文源自: 环亚娱乐

上一篇:[Android自定义控件]Android自定义虚线

下一篇:没有了