Android: ViewPager extension details-ViewPagerIndicator with navigation (with image cache and asynchronous image loading)

Viewpager has been used. viewpager has been extended on github, and the navigation style is richer. This open-source project is ViewPagerIndicator, which is very useful, but the example is relatively simple, in practice, a lot of extensions are required, such as image caching and asynchronous loading in fragment.

The following is the effect of ViewPagerIndicator source code running. You have also read it. I want to cut a few more images;

Click here to download the source code

========================================================== ======================================================== ======

The following is a modified image that can be asynchronously loaded and cached:

Why don't you feel new when you see the beauty?

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-based Tab-style viewpager; ** @ author andy ** for more details, visit the blog: http://blog.csdn.net/lyc66666666666 */public class SampleTabsDefault extends FragmentActivity {// tab title private static final String [] CONTENT = new String [] {"Recent", "Artists", "Albums ", "Songs", "Playlists", "Genres", "test"}; private List
 
  
List = new ArrayList
  
   
(); 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);/** initialization: Assemble multiple fragment * The onCreateView method is not executed when subfragment is created for the first time */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 (getsuppfrfragmentmanager (), list); // set the adapter TabPageIndicator indicator = (TabPageIndicator) findViewById (R. id. indicator); indicator. setViewPager (pager); //}/*** FragmentPagerAdapter is used to adapt to Fragment */class MyAdapter extends FragmentPagerAdapter {List
   
    
MList; public MyAdapter (FragmentManager fm, List
    
     
List) {super (fm); mList = list;}/*** the FragmentPagerAdapter calls a getItem when initializing an item. * The getItem method is not called when the second item is returned, instead, the onCreateView method of SubFragment is executed. * That is to say, getItem is called only when it is associated with fragment, But not later. * // @ Overridepublic Fragment getItem (int position) {return mList. get (position);}/** return title */@ Override public CharSequence getPageTitle (int position) {return CONTENT [position % CONTENT. length]. toUpperCase ();}/** total number of returned pages */@ 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. defaultHttpClien T; 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-based Tab-style viewp Ager; ** @ author andy ** For more details visit blog: 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;/*** each page turning call onCreateView to create a component */@ Overridepublic View onCreateView (LayoutInflater inflater, final ViewGroup container, Bundle savedInstanceState) {v = inflater. inflate (R. layout. test, null); new AsyncImageLoader (). loadDrawable (url, new ImageCallback () {@ SuppressLint ("NewApi") p Ublic void imageLoaded (Drawable imageDrawable, String imageUrl) {System. out. println ("image retrieved"); ImageView image = (ImageView) v. findViewById (R. id. img); image. setBackground (imageDrawable) ;}}); return v ;}/ *** define callback interface */public interface ImageCallback {public void imageLoaded (Drawable imageDrawable, String imageUrl );} /*** asynchronously load the image */static class AsyncImageLoader {Global global; public AsyncImageLoader () {Global = Global. getInstance ();}/*** create a sub-thread to load the image * The Sub-thread loads the image and submits it to handler for processing (the Sub-thread cannot update the ui, while the handler is in the main thread and can update the ui) * handler is handed over to imageCallback. imageCallback must be implemented by yourself. Here, callback parameters can be processed ** @ param imageUrl: url of the image to be loaded * @ param imageCallback: * @ return */public Drawable loadDrawable (final String imageUrl, final ImageCallback imageCallback) {// if an image exists in the cache, the cache if (global. getCache (imageUrl )! = Null) {System. out. println ("cache exists ~~~~~~~~~~~~~~~~~ "); SoftReference
 
  
SoftReference = global. getCache (imageUrl); Drawable drawable = softReference. get (); if (drawable! = Null) {imageCallback. imageLoaded (drawable, imageUrl); // execute the callback return drawable;}/*** execute the callback in the main thread to update the view */final Handler handler = new Handler () {public void handleMessage (Message message) {imageCallback. imageLoaded (Drawable) message. obj, imageUrl) ;}};/*** create a sub-Thread to access the network, load the image, and hand the result to handler for processing */new Thread () {@ Overridepublic void run () {Drawable drawable = loadImageFromUrl (imageUrl); // Save the downloaded image to the global cache. setCache (imageUrl, new SoftReference
  
   
(Drawable); Message message = handler. obtainMessage (0, drawable); handler. sendMessage (message );}}. start (); return null;}/*** download the image (note the differences between HttpClient and 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.exe cute (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 ;}@ Overridepublic 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;/*** global variable, which stores image cache in soft reference mode ** @ author andy ** for more details, visit the blog: http://blog.csdn.net/lyc66666666666 */public class Global {// soft reference, using memory for temporary cache (Program exit, or soft reference is cleared if there is not enough memory) private static HashMap
 
  
> ImageCache; private static Global global; public static Global getInstance () {if (global = null) {global = new Global () ;}if (imageCache = null) {imageCache = new HashMap
  
   
> ();} Return global;} // stores the public void setCache (String url, SoftReference
   
    
SoftReference) {imageCache. put (url, softReference);} // obtain the public SoftReference in the cache.
    
     
GetCache (String url) {return imageCache. get (url) ;}// clear the public void cached AchE () {if (imageCache. size ()> 0) {imageCache. clear ();}}}
    
   
  
 

Simple_tabs.xml

Test. xml

AndroidMainfest. xml

Click to download source code