[置顶] viewPager+photoView实现网络图片加载左右滑动+手势缩放功能+滑动到下一页其他页面恢复默认大小
2016-06-07 11:41
861 查看
前面两篇文章,我们讲了自定义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,把下边的代码复制到这个类当中,注意把包名换成自己的。
3.重写application类,进行imageLoader使用之前的设置。这个是必须的,因为imageLoader在设置之前必须进行设置。
4.最后只需要在,我们的显示主页面,提供图片的url地址,然后通过我们自定义的iamgeLoaderUtils 工具类的图片加载方法,加载显示网络图片即可。在之前显示本地资源的基础之上,只需要修改数据源,和调用一下iamgeLoaderUtils工具类的图片下载设置显示方法即可。具体见以下代码,都做了注释,很好理解。
到这里就轻松的实现了,网络图片的加载,并且支持图片的左右滑动和手势缩放。
下篇文章了,我们会介绍如何给网络加载图片时候,添加进度条。提升用户体验。敬请期待!
如果没有看的话可以先阅读以下,因为今天网络加载图片的功能,实在这个基础上做的修改,会基于之前的基础上讲解。
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; } } }
到这里就轻松的实现了,网络图片的加载,并且支持图片的左右滑动和手势缩放。
下篇文章了,我们会介绍如何给网络加载图片时候,添加进度条。提升用户体验。敬请期待!
相关文章推荐
- 软件定义网络学习总结
- TCP为什么要三次握手,不是两次四次?
- openStream打开网络地址获取文件流
- C++线程与网络接口技术(第一节:线程及其创建,调度与回收知识)
- C# 监听HTTP请求
- Apache http安装
- (转)Go和HTTPS
- 计算机网络体系结构
- 详解ssh/https远程连接Git服务器
- 一个单页网站也能流量过亿!这个网络穿透方法被90%的站长忽略了
- 计算机网络体系结构
- 图解使用Telnet程序手工发送邮件
- C#模拟http 发送post或get请求的简单实例
- RxVolley使用文档 —— RxVolley = Volley + RxJava + OkHttp
- RxVolley使用文档 —— RxVolley = Volley + RxJava + OkHttp
- 在WinForm中发送HTTP请求的实现方法
- 架设证书服务器 及 让IIS启用HTTPS服务
- ios https单向验证
- 基于tomcat 7.0.68 的websocket 实现,及通过 HttpSessionId 实现websocket session 共享
- Neural Networks and Deep Learning 学习笔记(一)