Android：ViewPager扩展的具体解释——导航ViewPagerIndicator（有图片缓存，异步加载图片）

我们已经用viewpager该。 github那里viewpager扩展，导航风格更丰富。这个开源项目ViewPagerIndicator。非常好用，但样品是比较简单，实际用起来是非常不延长。例如，在fragment里进行图片缓存和图片异步载入。

以下是ViewPagerIndicator源代码执行后的效果。大家也都看过了，我多此一举截几张图。

下载源代码请点击这里

===========================================华丽的切割线========================================

以下是我改装过的，可异步载入图片，可图片缓存：

看到美女你心动了没有呢？

package com.example.viewpagerindicatortest;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import com.viewpagerindicator.TabPageIndicator;


/**
 * 基于Fragment的Tab样式的viewpager；
 * 
 * @author andy
 * 
 * 很多其它详情请訪问博客：http://blog.csdn.net/lyc66666666666
 */
public class SampleTabsDefault extends FragmentActivity {
	
	//tab标题
    private static final String[] CONTENT = new String[] { "Recent", "Artists", "Albums", "Songs", "Playlists", "Genres" ,"test"};

	private List<SubFragment> list = new ArrayList<SubFragment>();


	String[] urls = new String[] {

			"http://a.hiphotos.baidu.com/image/pic/item/3bf33a87e950352ad6465dad5143fbf2b2118b6b.jpg",
			"http://a.hiphotos.baidu.com/image/pic/item/c8177f3e6709c93d002077529d3df8dcd0005440.jpg",
			"http://f.hiphotos.baidu.com/image/pic/item/7aec54e736d12f2ecc3d90f84dc2d56285356869.jpg",
			"http://e.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de308a87fc96eef01f3a297969.jpg",
			"http://d.hiphotos.baidu.com/image/pic/item/f31fbe096b63f624b88f7e8e8544ebf81b4ca369.jpg",
			"http://h.hiphotos.baidu.com/image/pic/item/11385343fbf2b2117c2dc3c3c88065380cd78e38.jpg",
			"http://c.hiphotos.baidu.com/image/pic/item/3801213fb80e7bec5ed8456c2d2eb9389b506b38.jpg"

	};
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_tabs);
        
        /*
         * 初始化：组装多个fragment
         * 第一次创建subfragment不会运行onCreateView方法
         */
        for (int i = 0; i < 7; i++) {
        	
        	SubFragment fragment =new SubFragment(urls[i]);
			list.add(fragment);
		}
        
        
        
        
        ViewPager pager = (ViewPager)findViewById(R.id.pager);
        pager.setAdapter(new MyAdapter(getSupportFragmentManager(),list));//设置适配器

        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(pager);//
        
        
        
    }

    
    /**
     * FragmentPagerAdapter用来适配Fragment
     */
    class MyAdapter extends FragmentPagerAdapter {
    	
    	List<SubFragment> mList;
    	
		public MyAdapter(FragmentManager fm,List<SubFragment> list) {
			super(fm);
			mList = list;
		}

		
		/**
		 * FragmentPagerAdapter初始化item的时候会调用一次getItem。
		 * 而第二次返回item则不调用getItem方法，而是运行SubFragment的onCreateView方法。
		 * 也就是说仅仅有在与fragment关联的时候会调用一次getItem，以后则不调用；
		 */
		@Override
		public Fragment getItem(int position) {
			
			return mList.get(position);

		}


		/*
		 * 返回title
		 */
        @Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position % CONTENT.length].toUpperCase();
        }

        /*
         * 返回总页数
         */
        @Override
        public int getCount() {
          return mList.size();
        }
        
        
    }
    
    
    
}

package com.example.viewpagerindicatortest;

import java.io.IOException;
import java.lang.ref.SoftReference;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.params.CoreConnectionPNames;

import android.annotation.SuppressLint;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;


/**
 * 基于Fragment的Tab样式的viewpager；
 * 
 * @author andy
 * 
 * 很多其它详情请訪问博客：http://blog.csdn.net/lyc66666666666
 */
@SuppressLint("ValidFragment")
public  class SubFragment extends Fragment {
	
	
    private static final String KEY_CONTENT = "TestFragment:Content";

    private String mContent = "?
??
";
    
    private String url;
 
    public SubFragment(String url) {
    	
    	this.url = url;
    	System.out.println("url:"+url);
    	
	}
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            mContent = savedInstanceState.getString(KEY_CONTENT);
        }
    }
    
    
    View v ;
    
    /**
     * 每次翻页都会调用onCreateView创建一次组件
     */
	@Override
	public View onCreateView(LayoutInflater inflater,
			final ViewGroup container, Bundle savedInstanceState) {

		v = inflater.inflate(R.layout.test, null);


		new AsyncImageLoader().loadDrawable(url, new ImageCallback() {

			@SuppressLint("NewApi")
			public void imageLoaded(Drawable imageDrawable, String imageUrl) {
				System.out.println("图片获取完毕");

				ImageView image = (ImageView) v.findViewById(R.id.img);
				image.setBackground(imageDrawable);
				
			}
		});

		return v;
	}

    
	

    /**
	 * 定义回调接口
	 */
	public interface ImageCallback {
		public void imageLoaded(Drawable imageDrawable, String imageUrl);
	}
    
    /**
	 * 异步载入图片
	 */
	static class AsyncImageLoader {
		

	    Global global;

		public AsyncImageLoader() {
			global = Global.getInstance();
		}


		/**
		 * 创建子线程载入图片
		 * 子线程载入完图片交给handler处理（子线程不能更新ui，而handler处在主线程，能够更新ui）
		 * handler又交给imageCallback，imageCallback需要自己来实现。在这里能够对回调參数进行处理
		 *
		 * @param imageUrl ：需要载入的图片url
		 * @param imageCallback：
		 * @return
		 */
		public Drawable loadDrawable(final String imageUrl,
				final ImageCallback imageCallback) {
			
			//假设缓存中存在图片  ，则首先使用缓存
			if (global.getCache(imageUrl)!=null) {
				System.out.println("存在缓存~~~~~~~~~~~~~~~~~");
				SoftReference<Drawable> softReference = global.getCache(imageUrl);
				Drawable drawable = softReference.get();
				if (drawable != null) {
					imageCallback.imageLoaded(drawable, imageUrl);//运行回调
					return drawable;
				}
			}

			/**
			 * 在主线程里运行回调。更新视图
			 */
			final Handler handler = new Handler() {
				public void handleMessage(Message message) {
					imageCallback.imageLoaded((Drawable) message.obj, imageUrl);
				}
			};

			
			/**
			 * 创建子线程訪问网络并载入图片 ，把结果交给handler处理
			 */
			new Thread() {
				@Override
				public void run() {
					Drawable drawable = loadImageFromUrl(imageUrl);
					// 下载完的图片放到缓存里
					global.setCache(imageUrl, new SoftReference<Drawable>(drawable));
					Message message = handler.obtainMessage(0, drawable);
					handler.sendMessage(message);
				}
			}.start();
			
			return null;
		}

		
		/**
		 * 下载图片  （注意HttpClient 和httpUrlConnection的差别）
		 */
		public Drawable loadImageFromUrl(String url) {

			try {
				HttpClient client = new DefaultHttpClient();
				client.getParams().setParameter(CoreConnectionPNames.CONNECTION_TIMEOUT, 1000*15);
				HttpGet get = new HttpGet(url);
				HttpResponse response;

				response = client.execute(get);
				if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
					HttpEntity entity = response.getEntity();

					Drawable d = Drawable.createFromStream(entity.getContent(),
							"src");

					return d;
				} else {
					return null;
				}
			} catch (ClientProtocolException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}

			return null;
		}

		

	}
	
	
	@Override
	public void onSaveInstanceState(Bundle outState) {
		super.onSaveInstanceState(outState);
		outState.putString(KEY_CONTENT, mContent);
	}
	
}

package com.example.viewpagerindicatortest;

import java.lang.ref.SoftReference;
import java.util.HashMap;

import android.graphics.drawable.Drawable;

/**
 * 全局变量。以软引用方式存放图片缓存
 * 
 * @author andy
 * 
 * 很多其它详情请訪问博客：http://blog.csdn.net/lyc66666666666
 */
public class Global {

	// 软引用，使用内存做暂时缓存 （程序退出，或内存不够则清除软引用）
	private static HashMap<String, SoftReference<Drawable>> imageCache;

	private static Global global;

	public static Global getInstance() {

		if (global == null) {
			global = new Global();
		}

		if (imageCache == null) {
			imageCache = new HashMap<String, SoftReference<Drawable>>();
		}

		return global;

	}

	
	//存放缓存
	public void setCache(String url, SoftReference<Drawable> softReference) {

		imageCache.put(url, softReference);
		
	}

	//获取缓存
	public SoftReference<Drawable> getCache(String url) {
		
		return imageCache.get(url);
		
	}
	
	//清除缓存
	public void clearCache() {
		if (imageCache.size() > 0) {
			imageCache.clear();
		}
	}
	
	
}

simple_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2011 Jake Wharton

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

test.xml

<?
xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

AndroidMainfest.xml

<?xml version="1.0" encoding="utf-8"?
>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.viewpagerindicatortest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    
    <uses-permission android:name="android.permission.INTERNET"/>
    
        
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        
        
         <activity
            android:name=".SampleTabsDefault"
            android:label="@string/app_name"
            android:theme="@style/Theme.PageIndicatorDefaults">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

点击下载源代码