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 }