ViewPager 可左右滑动和缩放的图片浏览

最近因为要做一个项目，需要使用到图片的浏览。我就自己在网上找了些资料，然后加以修改整理后出来一个demo，希望可以帮助到需要的人。同时这也是我第一个技术博客。

在做之前首先需要了解一下什么是ViewPager，怎么使用ViewPager。我这里提供一篇文章给大家 http://www.2cto.com/kf/201411/353975.html 我这里不在赘述了。

好了 了解完可以开始了

PS 我不知道怎么制作那种动态的效果图，如果有谁知道请告诉我 我将万分感谢

一步一步来

首先先要写个布局 ViewPager的布局 activity_main.xml

1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
3     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
4     android:paddingRight="@dimen/activity_horizontal_margin"
5     android:paddingTop="@dimen/activity_vertical_margin"
6     android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
7     android:orientation="vertical">
8
9     <LinearLayout
10         android:id="@+id/linearlayout"
11         android:layout_width="300dp"
12         android:layout_height="300dp"
13         android:background="@drawable/bg_common_frames"
14         android:layout_gravity="center"
15         >
16
17         <android.support.v4.view.ViewPager
18             android:id="@+id/viewpager"
19             android:layout_width="wrap_content"
20             android:layout_height="wrap_content"
21             android:layout_gravity="center"
22             />
23
24     </LinearLayout>
25
26
27
28 </LinearLayout>

对应的效果是这样的 请看 有点丑 不管啦。用了一张底图 在上面代码中的 LinearLayout



然后是图片详情布局 image_details.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
6     <android.support.v4.view.ViewPager
7         android:id="@+id/view_pager"
8         android:layout_width="match_parent"
9         android:layout_height="match_parent">
10     </android.support.v4.view.ViewPager>
11
12     <TextView
13         android:id="@+id/page_text"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:layout_alignParentBottom="true"
17         android:layout_centerHorizontal="true"
18         android:layout_marginBottom="10dp"
19         android:textColor="#fff"
20         android:textSize="18sp" />
21
22 </RelativeLayout>

最后一个布局是缩放的布局 zoom_image_layout.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <com.higgs.mviewpager.ZoomImageView xmlns:android="http://schemas.android.com/apk/res/android"
3     android:id="@+id/zoom_image_view"
4     android:layout_width="match_parent"
5     android:layout_height="match_parent"
6     android:background="#000000" >
7
8 </com.higgs.mviewpager.ZoomImageView>

基本的布局我们完成了

再看代码吧

我这里因为迎合大部分朋友的需求 ，改成了从网络上下载图片的方式作为图片来源

先模拟一个图片URL的类

1 package com.higgs.mviewpager;
2
3 public class Images {
4
5     public final static String[] imageUrls = new String[]{
6             "http://img.my.csdn.net/uploads/201309/01/1378037235_3453.jpg",
7             "http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jpg",
8             "http://img.my.csdn.net/uploads/201309/01/1378037235_9280.jpg",
9             "http://img.my.csdn.net/uploads/201309/01/1378037234_3539.jpg",
10             "http://img.my.csdn.net/uploads/201309/01/1378037234_6318.jpg",
11     };
12 }

然后就是实现代码了

说一下思路， 先获取ViewPager 然后往ViewPager 添加图片，但是图片是网络上的 所以要先下载后在添加进去，这里处于防止加载比较多的图片时造成OOM问题 所以引入了 LruCache 类缓存技术。先讲下载的图片存入手机里并缓存下来，一为了节省用户的数据流量，二为了之后的加载速度。有了缓冲下次就不用在重复去网络上下载了。 代码如下

1 package com.higgs.mviewpager;
2
3 import android.app.Activity;
4 import android.content.Intent;
5 import android.graphics.Bitmap;
6 import android.graphics.BitmapFactory;
7 import android.os.AsyncTask;
8 import android.os.Bundle;
9 import android.os.Environment;
10 import android.support.v4.view.PagerAdapter;
11 import android.support.v4.view.ViewPager;
12 import android.util.Log;
13 import android.view.View;
14 import android.view.ViewGroup;
15 import android.widget.ImageView;
16 import android.widget.Toast;
17
18 import java.io.BufferedInputStream;
19 import java.io.BufferedOutputStream;
20 import java.io.BufferedReader;
21 import java.io.File;
22 import java.io.FileOutputStream;
23 import java.io.IOException;
24 import java.io.InputStream;
25 import java.io.InputStreamReader;
26 import java.net.HttpURLConnection;
27 import java.net.URL;
28 import java.util.ArrayList;
29
30
31 public class MainActivity extends Activity {
32
33     private static final String TAG = "MainActivity";
34     private ImageLoader  imageLoader = ImageLoader.getInstance();  //获取图片进行管理的工具类实例。
35
36     private ViewPager viewpager;
37     private ArrayList<View> viewList;
38 //    private ImageView imageView1;
39 //    private ImageView imageView2;
40 //    private ImageView imageView3;
41     @Override
42     protected void onCreate(Bundle savedInstanceState) {
43         super.onCreate(savedInstanceState);
44         setContentView(R.layout.activity_main);
45         initView();
46     }
47
48
49     private void initView() {
50         viewpager = (ViewPager) findViewById(R.id.viewpager); //获取viewpager
51         viewList = new ArrayList<View>();   //保存view，用于PagerAdapter
52         for(int i = 0; i<Images.imageUrls.length; i++){
53             new DownLoadPic().execute(i);//图片有几张就下载几张
54         }
55
56
57
58 //
59 //        imageView1 = new ImageView(this);
60 //        imageView2 = new ImageView(this);
61 //        imageView3 = new ImageView(this);
62 //        imageView1.setImageResource(R.drawable.b);
63 //        imageView2.setImageResource(R.drawable.c);
64 //        imageView3.setImageResource(R.drawable.d);
65 //
66 //        viewList.add(imageView1);
67 //        viewList.add(imageView2);
68 //        viewList.add(imageView3);
69
70         viewpager.setAdapter(pagerAdapter);  //加入适配器
71         Log.e("TAG1", "" + viewList.size());
72
73     }
74
75
76     /**
77      * 图片异步下载内部类
78      */
79
80     class DownLoadPic extends AsyncTask<Integer,Void,Bitmap>{
81
82         /**
83          * 记录每个图片对应的位置
84          */
85         private int mposition;
86
87         @Override
88         protected Bitmap doInBackground(Integer... params) {
89
90             mposition = params[0];//获取传过来的图片position （下标）
91             String strurl = Images.imageUrls[mposition];  //通过下标获得图片URL
92             File imageFile = new File(getImagePath(strurl)); //获取图片在本地手机中的位置路径
93             if (!imageFile.exists()) {  //判断是否存在手机里
94                 doPost(strurl);//如果没有就下载图片
95             }
96             if (strurl != null) {
97                 Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(imageFile.getPath(),
98                         290);  //压缩图片  我这里写的是290
99                 if (bitmap != null) {
100                     imageLoader.addBitmapToMemoryCache(strurl, bitmap); //将图片加入缓冲  LruCache中
101                     return bitmap;
102                 }
103             }
104
105
106             return null;
107         }
108
109         @Override
110         protected void onPostExecute(Bitmap o) {
111             ImageView imageView = new ImageView(MainActivity.this);
112             imageView.setImageBitmap(o);
113             imageView.setOnClickListener(new View.OnClickListener() {
114                 @Override
115                 public void onClick(View v) {
116
117                     Intent intent = new Intent(MainActivity.this, ImageDetailsActivity.class);//打开图片详情类
118                     intent.putExtra("image_position", mposition);
119                     MainActivity.this.startActivity(intent);
120                 }
121             });
122
123             viewList.add(imageView);
124             pagerAdapter.notifyDataSetChanged();  //这句话一定不能少  ，不然会有异常
125             Log.e("TAG2", "" + viewList.size());
126
127
128         }
129
130
131     }
132
133     /**
134      * ViewPager的适配器  重写下面几个方法就可以了
135      */
136
137     PagerAdapter pagerAdapter = new PagerAdapter() {
138
139         @Override
140         public int getCount() {
141
142             return viewList.size();
143         }
144
145         @Override
146         public boolean isViewFromObject(View view, Object object) {
147             return view == object;
148         }
149
150         @Override
151         public void destroyItem(ViewGroup container, int position,
152                                 Object object) {
153             container.removeView(viewList.get(position));
154
155         }
156
157         @Override
158         public int getItemPosition(Object object) {
159
160             return super.getItemPosition(object);
161         }
162
163         @Override
164         public Object instantiateItem(ViewGroup container, int position) {
165             container.addView(viewList.get(position));
166             return viewList.get(position);
167         }
168
169     };
170
171
172     /**
173      * 下载图片方法  并将图片缓冲至手机指定位置中
174      * @param urlstr  图片URL
175      */
176     public void doPost(String urlstr){
177         if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
178             Log.d("TAG", "monted sdcard");
179         } else {
180             Log.d("TAG", "has no sdcard");
181         }
182         HttpURLConnection con = null;
183         FileOutputStream fos = null;
184         BufferedOutputStream bos = null;
185         BufferedInputStream bis = null;
186         File imageFile = null;
187         try {
188             URL url = new URL(urlstr);
189             con = (HttpURLConnection) url.openConnection();
190             con.setConnectTimeout(5 * 1000);
191             con.setReadTimeout(15 * 1000);
192             con.setDoInput(true);
193             con.setDoOutput(true);
194             bis = new BufferedInputStream(con.getInputStream());
195             imageFile = new File(getImagePath(urlstr));
196             fos = new FileOutputStream(imageFile);
197             bos = new BufferedOutputStream(fos);
198             byte[] b = new byte[1024];
199             int length;
200             while ((length = bis.read(b)) != -1) {// 写入手机中
201                 bos.write(b, 0, length);
202                 bos.flush();
203             }
204         } catch (Exception e) {
205             e.printStackTrace();
206         } finally {
207             try {
208                 if (bis != null) {
209                     bis.close();
210                 }
211                 if (bos != null) {
212                     bos.close();
213                 }
214                 if (con != null) {
215                     con.disconnect();
216                 }
217             } catch (IOException e) {
218                 e.printStackTrace();
219             }
220         }
221         if (imageFile != null) {
222             Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(imageFile.getPath(),
223                     290);
224             if (bitmap != null) {
225                 imageLoader.addBitmapToMemoryCache(urlstr, bitmap);
226             }
227         }
228     }
229
230     /**
231      * 获取图片的本地存储路径。
232      *
233      * @param imageUrl
234      *            图片的URL地址。
235      * @return 图片的本地存储路径。
236      */
237     private String getImagePath(String imageUrl) {
238         int lastSlashIndex = imageUrl.lastIndexOf("/");
239         String imageName = imageUrl.substring(lastSlashIndex + 1);
240         String imageDir = Environment.getExternalStorageDirectory().getPath()
241                 + "/pwxceshibao/";
242         File file = new File(imageDir);
243         if (!file.exists()) {
244             file.mkdirs();
245         }
246         String imagePath = imageDir + imageName;
247         return imagePath;
248     }
249
250 }