viewPager+photoView实现网络图片加载左右滑动+手势缩放功能+滑动到下一页其他页面恢复默认大小_photoview加载网络图片

前面两篇文章，我们讲了自定义viewpager+photoView实现本地图片的加载和收缩缩放。实现本地相册功能。

如果没有看的话可以先阅读以下，因为今天网络加载图片的功能，实在这个基础上做的修改，会基于之前的基础上讲解。

1.  http://blog.csdn.net/beibaokongming/article/details/51559279

2.  http://blog.csdn.net/beibaokongming/article/details/51583351

但是我们工作中用到的大部分都是加载网络图片，今天我们就来看一下，怎样加载网络图片。

加载网络图片我们用到的是imageLoader开源框架。不需要我们考虑OOM的问题，也不需要考虑异步更新Ui的问题，用着真的非常的爽。

具体怎样使用呢？下面给处具体操作步骤。

1.将imageLoader的jar包，复制到libs文件夹下面。如果没有这个jar包可以在这个地址下载：

http://download.csdn.net/detail/beibaokongming/9543394

2.写一个工具类ImageLoaderUtils,把下边的代码复制到这个类当中，注意把包名换成自己的。

package com.xixiangfu.photoview.util;
 
import java.io.File;
 
import android.graphics.Bitmap.Config;
import android.os.Handler;
import android.util.Log;
import android.widget.ImageView;
 
import com.nostra13.universalimageloader.cache.disc.DiskCache;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.DisplayImageOptions.Builder;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.listener.ImageLoadingListener;
import com.xixiangfu.photoview.R;
/**
 * imageLoader加载图片的工具类
 * 在使用imageLoader之前必须现在applicition类中，设置imageLoader
 * @author Administrator
 *
 *	图片如果需要缓存到硬盘的的话，注意需要添加硬盘读写权限
 */
public class ImageLoaderUtils {
	
	static public Builder options_builder = new DisplayImageOptions.Builder()
			.resetViewBeforeLoading(true) // 在加载之前设置一个视图
			.cacheInMemory(true) // 图片是否缓存到内存
			.cacheOnDisk(false) // 图片是否缓存到硬盘
			.imageScaleType(ImageScaleType.EXACTLY_STRETCHED) // 设置图片显示样式
			.showImageOnLoading(R.drawable.ic_launcher)//在加载图片的过程中，显示的图片
			.bitmapConfig(Config.RGB_565) // bitmap的配置
			.handler(new Handler()); // 创建一个handler异步显示图片
			
	/**
	 * 设置全局图片选项设置
	 * @param aOnloadingImageId
	 * @param aEmptyUriImageId
	 * @param aLoadFailImageId
	 */
	static public void setGlobalImageOptions(int aOnloadingImageId,
			int aEmptyUriImageId,int aLoadFailImageId){
		//例如
//		.showImageOnLoading(R.drawable.ic_stub) // resource 
//		.showImageForEmptyUri(R.drawable.ic_empty) // resource 
//		.showImageOnFail(R.drawable.ic_error) // resource 
		options_builder.showImageOnLoading(aOnloadingImageId)//图片加载过程中显示的图片
		.showImageForEmptyUri(aEmptyUriImageId)//图片为空的时候显示什么
		.showImageOnFail(aLoadFailImageId);//图片加载失败之后显示什么
		
	}
	
	/**
	 * 根据url加载图片，并且给view展示，并且可以添加监听。
	 * @param aUrl  图片的额加载地址
	 * @param aView	 要显示图片的view
	 * @param aListener 加载图片的监听
	 */
	
	static public void displayImageUrl(String aUrl, ImageView aView,ImageLoadingListener aListener) {
	    Log.i("TAG", "displayImageUrl aUrl = "+aUrl);
	    
		if(aListener==null){
			//如果没添加监听的话，调用这个方法
			ImageLoader.getInstance().displayImage(aUrl, aView,options_builder.build());
		}else{
			//添加了监听，调用这个方法
			ImageLoader.getInstance().displayImage(aUrl, aView,options_builder.build(),aListener);
		}
	}
	
	/**
	 * 根据url确定是否需要缓存
	 * @param url
	 * @return
	 */
	static public boolean isImageUrlCached(String url){
		if(url==null)
			return false;
		try {
			DiskCache cache = ImageLoader.getInstance().getDiskCache();
			if(cache==null)
				return false;
			File file = cache.get(url);
			if(file!=null&&file.exists()){//如果文件存在，并且文件的缓存的目标存在的话，设置缓存文件
				return true;
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return false;
	}
	
	
	static public void cacheImageUrl(String url,ImageLoadingListener aListener){
		ImageLoader.getInstance().loadImage(url, options_builder.build(), aListener);
	}
	
	/**
	 * 检查文件路径是否存在，根据得到的路径，创建一个文件出来
	 * @param aPath
	 */
	static public void checkPath(String aPath){
		new File(aPath).getParentFile().mkdirs();
	}
}

3.重写application类，进行imageLoader使用之前的设置。这个是必须的，因为imageLoader在设置之前必须进行设置。

package com.xixiangfu.photoview;
 
import java.io.File;
 
import android.app.Application;
 
import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiscCache;
import com.nostra13.universalimageloader.cache.disc.naming.HashCodeFileNameGenerator;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;
import com.nostra13.universalimageloader.core.download.BaseImageDownloader;
import com.nostra13.universalimageloader.utils.StorageUtils;
 
/**
 * 重写application类，在这里定义一些全局变量，或者初始化一些操作
 * 
 * @author Administrator
 * 
 */
public class PhotoViewApplication extends Application {
 
	@Override
	public void onCreate() {
		super.onCreate();
		// 在使用imageLoader之前，必须先设置imageLoader
		initImageLoader();
	}
 
	  /**
     * 初始化图片控件加载器配置
     */
    public void initImageLoader() {
        // 创建默认的ImageLoader配置参数
        File cacheDir = StorageUtils.getCacheDirectory(this);
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(this)
 
        .threadPoolSize(3)
                // default
                .threadPriority(Thread.NORM_PRIORITY - 1)
                // default
                .tasksProcessingOrder(QueueProcessingType.FIFO)
                // default
                .denyCacheImageMultipleSizesInMemory().memoryCacheSize(8 * 1024 * 1024)
                .diskCacheSize(50 * 1024 * 1024).diskCache(new UnlimitedDiscCache(cacheDir)) // default
                .diskCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default
                .imageDownloader(new BaseImageDownloader(this)) // default
                .defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default
                .build();
 
        // Initialize ImageLoader with configuration.
        ImageLoader.getInstance().init(config);
    }
}

4.最后只需要在，我们的显示主页面，提供图片的url地址，然后通过我们自定义的iamgeLoaderUtils 工具类的图片加载方法，加载显示网络图片即可。在之前显示本地资源的基础之上，只需要修改数据源，和调用一下iamgeLoaderUtils工具类的图片下载设置显示方法即可。具体见以下代码，都做了注释，很好理解。

package com.xixiangfu.photoview;
 
import com.nostra13.universalimageloader.core.assist.FailReason;
import com.nostra13.universalimageloader.core.listener.ImageLoadingListener;
import com.xixiangfu.photoview.util.ImageLoaderUtils;
 
import uk.co.senab.photoview.PhotoViewAttacher;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView.ScaleType;
 
/**
 * 支持手势缩放的图片浏览Demo(滑过的页面会恢复之前默认大小) 实现photoView+ViewPager
 * 
 * @author Administrator
 * 
 */
public class MainActivity extends Activity {
	private ViewPager viewPager;// 声明ViewPager
	// 创建数据源，这里采用本地数据源
	private int[] photoId = { R.drawable.icon_001, R.drawable.icon_002,
			R.drawable.icon_003 };
	// 创建网络数据源
	private String[] urls = {
			"http://file.otcgd.com/travel/80/line/da/20110314/2011314_1280358529.jpg",
			"http://file25.mafengwo.net/M00/C1/0A/wKgB4lImkp2AbhsjAA3FZePQ0-o73.jpeg",
			"http://www.373sqs.com/upfile/images/2009-12/9/200912910821692.jpg",
			"http://img101.mypsd.com.cn/20120526/1/Mypsd_176980_201205260857370023B.jpg",
			"http://photo.66diqiu.com/uploads/756/ue/image/20141220/1419058611477838.jpg",
			"http://pic12.nipic.com/20110221/2707401_092004783000_2.jpg",
			"http://pic.nipic.com/2008-05-20/2008520112050960_2.jpg",
			"http://pic16.nipic.com/20110913/8361282_172836540179_2.jpg", };
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
 
		setContentView(R.layout.activity_main);
		setVies();// 初始化控件
		// 给viewPager设置adapter，将每个图片设置到每个页面当中
		viewPager.setAdapter(new MyAdapter());
		// 给viewPager设置监听
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
 
			@Override
			public void onPageSelected(int arg0) {
				// viewPager得到页面的数量
				int childCount = viewPager.getChildCount();
 
				// 遍历当前所有加载过的PhotoView，恢复所有图片的默认状态
 
				for (int i = 0; i < childCount; i++) {
					View childAt = viewPager.getChildAt(i);
 
					try {
						if (childAt != null && childAt instanceof PhotoView) {
							PhotoView photoView = (PhotoView) childAt;// 得到viewPager里面的页面
							PhotoViewAttacher mAttacher = new PhotoViewAttacher(
									photoView);// 把得到的photoView放到这个负责变形的类当中
							// mAttacher.getDisplayMatrix().reset();//得到这个页面的显示状态，然后重置为默认状态
							mAttacher.setScaleType(ScaleType.FIT_XY);// 设置充满全屏
						}
					} catch (Exception e) {
						e.printStackTrace();
					}
				}
			}
 
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
 
			}
 
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
 
			}
		});
	}
 
	/**
	 * 初始化控件
	 */
	private void setVies() {
		viewPager = (ViewPager) findViewById(R.id.viewPager);
	}
 
	/**
	 * 自定义pagerAdapter
	 */
	public class MyAdapter extends PagerAdapter {
		// 得到要显示的图片数量
		@Override
		public int getCount() {
			return urls.length;//得到网络图片url的数量
			//return photoId.length;//得到本地资源图片id的数量
		}
 
		@Override
		public View instantiateItem(ViewGroup container, int position) {
			PhotoView photoView = new PhotoView(container.getContext());
 
			// 这里加载的是本地数据源
			// photoView.setImageResource(photoId[position]);
 
			// 这里加载的是网络数据源,调用自己写的ImageLoaderUtils工具类中的方法，给上url,给上view,添加监听。就会加载网络图片显示出来了
			ImageLoaderUtils.displayImageUrl(urls[position], photoView,
					new ImageLoadingListener() {
 
						@Override
						public void onLoadingStarted(String imageUri, View view) {
							// TODO Auto-generated method stub
 
						}
 
						@Override
						public void onLoadingFailed(String imageUri, View view,
								FailReason failReason) {
							// TODO Auto-generated method stub
 
						}
 
						@Override
						public void onLoadingComplete(String imageUri,
								View view, Bitmap loadedImage) {
							// TODO Auto-generated method stub
 
						}
 
						@Override
						public void onLoadingCancelled(String imageUri,
								View view) {
							// TODO Auto-generated method stub
 
						}
					});
 
			// 然后将加载了图片的photoView添加到viewpager中，并且设置宽高
			container.addView(photoView, LayoutParams.MATCH_PARENT,
					LayoutParams.MATCH_PARENT);
			// 设置图片显示为充满全屏
			photoView.setScaleType(ScaleType.FIT_XY);
 
			return photoView;
		}
 
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}
 
		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}
	}
}

到这里就轻松的实现了，网络图片的加载，并且支持图片的左右滑动和手势缩放。

下篇文章了，我们会介绍如何给网络加载图片时候，添加进度条。提升用户体验。敬请期待！