Android仿微信朋友圈图片查看器

admin

博文之前，希望大家先打开自己的微信点到朋友圈中去，仔细观察是不是发现朋友圈里的有个“九宫格”的图片区域，点击图片又会跳到图片的详细查看页面，并且支持图片的滑动和缩放？这个功能是不是很常用呢？！那么我今天正好做了这个Demo，下面为大家讲解一下。首先按照惯例先看一下效果图吧，尤其不会录制gif动画（哎~没办法，模拟器不支持多点触控，刚好我的手机又没有Root，不能录屏，悲催啊，大家见谅，想要看真实效果的话，烦请移到博文最下方，点击下载源码，运行后再看效果哈~~），这里先就拿几张静态的图片顶替一下好了。见谅！



效果嘛，将就着看吧！实在看不明白就想想微信朋友圈，或者拖到下方，点击下载源码！这里，首先分析一下主界面吧，布局都是很简单的，主界面仅仅就是一个ListView的控件，ListView的Item上值得注意的是，Item上包含了一个GridView，这个GridView呗用作实现“九宫格”的效果，主界面布局就是一个ListView，这里不说了，我们先来看看ListView的Item的布局吧，以下是item_list.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     android:paddingBottom="5dp"
   
6.     android:paddingTop="5dp" >
   
7. 
   
8.     <ImageView
   
9.         android:id="@+id/iv_avatar"
   
10.         android:layout_width="50dp"
    
11.         android:layout_height="50dp"
    
12.         android:background="@drawable/ic_launcher"
    
13.         android:scaleType="centerCrop" />
    
14. 
    
15.     <TextView
    
16.         android:id="@+id/tv_title"
    
17.         android:layout_width="wrap_content"
    
18.         android:layout_height="wrap_content"
    
19.         android:layout_marginLeft="5dp"
    
20.         android:layout_toRightOf="@id/iv_avatar"
    
21.         android:text="爷，今天心情好！"
    
22.         android:textSize="16sp" />
    
23. 
    
24.     <TextView
    
25.         android:id="@+id/tv_content"
    
26.         android:layout_width="wrap_content"
    
27.         android:layout_height="wrap_content"
    
28.         android:layout_below="@+id/tv_title"
    
29.         android:layout_marginLeft="5dp"
    
30.         android:layout_marginTop="3dp"
    
31.         android:layout_toRightOf="@id/iv_avatar"
    
32.         android:text="今天又是雾霾！"
    
33.         android:textSize="16sp" />
    
34. 
    
35.     <com.example.imagedemo.NoScrollGridView
    
36.         android:id="@+id/gridview"
    
37.         android:layout_width="220dp"
    
38.         android:layout_height="wrap_content"
    
39.         android:layout_below="@id/tv_content"
    
40.         android:layout_marginLeft="5dp"
    
41.         android:layout_marginTop="3dp"
    
42.         android:layout_toRightOf="@id/iv_avatar"
    
43.         android:columnWidth="70dp"
    
44.         android:gravity="center"
    
45.         android:horizontalSpacing="2.5dp"
    
46.         android:numColumns="3"
    
47.         android:stretchMode="columnWidth"
    
48.         android:verticalSpacing="2.5dp" />
    
49. 
    
50. </RelativeLayout>

复制代码

好了，大家看到了，布局也是极其简单的，但是有个问题就是ListView嵌套进了GridView，那么就会出现一个问题，导致GridView显示的不全，那么该怎么解决这个问题呢？其实也简单，就是重写一个GridView，测量一下GridView的高度，再设置上去。具体解决方案请看上篇博文ListView嵌套GridView显示不全解决方法或者源码，如下NoScrollGridView.java

1. package com.example.imagedemo;
   
2. 
   
3. import android.content.Context;
   
4. import android.util.AttributeSet;
   
5. import android.widget.GridView;
   
6. 
   
7. /**
   
8. * 自定义的“九宫格”——用在显示帖子详情的图片集合 解决的问题：GridView显示不全，只显示了一行的图片，比较奇怪，尝试重写GridView来解决
   
9. *
   
10. * @author lichao
    
11. * @since 2014-10-16 16:41
    
12. *
    
13. */
    
14. public class NoScrollGridView extends GridView {
    
15. 
    
16.         public NoScrollGridView(Context context) {
    
17.                 super(context);
    
18.                 // TODO Auto-generated constructor stub
    
19.         }
    
20. 
    
21.         public NoScrollGridView(Context context, AttributeSet attrs) {
    
22.                 super(context, attrs);
    
23.                 // TODO Auto-generated constructor stub
    
24.         }
    
25. 
    
26.         public NoScrollGridView(Context context, AttributeSet attrs, int defStyle) {
    
27.                 super(context, attrs, defStyle);
    
28.                 // TODO Auto-generated constructor stub
    
29.         }
    
30. 
    
31.         @Override
    
32.         protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
33.                 // TODO Auto-generated method stub
    
34.                 int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
    
35.                                 MeasureSpec.AT_MOST);
    
36.                 super.onMeasure(widthMeasureSpec, expandSpec);
    
37.         }
    
38. 
    
39. }
    

复制代码

下来看看ListView上面Item的实体是什么样的数据结构，这就显得非常简单了。

1. public class ItemEntity {  
   
2.     private String avatar; // 用户头像URL  
   
3.     private String title; // 标题  
   
4.     private String content; // 内容  
   
5.     private ArrayList<String> imageUrls; // 九宫格图片的URL集合  
   
6.   
   
7.     public ItemEntity(String avatar, String title, String content,  
   
8.             ArrayList<String> imageUrls) {  
   
9.         super();  
   
10.         this.avatar = avatar;  
    
11.         this.title = title;  
    
12.         this.content = content;  
    
13.         this.imageUrls = imageUrls;  
    
14.     }  
    
15.        ...  
    
16. }  

复制代码

好了，有了ListView，那么不可避免的就是做Item上的数据适配了。继承一个BaseAdapter，代码如下，都比较简单：

1. /**
   
2. * 首页ListView的数据适配器
   
3. *
   
4. * @author Administrator
   
5. *
   
6. */
   
7. public class ListItemAdapter extends BaseAdapter {
   
8. 
   
9.         private Context mContext;
   
10.         private ArrayList<ItemEntity> items;
    
11. 
    
12.         public ListItemAdapter(Context ctx, ArrayList<ItemEntity> items) {
    
13.                 this.mContext = ctx;
    
14.                 this.items = items;
    
15.         }
    
16. 
    
17.         @Override
    
18.         public int getCount() {
    
19.                 return items == null ? 0 : items.size();
    
20.         }
    
21. 
    
22.         @Override
    
23.         public Object getItem(int position) {
    
24.                 return items.get(position);
    
25.         }
    
26. 
    
27.         @Override
    
28.         public long getItemId(int position) {
    
29.                 return position;
    
30.         }
    
31. 
    
32.         @Override
    
33.         public View getView(int position, View convertView, ViewGroup parent) {
    
34.                 ViewHolder holder;
    
35.                 if (convertView == null) {
    
36.                         holder = new ViewHolder();
    
37.                         convertView = View.inflate(mContext, R.layout.item_list, null);
    
38.                         holder.iv_avatar = (ImageView) convertView
    
39.                                         .findViewById(R.id.iv_avatar);
    
40.                         holder.tv_title = (TextView) convertView
    
41.                                         .findViewById(R.id.tv_title);
    
42.                         holder.tv_content = (TextView) convertView
    
43.                                         .findViewById(R.id.tv_content);
    
44.                         holder.gridview = (NoScrollGridView) convertView
    
45.                                         .findViewById(R.id.gridview);
    
46.                         convertView.setTag(holder);
    
47.                 } else {
    
48.                         holder = (ViewHolder) convertView.getTag();
    
49.                 }
    
50.                 ItemEntity itemEntity = items.get(position);
    
51.                 holder.tv_title.setText(itemEntity.getTitle());
    
52.                 holder.tv_content.setText(itemEntity.getContent());
    
53.                 // 使用ImageLoader加载网络图片
    
54.                 DisplayImageOptions options = new DisplayImageOptions.Builder()//
    
55.                                 .showImageOnLoading(R.drawable.ic_launcher) // 加载中显示的默认图片
    
56.                                 .showImageOnFail(R.drawable.ic_launcher) // 设置加载失败的默认图片
    
57.                                 .cacheInMemory(true) // 内存缓存
    
58.                                 .cacheOnDisk(true) // sdcard缓存
    
59.                                 .bitmapConfig(Config.RGB_565)// 设置最低配置
    
60.                                 .build();//
    
61.                 ImageLoader.getInstance().displayImage(itemEntity.getAvatar(),
    
62.                                 holder.iv_avatar, options);
    
63.                 final ArrayList<String> imageUrls = itemEntity.getImageUrls();
    
64.                 if (imageUrls == null || imageUrls.size() == 0) { // 没有图片资源就隐藏GridView
    
65.                         holder.gridview.setVisibility(View.GONE);
    
66.                 } else {
    
67.                         holder.gridview.setAdapter(new NoScrollGridAdapter(mContext,
    
68.                                         imageUrls));
    
69.                 }
    
70.                 // 点击回帖九宫格，查看大图
    
71.                 holder.gridview.setOnItemClickListener(new OnItemClickListener() {
    
72. 
    
73.                         @Override
    
74.                         public void onItemClick(AdapterView<?> parent, View view,
    
75.                                         int position, long id) {
    
76.                                 // TODO Auto-generated method stub
    
77.                                 imageBrower(position, imageUrls);
    
78.                         }
    
79.                 });
    
80.                 return convertView;
    
81.         }
    
82. 
    
83.         /**
    
84.          * 打开图片查看器
    
85.          *
    
86.          * @param position
    
87.          * @param urls2
    
88.          */
    
89.         protected void imageBrower(int position, ArrayList<String> urls2) {
    
90.                 Intent intent = new Intent(mContext, ImagePagerActivity.class);
    
91.                 // 图片url,为了演示这里使用常量，一般从数据库中或网络中获取
    
92.                 intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_URLS, urls2);
    
93.                 intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_INDEX, position);
    
94.                 mContext.startActivity(intent);
    
95.         }
    
96. 
    
97.         /**
    
98.          * listview组件复用，防止“卡顿”
    
99.          *
    
100.          * @author Administrator
     
101.          *
     
102.          */
     
103.         class ViewHolder {
     
104.                 private ImageView iv_avatar;
     
105.                 private TextView tv_title;
     
106.                 private TextView tv_content;
     
107.                 private NoScrollGridView gridview;
     
108.         }
     
109. }

复制代码

这里有需要解释的地方了，看看listview上的图片处理，由于图片都是从网络获取的，为了避免图片过多造成OOM，那么这里加载图片的时候必不可少的需要做内存优化，图片的优化方式有很多，我这里采取了最简单最直接得方式，使用了开源的ImageLoader这个图片加载框架，这个框架简直是太优秀了，减少了开发者一系列不必要而且时常会出现的麻烦，关于ImageLoader并不是本篇博文需要讲解的知识，关于ImageLoader，欢迎在GitHub主页上下载，地址是https://github.com/nostra13/Android-Universal-Image-Loader，既然使用了ImageLoader这个框架，就不得不在程序上做一些初始化的操作，首先需要自定义一个全局的上下文Application类，将ImageLoader的相关属性初始化上去，直接看代码好了，见名知意：MyApplication.java

1. public class MyApplication extends Application {
   
2.         @Override
   
3.         public void onCreate() {
   
4.                 super.onCreate();
   
5.                 DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder() //
   
6.                                 .showImageForEmptyUri(R.drawable.ic_launcher) //
   
7.                                 .showImageOnFail(R.drawable.ic_launcher) //
   
8.                                 .cacheInMemory(true) //
   
9.                                 .cacheOnDisk(true) //
   
10.                                 .build();//
    
11.                 ImageLoaderConfiguration config = new ImageLoaderConfiguration//
    
12.                 .Builder(getApplicationContext())//
    
13.                                 .defaultDisplayImageOptions(defaultOptions)//
    
14.                                 .discCacheSize(50 * 1024 * 1024)//
    
15.                                 .discCacheFileCount(100)// 缓存一百张图片
    
16.                                 .writeDebugLogs()//
    
17.                                 .build();//
    
18.                 ImageLoader.getInstance().init(config);
    
19.         }
    
20. }

复制代码

定义这个Application之后，需要在清单文件中配置一下，在Manifest.xml中的Application节点上添加：

1. android:name="com.example.imagedemo.MyApplication"  

复制代码

  此外由于ImageLoader是网络获取图片，又需要本地sdcard缓存图片，所以需要加上一下的权限，这是Imageloader标准权限：

1. <uses-permission android:name="android.permission.INTERNET" />  
   
2. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
   
3. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  

复制代码

再看看上面的Item上数据，里面有个GridView，显然这个GridView也是需要做数据适配的，这个数据反应的是从网络加载图片，比较简单，看代码NoScrollGridAdapter.java

1.   ......  
   
2. Override  
   
3. public View getView(int position, View convertView, ViewGroup parent) {  
   
4.     View view = View.inflate(ctx, R.layout.item_gridview, null);  
   
5.     ImageView imageView = (ImageView) view.findViewById(R.id.iv_image);  
   
6.     DisplayImageOptions options = new DisplayImageOptions.Builder()//  
   
7.             .cacheInMemory(true)//  
   
8.             .cacheOnDisk(true)//  
   
9.             .bitmapConfig(Config.RGB_565)//  
   
10.             .build();  
    
11.     ImageLoader.getInstance().displayImage(imageUrls.get(position),  
    
12.             imageView, options);  
    
13.     return view;  
    
14. }  
    
15.     ......  

复制代码

http://blog.csdn.net/allen315410/article/details/40264551#