Android仿微信图片点击查看效果

每次看到微信和朋友圈的时候点击图片放大效果动画感觉还不错，还可以根据图片定位获取图片，动画展开，这个开始让我思索。其实没有想象中的那个难 ，就是获取图片的定位相对来说难一点而已。

= =好大的一张gif图，录制效果还不错。录制软件叫LICEcap小而效果好；

觉得这张图片不错的点个赞@。@

1，单张图片，先从传递的东西说一下吧，都有注释的，

1.  bdInfo.x = show_img.getLeft();  
2.                 bdInfo.y = show_img.getTop();  
3.                 //视图布局的宽高  
4.                 bdInfo.width = show_img.getLayoutParams().width;  
5.                 bdInfo.height = show_img.getLayoutParams().height;  
6.                 //跳转和传数据都必须要  
7.                 Intent intent = new Intent(this, RolloutPreviewActivity.class);  
8.                 intent.putExtra("data", (Serializable) data); //图片的数据  
9.                 intent.putExtra("bdinfo",bdInfo); //图片的布局信息  
10.                 intent.putExtra("type", 0);//单图传0  
11.                 intent.putExtra("index",0);//图片在数据中位置  
12.                 startActivity(intent);</span>  

其中data是个对象集合，ArrayList<RolloutInfo>

1. public class RolloutInfo implements Serializable {  
2.     /** 
3.      * 图片路径 
4.      */  
5.     public String url;  
6.     /** 
7.      * 图片本身的宽 和 高,（清晰显示前的宽高），可以自己设定可以根据屏幕设定，可以根据图片大小设定 
8.      */  
9.     public float width;  
10.     public float height;  
11. }

bdinfo是个对象

1. public class RolloutBDInfo implements Serializable {  
2.     //坐标  
3.     public float x;  
4.     public float y;  
5.     //在容器中显示的image的宽 高  
6.     public float width;  
7.     public float height;  
8. }

我简单说一下原理：
把这些基本的数据传递到RolloutPreviewActivity里面接收到数据，RolloutPreviewActivity继承了RolloutBaseActivity，而RolloutBaseActivity是专门处理图片的，包括图片的动画效果和弹性效果。

2，ListView也有的。先看效果吧

ListView中获取对应某个item的位置，需要在adapter里面进行计算。

1. private class ImageOnclick implements View.OnClickListener {  
2.   
3.         private int index;  
4.         private ImageView imageView;  
5.   
6.         public ImageOnclick(int index, ImageView imageView) {  
7.             this.index = index;  
8.             this.imageView = imageView;  
9.         }  
10.   
11.         @Override  
12.         public void onClick(View v) {  
13.             View c = mListView.getChildAt(0);  
14.             //相对于其父视图的顶部位置  
15.             int top = c.getTop();  
16.             //返回适配器的数据集中显示在屏幕上的第一个项目的位置。  
17.             int firstVisiblePosition = mListView.getFirstVisiblePosition();  
18.             //Left position of this view relative to its parent.  
19.             bdInfo.x = imageView.getLeft();  
20.             bdInfo.y = RCommonUtil.dip2px(context, 7) + (index - firstVisiblePosition) * RCommonUtil.dip2px(context, 70) + top + mListView.getTop();  
21.   
22.             //关于imageView想要有多宽  
23.             bdInfo.width = imageView.getLayoutParams().width;  
24.             bdInfo.height = imageView.getLayoutParams().height;  
25.   
26.             Intent intent = new Intent(context, RolloutPreviewActivity.class);  
27.             intent.putExtra("data", (Serializable) data);  
28.             intent.putExtra("bdinfo", bdInfo);  
29.             intent.putExtra("index", index);  
30.             intent.putExtra("type", 1);  
31.             context.startActivity(intent);  
32.         }  
33.     }

adapter可以自己定义，给图片进行点击监听就行，并传递它相应的数据；
3，GridView形式

1. >private class ImageOnclick implements View.OnClickListener {  
2.   
3.         private int index;  
4.         private ImageView imageView;  
5.   
6.         public ImageOnclick(int index, ImageView imageView) {  
7.             this.index = index;  
8.             this.imageView = imageView;  
9.         }  
10.   
11.         @Override  
12.         public void onClick(View v) {  
13.   
14.             View c = mGridView.getChildAt(0);  
15.             int top = c.getTop();  
16.             int firstVisiblePosition = mGridView.getFirstVisiblePosition() / 3;  
17.   
18.             int a, b;  
19.             //模拟行列划分3等分进行计算  
20.             a = index / 3;  
21.             b = index % 3;  
22.   
23.             bdInfo.width = (RCommonUtil.getScreenWidth(context) - 3 * RCommonUtil.dip2px(context, 2)) / 3;  
24.             bdInfo.height = bdInfo.width;  
25.             //把屏幕划分成了行和列，采用行列估算方法，进行计算位置  
26.             bdInfo.x = RCommonUtil.dip2px(context, 1) + b * bdInfo.width + b * RCommonUtil.dip2px(context, 2);  
27.             bdInfo.y = RCommonUtil.dip2px(context, 1) + bdInfo.height * (a - firstVisiblePosition) + top + (a - firstVisiblePosition) * RCommonUtil.dip2px(context, 2) + mGridView.getTop() - RCommonUtil.dip2px(context, 1);  
28.   
29.             Intent intent = new Intent(context, RolloutPreviewActivity.class);  
30.             intent.putExtra("data", (Serializable) data);  
31.             intent.putExtra("bdinfo", bdInfo);  
32.             intent.putExtra("index", index);  
33.             intent.putExtra("type", 2);  
34.             context.startActivity(intent);  
35.         }  
36.     }

具体传递对应的activity，怎么去实现动画，怎么显示图片，看源码吧，有什么问题在源码中提出》

源码下载：https://github.com/Arthurshen98/RolloutAnimView