前面两篇文章,我们讲了自定义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,把下边的代码复制到这个类当中,注意把包名换成自己的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100package 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在设置之前必须进行设置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48package 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工具类的图片下载设置显示方法即可。具体见以下代码,都做了注释,很好理解。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137package 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; } } }
到这里就轻松的实现了,网络图片的加载,并且支持图片的左右滑动和手势缩放。
下篇文章了,我们会介绍如何给网络加载图片时候,添加进度条。提升用户体验。敬请期待!
最后
以上就是活泼指甲油最近收集整理的关于viewPager+photoView实现网络图片加载左右滑动+手势缩放功能+滑动到下一页其他页面恢复默认大小的全部内容,更多相关viewPager+photoView实现网络图片加载左右滑动+手势缩放功能+滑动到下一页其他页面恢复默认大小内容请搜索靠谱客的其他文章。
发表评论 取消回复