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

2022-10-10 11:11:36

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

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

我不知道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

  1. package com.roamer.ui.view;
  2. import android.animation.Animator;
  3. import android.animation.PropertyValuesHolder;
  4. import android.animation.ValueAnimator;
  5. import android.app.Activity;
  6. import android.content.Context;
  7. import android.graphics.Bitmap;
  8. import android.graphics.Canvas;
  9. import android.graphics.Matrix;
  10. import android.graphics.Paint;
  11. import android.graphics.Paint.Style;
  12. import android.graphics.drawable.BitmapDrawable;
  13. import android.util.AttributeSet;
  14. import android.util.Log;
  15. import android.view.animation.AccelerateDecelerateInterpolator;
  16. import android.widget.ImageView;
  17. /**
  18. * 2d平滑变化的显示图片的ImageView
  19. * 仅限于用于:从一个ScaleType==CENTER_CROP的ImageView，切换到另一个ScaleType=
  20. * FIT_CENTER的ImageView，或者反之 (当然，得使用同样的图片最好)
  21. *
  22. * @author Dean Tao
  23. *
  24. */
  25. public class SmoothImageView extends ImageView {
  26. private static final int STATE_NORMAL = 0;
  27. private static final int STATE_TRANSFORM_IN = 1;
  28. private static final int STATE_TRANSFORM_OUT = 2;
  29. private int mOriginalWidth;
  30. private int mOriginalHeight;
  31. private int mOriginalLocationX;
  32. private int mOriginalLocationY;
  33. private int mState = STATE_NORMAL;
  34. private Matrix mSmoothMatrix;
  35. private Bitmap mBitmap;
  36. private boolean mTransformStart = false;
  37. private Transfrom mTransfrom;
  38. private final int mBgColor = 0xFF000000;
  39. private int mBgAlpha = 0;
  40. private Paint mPaint;
  41. public SmoothImageView(Context context) {
  42. super(context);
  43. init();
  44. }
  45. public SmoothImageView(Context context, AttributeSet attrs) {
  46. super(context, attrs);
  47. init();
  48. }
  49. public SmoothImageView(Context context, AttributeSet attrs, int defStyle) {
  50. super(context, attrs, defStyle);
  51. init();
  52. }
  53. private void init() {
  54. mSmoothMatrix = new Matrix();
  55. mPaint=new Paint();
  56. mPaint.setColor(mBgColor);
  57. mPaint.setStyle(Style.FILL);
  58. //      setBackgroundColor(mBgColor);
  59. }
  60. public void setOriginalInfo(int width, int height, int locationX, int locationY) {
  61. mOriginalWidth = width;
  62. mOriginalHeight = height;
  63. mOriginalLocationX = locationX;
  64. mOriginalLocationY = locationY;
  65. // 因为是屏幕坐标，所以要转换为该视图内的坐标，因为我所用的该视图是MATCH_PARENT，所以不用定位该视图的位置,如果不是的话，还需要定位视图的位置，然后计算mOriginalLocationX和mOriginalLocationY
  66. mOriginalLocationY = mOriginalLocationY - getStatusBarHeight(getContext());
  67. }
  68. /**
  69. * 获取状态栏高度
  70. *
  71. * @return
  72. */
  73. public static int getStatusBarHeight(Context context) {
  74. Class<?> c = null;
  75. Object obj = null;
  76. java.lang.reflect.Field field = null;
  77. int x = 0;
  78. int statusBarHeight = 0;
  79. try {
  80. c = Class.forName("com.android.internal.R$dimen");
  81. obj = c.newInstance();
  82. field = c.getField("status_bar_height");
  83. x = Integer.parseInt(field.get(obj).toString());
  84. statusBarHeight = context.getResources().getDimensionPixelSize(x);
  85. return statusBarHeight;
  86. } catch (Exception e) {
  87. e.printStackTrace();
  88. }
  89. return statusBarHeight;
  90. }
  91. /**
  92. * 用于开始进入的方法。 调用此方前，需已经调用过setOriginalInfo
  93. */
  94. public void transformIn() {
  95. mState = STATE_TRANSFORM_IN;
  96. mTransformStart = true;
  97. invalidate();
  98. }
  99. /**
  100. * 用于开始退出的方法。 调用此方前，需已经调用过setOriginalInfo
  101. */
  102. public void transformOut() {
  103. mState = STATE_TRANSFORM_OUT;
  104. mTransformStart = true;
  105. invalidate();
  106. }
  107. private class Transfrom {
  108. float startScale;// 图片开始的缩放值
  109. float endScale;// 图片结束的缩放值
  110. float scale;// 属性ValueAnimator计算出来的值
  111. LocationSizeF startRect;// 开始的区域
  112. LocationSizeF endRect;// 结束的区域
  113. LocationSizeF rect;// 属性ValueAnimator计算出来的值
  114. void initStartIn() {
  115. scale = startScale;
  116. try {
  117. rect = (LocationSizeF) startRect.clone();
  118. } catch (CloneNotSupportedException e) {
  119. e.printStackTrace();
  120. }
  121. }
  122. void initStartOut() {
  123. scale = endScale;
  124. try {
  125. rect = (LocationSizeF) endRect.clone();
  126. } catch (CloneNotSupportedException e) {
  127. e.printStackTrace();
  128. }
  129. }
  130. }
  131. /**
  132. * 初始化进入的变量信息
  133. */
  134. private void initTransform() {
  135. if (getDrawable() == null) {
  136. return;
  137. }
  138. if (mBitmap == null || mBitmap.isRecycled()) {
  139. mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
  140. }
  141. //防止mTransfrom重复的做同样的初始化
  142. if (mTransfrom != null) {
  143. return;
  144. }
  145. if (getWidth() == 0 || getHeight() == 0) {
  146. return;
  147. }
  148. mTransfrom = new Transfrom();
  149. /** 下面为缩放的计算 */
  150. /* 计算初始的缩放值，初始值因为是CENTR_CROP效果，所以要保证图片的宽和高至少1个能匹配原始的宽和高，另1个大于 */
  151. float xSScale = mOriginalWidth / ((float) mBitmap.getWidth());
  152. float ySScale = mOriginalHeight / ((float) mBitmap.getHeight());
  153. float startScale = xSScale > ySScale ? xSScale : ySScale;
  154. mTransfrom.startScale = startScale;
  155. /* 计算结束时候的缩放值，结束值因为要达到FIT_CENTER效果，所以要保证图片的宽和高至少1个能匹配原始的宽和高，另1个小于 */
  156. float xEScale = getWidth() / ((float) mBitmap.getWidth());
  157. float yEScale = getHeight() / ((float) mBitmap.getHeight());
  158. float endScale = xEScale < yEScale ? xEScale : yEScale;
  159. mTransfrom.endScale = endScale;
  160. /**
  161. * 下面计算Canvas Clip的范围，也就是图片的显示的范围，因为图片是慢慢变大，并且是等比例的，所以这个效果还需要裁减图片显示的区域
  162. * ，而显示区域的变化范围是在原始CENTER_CROP效果的范围区域
  163. * ，到最终的FIT_CENTER的范围之间的，区域我用LocationSizeF更好计算
  164. * ，他就包括左上顶点坐标，和宽高，最后转为Canvas裁减的Rect.
  165. */
  166. /* 开始区域 */
  167. mTransfrom.startRect = new LocationSizeF();
  168. mTransfrom.startRect.left = mOriginalLocationX;
  169. mTransfrom.startRect.top = mOriginalLocationY;
  170. mTransfrom.startRect.width = mOriginalWidth;
  171. mTransfrom.startRect.height = mOriginalHeight;
  172. /* 结束区域 */
  173. mTransfrom.endRect = new LocationSizeF();
  174. float bitmapEndWidth = mBitmap.getWidth() * mTransfrom.endScale;// 图片最终的宽度
  175. float bitmapEndHeight = mBitmap.getHeight() * mTransfrom.endScale;// 图片最终的宽度
  176. mTransfrom.endRect.left = (getWidth() - bitmapEndWidth) / 2;
  177. mTransfrom.endRect.top = (getHeight() - bitmapEndHeight) / 2;
  178. mTransfrom.endRect.width = bitmapEndWidth;
  179. mTransfrom.endRect.height = bitmapEndHeight;
  180. mTransfrom.rect = new LocationSizeF();
  181. }
  182. private class LocationSizeF implements Cloneable{
  183. float left;
  184. float top;
  185. float width;
  186. float height;
  187. @Override
  188. public String toString() {
  189. return "[left:"+left+" top:"+top+" width:"+width+" height:"+height+"]";
  190. }
  191. @Override
  192. public Object clone() throws CloneNotSupportedException {
  193. // TODO Auto-generated method stub
  194. return super.clone();
  195. }
  196. }
  197. /* 下面实现了CENTER_CROP的功能 的Matrix，在优化的过程中，已经不用了 */
  198. private void getCenterCropMatrix() {
  199. if (getDrawable() == null) {
  200. return;
  201. }
  202. if (mBitmap == null || mBitmap.isRecycled()) {
  203. mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
  204. }
  205. /* 下面实现了CENTER_CROP的功能 */
  206. float xScale = mOriginalWidth / ((float) mBitmap.getWidth());
  207. float yScale = mOriginalHeight / ((float) mBitmap.getHeight());
  208. float scale = xScale > yScale ? xScale : yScale;
  209. mSmoothMatrix.reset();
  210. mSmoothMatrix.setScale(scale, scale);
  211. mSmoothMatrix.postTranslate(-(scale * mBitmap.getWidth() / 2 - mOriginalWidth / 2), -(scale * mBitmap.getHeight() / 2 - mOriginalHeight / 2));
  212. }
  213. private void getBmpMatrix() {
  214. if (getDrawable() == null) {
  215. return;
  216. }
  217. if (mTransfrom == null) {
  218. return;
  219. }
  220. if (mBitmap == null || mBitmap.isRecycled()) {
  221. mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
  222. }
  223. /* 下面实现了CENTER_CROP的功能 */
  224. mSmoothMatrix.setScale(mTransfrom.scale, mTransfrom.scale);
  225. mSmoothMatrix.postTranslate(-(mTransfrom.scale * mBitmap.getWidth() / 2 - mTransfrom.rect.width / 2),
  226. -(mTransfrom.scale * mBitmap.getHeight() / 2 - mTransfrom.rect.height / 2));
  227. }
  228. @Override
  229. protected void onDraw(Canvas canvas) {
  230. if (getDrawable() == null) {
  231. return; // couldn't resolve the URI
  232. }
  233. if (mState == STATE_TRANSFORM_IN || mState == STATE_TRANSFORM_OUT) {
  234. if (mTransformStart) {
  235. initTransform();
  236. }
  237. if (mTransfrom == null) {
  238. super.onDraw(canvas);
  239. return;
  240. }
  241. if (mTransformStart) {
  242. if (mState == STATE_TRANSFORM_IN) {
  243. mTransfrom.initStartIn();
  244. } else {
  245. mTransfrom.initStartOut();
  246. }
  247. }
  248. if(mTransformStart){
  249. Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.startScale);
  250. Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.endScale);
  251. Log.d("Dean", "mTransfrom.scale:"+mTransfrom.scale);
  252. Log.d("Dean", "mTransfrom.startRect:"+mTransfrom.startRect.toString());
  253. Log.d("Dean", "mTransfrom.endRect:"+mTransfrom.endRect.toString());
  254. Log.d("Dean", "mTransfrom.rect:"+mTransfrom.rect.toString());
  255. }
  256. mPaint.setAlpha(mBgAlpha);
  257. canvas.drawPaint(mPaint);
  258. int saveCount = canvas.getSaveCount();
  259. canvas.save();
  260. // 先得到图片在此刻的图像Matrix矩阵
  261. getBmpMatrix();
  262. canvas.translate(mTransfrom.rect.left, mTransfrom.rect.top);
  263. canvas.clipRect(0, 0, mTransfrom.rect.width, mTransfrom.rect.height);
  264. canvas.concat(mSmoothMatrix);
  265. getDrawable().draw(canvas);
  266. canvas.restoreToCount(saveCount);
  267. if (mTransformStart) {
  268. mTransformStart=false;
  269. startTransform(mState);
  270. }
  271. } else {
  272. //当Transform In变化完成后，把背景改为黑色，使得Activity不透明
  273. mPaint.setAlpha(255);
  274. canvas.drawPaint(mPaint);
  275. super.onDraw(canvas);
  276. }
  277. }
  278. private void startTransform(final int state) {
  279. if (mTransfrom == null) {
  280. return;
  281. }
  282. ValueAnimator valueAnimator = new ValueAnimator();
  283. valueAnimator.setDuration(300);
  284. valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
  285. if (state == STATE_TRANSFORM_IN) {
  286. PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.startScale, mTransfrom.endScale);
  287. PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.startRect.left, mTransfrom.endRect.left);
  288. PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.startRect.top, mTransfrom.endRect.top);
  289. PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.startRect.width, mTransfrom.endRect.width);
  290. PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.startRect.height, mTransfrom.endRect.height);
  291. PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 0, 255);
  292. valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
  293. } else {
  294. PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.endScale, mTransfrom.startScale);
  295. PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.endRect.left, mTransfrom.startRect.left);
  296. PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.endRect.top, mTransfrom.startRect.top);
  297. PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.endRect.width, mTransfrom.startRect.width);
  298. PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.endRect.height, mTransfrom.startRect.height);
  299. PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 255, 0);
  300. valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
  301. }
  302. valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  303. @Override
  304. public synchronized void onAnimationUpdate(ValueAnimator animation) {
  305. mTransfrom.scale = (Float) animation.getAnimatedValue("scale");
  306. mTransfrom.rect.left = (Float) animation.getAnimatedValue("left");
  307. mTransfrom.rect.top = (Float) animation.getAnimatedValue("top");
  308. mTransfrom.rect.width = (Float) animation.getAnimatedValue("width");
  309. mTransfrom.rect.height = (Float) animation.getAnimatedValue("height");
  310. mBgAlpha = (Integer) animation.getAnimatedValue("alpha");
  311. invalidate();
  312. ((Activity)getContext()).getWindow().getDecorView().invalidate();
  313. }
  314. });
  315. valueAnimator.addListener(new ValueAnimator.AnimatorListener() {
  316. @Override
  317. public void onAnimationStart(Animator animation) {
  318. }
  319. @Override
  320. public void onAnimationRepeat(Animator animation) {
  321. }
  322. @Override
  323. public void onAnimationEnd(Animator animation) {
  324. /*
  325. * 如果是进入的话，当然是希望最后停留在center_crop的区域。但是如果是out的话，就不应该是center_crop的位置了
  326. * ， 而应该是最后变化的位置，因为当out的时候结束时，不回复视图是Normal，要不然会有一个突然闪动回去的bug
  327. */
  328. // TODO 这个可以根据实际需求来修改
  329. if (state == STATE_TRANSFORM_IN) {
  330. mState = STATE_NORMAL;
  331. }
  332. if (mTransformListener != null) {
  333. mTransformListener.onTransformComplete(state);
  334. }
  335. }
  336. @Override
  337. public void onAnimationCancel(Animator animation) {
  338. }
  339. });
  340. valueAnimator.start();
  341. }
  342. public void setOnTransformListener(TransformListener listener) {
  343. mTransformListener = listener;
  344. }
  345. private TransformListener mTransformListener;
  346. public static interface TransformListener {
  347. /**
  348. *
  349. * @param mode
  350. *            STATE_TRANSFORM_IN 1 ,STATE_TRANSFORM_OUT 2
  351. */
  352. void onTransformComplete(int mode);// mode 1
  353. }
  354. }

使用的时候，从前一个Activity传递到详情Activity下面几个主要的信息：

  1. Intent intent = new Intent(MainActivity.this, SpaceImageDetailActivity.class);
  2. intent.putExtra("images", (ArrayList<String>) datas);//非必须
  3. intent.putExtra("position", position);
  4. int[] location = new int[2];
  5. imageView.getLocationOnScreen(location);
  6. intent.putExtra("locationX", location[0]);//必须
  7. intent.putExtra("locationY", location[1]);//必须
  8. intent.putExtra("width", imageView.getWidth());//必须
  9. intent.putExtra("height", imageView.getHeight());//必须
  10. startActivity(intent);
  11. overridePendingTransition(0, 0);

在详情Activity接受到这些参数，并对SmoothImageView初始化位置信息，然后就可以进行变化了。

  1. mDatas = (ArrayList<String>) getIntent().getSerializableExtra("images");
  2. mPosition = getIntent().getIntExtra("position", 0);
  3. mLocationX = getIntent().getIntExtra("locationX", 0);
  4. mLocationY = getIntent().getIntExtra("locationY", 0);
  5. mWidth = getIntent().getIntExtra("width", 0);
  6. mHeight = getIntent().getIntExtra("height", 0);
  7. imageView = new SmoothImageView(this);
  8. imageView.setOriginalInfo(mWidth, mHeight, mLocationX, mLocationY);
  9. imageView.transformIn();
  10. imageView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
  11. imageView.setScaleType(ScaleType.FIT_CENTER);
  12. setContentView(imageView);
  13. ImageLoader.getInstance().displayImage(mDatas.get(mPosition), imageView);

上面的就已经完成了图片的缩放效果，但是还需要设置下Activity透明的风格，才能使得alpha效果体验出来，用户体验更好。

对Activity设置如下风格，另外说明，在SmoothImageView中没有定位视图的位置，只是做了对状态栏的处理，所以要设置Activity 为NotitleBar，具体style如下：

  1. <style name="IMTheme.Transparent" >
  2. <item name="android:windowBackground">@android:color/transparent</item>
  3. <item name="android:windowIsTranslucent">true</item>
  4. <item name="android:windowNoTitle">true</item>
  5. <item name="android:windowContentOverlay">@null</item>
  6. lt;/style>

Demo下载

上一篇：Viewer.js插件浏览图片


下一篇：geohash-net实现