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

93 阅读 0 评论 62 点赞

我是靠谱客的博主活泼指甲油，最近开发中收集的这篇文章主要介绍viewPager+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;
}
}
}

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

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