viewPager+photoView實現網路圖片載入左右滑動+手勢縮放功能+滑動到下一頁其他頁面恢復預設大小
阿新 • • 發佈：2019-02-18
前面兩篇文章，我們講了自定義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;
}
}
}
到這裡就輕鬆的實現了，網路圖片的載入，並且支援圖片的左右滑動和手勢縮放。
下篇文章了，我們會介紹如何給網路載入圖片時候，新增進度條。提升使用者體驗。敬請期待！