Android浏览图片，点击查看大图

末蓝、 2022-07-11 05:33 418阅读 0赞

首先，从图片缩略界面跳转到图片详情页面，应该是从一个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

**\[java\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

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

**\[java\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.  
9.   intent.putExtra("width", imageView.getWidth());//必须
10.  intent.putExtra("height", imageView.getHeight());//必须
11.  startActivity(intent); 
12.  overridePendingTransition(0, 0);

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

**\[java\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.  
8.  imageView = new SmoothImageView(this); 
9.  imageView.setOriginalInfo(mWidth, mHeight, mLocationX, mLocationY); 
10. imageView.transformIn(); 
11. imageView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1)); 
12. imageView.setScaleType(ScaleType.FIT\_CENTER); 
13. setContentView(imageView); 
14. ImageLoader.getInstance().displayImage(mDatas.get(mPosition), imageView);

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

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

**\[java\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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>

[view plain]: http://blog.csdn.net/lonelyroamer/article/details/25497737#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/338428
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/338428/fork