Android image loading: using secondary cache and asynchronous loading of network images

1. Problem Description

Android applications often involve loading a large number of images from the network. In order to improve loading speed and efficiency and reduce network traffic, secondary cache and asynchronous loading mechanisms are used. The so-called secondary cache is to obtain from memory first, then from the file, and then access the network. Memory cache (level 1) is essentially a Map collection that stores the URL and Bitmap information of the image in the form of key-value pairs. Since memory cache will cause heap memory leaks, management is relatively complicated. Third-party components can be used. Experienced users can write components by themselves. File cache is relatively simple and usually can be encapsulated by themselves. Let's take a look at how to optimize network image loading through examples.

2. Case Introduction

List image of case news

3. Main core components

Let's first look at the components written to implement the first-level cache (memory) and the second-level cache (disk file)

1. MemoryCache

To store images in memory (first level cache), a map is used to cache images. The code is as follows:

 public   class MemoryCache {
 // *** number of caches  
 private   static   final   int MAX_CACHE_CAPACITY = 30 ;
 //Use the Bitmap object with Map soft reference to ensure that it will not be garbage collected if there is enough memory space  
 private HashMap<String, SoftReference<Bitmap>> mCacheMap =
 new LinkedHashMap<String, SoftReference<Bitmap>>() {
 private   static   final   long serialVersionUID = 1L;
 //When the number of cached items exceeds the specified size (return true), the earliest cached items will be cleared.  
 protected   boolean removeEldestEntry(
 Map.Entry<String,SoftReference<Bitmap>> eldest){
 return size() > MAX_CACHE_CAPACITY;};
 }; 
 
 /**
 * Get the image from the cache
 * @param id
 * @return If the cache exists and the image has not been released, then return the image, otherwise return null
 */  
 public Bitmap get(String id){
 if (!mCacheMap.containsKey(id)) return   null ;
 SoftReference<Bitmap> ref = mCacheMap.get(id);
 return ref.get();
 } 
 
 /**
 * Add the image to the cache
 * @param id
 * @param bitmap
 */  
 public   void put(String id, Bitmap bitmap){
 mCacheMap.put(id, new SoftReference<Bitmap>(bitmap));
 }
 /**
 * Clear all caches
 */  
 public   void clear() {
 try {
 for (Map.Entry<String,SoftReference<Bitmap>>entry :mCacheMap.entrySet())
 { SoftReference<Bitmap> sr = entry.getValue();
 if ( null != sr ) {
 Bitmap bmp = sr.get();
 if ( null != bmp) bmp.recycle();
 }
 }
 mCacheMap.clear();
 } catch (Exception e) {
 e.printStackTrace();}
 }
 }
2. FileCache

Cache images on disk (secondary cache), the code is as follows

 public   class FileCache {
 //Cache file directory  
 private File mCacheDir;
 /**
 * Create a cache file directory. If there is an SD card, use the SD card. If not, use the system's own cache directory.
 * @param context
 * @param cacheDir The first level directory of the image cache
 */  
 public FileCache(Context context, File cacheDir, String dir){
 if (android.os.Environment.getExternalStorageState().equals, (android.os.Environment.MEDIA_MOUNTED))
 mCacheDir = new File(cacheDir, dir);
 else  
 mCacheDir = context.getCacheDir(); // How to get the system's built-in cache storage path  
 if (!mCacheDir.exists()) mCacheDir.mkdirs();
 }
 public File getFile(String url){
 File f= null ;
 try {
 //Edit the url to solve the Chinese path problem  
 String filename = URLEncoder.encode(url, "utf-8" );
 f = new File(mCacheDir, filename);
 } catch (UnsupportedEncodingException e) {
 e.printStackTrace();
 }
 return f;
 }
 public   void clear(){ //Clear cache files  
 File[] files = mCacheDir.listFiles();
 for (File f:files)f.delete();
 }
 }

3. Write the asynchronous loading component AsyncImageLoader

Android uses a single-threaded model, that is, the application runs in the UI main thread, and Android is a real-time operating system that requires timely response, otherwise an ANR error will occur. Therefore, for time-consuming operations, the UI main thread must not be blocked. It is necessary to start a thread processing (such as image loading in this application) and put the thread into the queue. When the operation is completed, the UI main thread is notified to make changes and the task is removed at the same time - this is an asynchronous task. In Android, asynchrony can be achieved through the AsyncTask used in this series or the thread+handler mechanism. Here it is completely implemented through code writing, so that we can see the essence of the implementation of asynchronous communication more clearly. The code is as follows

 public   class AsyncImageLoader{
 private MemoryCache mMemoryCache; //Memory cache  
 private FileCache mFileCache; //File cache  
 private ExecutorService mExecutorService; //thread pool  
 //Record the ImageView that has loaded the image  
 private Map<ImageView, String> mImageViews = Collections
 .synchronizedMap( new WeakHashMap<ImageView, String>());
 //Save the url of the image being loaded  
 private List<LoadPhotoTask> mTaskQueue = new ArrayList<LoadPhotoTask>();
 /**
 * By default, a thread pool of size 5 is used
 * @param context
 * @param memoryCache The cache used
 * @param fileCache The file cache used
 */  
 public AsyncImageLoader(Context context, MemoryCache memoryCache, FileCache fileCache) {
 mMemoryCache = memoryCache;
 mFileCache = fileCache;
 mExecutorService = Executors.newFixedThreadPool( 5 ); //Create a fixed-size thread pool with a capacity of 5 (maximum number of running threads)  
 }
 /**
 * Load the corresponding image according to the URL
 * @param url
 * @return First get the image from the first-level cache. If there is one, return it directly. If not, get it asynchronously from the file (second-level cache). If not, get it from the network.
 */  
 public Bitmap loadBitmap(ImageView imageView, String url) {
 //First record the ImageView in the Map, indicating that the UI has executed the image loading  
 mImageViews.put(imageView, url);
 Bitmap bitmap = mMemoryCache.get(url); //Get the image from the first level cache first  
 if (bitmap == null ) {
 enquequeLoadPhoto(url, imageView); //Get it from the secondary cache and the network  
 }
 return bitmap;
 } 
 
 /**
 * Add to the image download queue
 * @param url
 */  
 private   void enquequeLoadPhoto(String url, ImageView imageView) {
 //If the task already exists, do not re-add it  
 if (isTaskExisted(url))
 return ;
 LoadPhotoTask task = new LoadPhotoTask(url, imageView);
 synchronized (mTaskQueue) {
 mTaskQueue.add(task); //Add the task to the queue  
 }
 mExecutorService.execute(task); //Submit the task to the thread pool. If the upper limit (5) is not reached, it will run, otherwise it will be blocked.  
 } 
 
 /**
 * Determine whether the task already exists in the download queue
 * @param url
 * @return
 */  
 private   boolean isTaskExisted(String url) {
 if (url == null )
 return   false ;
 synchronized (mTaskQueue) {
 int size = mTaskQueue.size();
 for ( int i= 0 ; i<size; i++) {
 LoadPhotoTask task = mTaskQueue.get(i);
 if (task != null && task.getUrl().equals(url))
 return   true ;
 }
 }
 return   false ;
 } 
 
 /**
 * Get the image from the cache file or the network
 * @param url
 */  
 private Bitmap getBitmapByUrl(String url) {
 File f = mFileCache.getFile(url); //Get the cached image path  
 Bitmap b = ImageUtil.decodeFile(f); //Get the Bitmap information of the file  
 if (b != null ) //Not empty means the cached file is obtained  
 return b;
 return ImageUtil.loadBitmapFromWeb(url, f); //Get the image from the same network  
 } 
 
 /**
 * Determine whether the ImageView has already loaded the image (can be used to determine whether the image needs to be loaded)
 * @param imageView
 * @param url
 * @return
 */  
 private   boolean imageViewReused(ImageView imageView, String url) {
 String tag = mImageViews.get(imageView);
 if (tag == null || !tag.equals(url))
 return   true ;
 return   false ;
 } 
 
 private   void removeTask(LoadPhotoTask task) {
 synchronized (mTaskQueue) {
 mTaskQueue.remove(task);
 }
 } 
 
 class LoadPhotoTask implements Runnable {
 private String url;
 private ImageView imageView;
 LoadPhotoTask(String url, ImageView imageView) {
 this .url = url;
 this .imageView = imageView;
 } 
 
 @Override  
 public   void run() {
 if (imageViewReused(imageView, url)) { //Judge whether ImageView has been reused  
 removeTask( this ); //Delete the task if it has been reused  
 return ;
 }
 Bitmap bmp = getBitmapByUrl(url); //Get the image from the cache file or network  
 mMemoryCache.put(url, bmp); // Put the image into the first-level cache  
 if (!imageViewReused(imageView, url)) { //If ImageView has no image, display the image in the UI thread  
 BitmapDisplayer bd = new BitmapDisplayer(bmp, imageView, url); Activity a = (Activity) imageView.getContext();
 a.runOnUiThread(bd); //Call the run method of the bd component in the UI thread to load the image for the ImageView control  
 }
 removeTask( this ); //Remove a task from the queue  
 }
 public String getUrl() {
 return url;
 }
 } 
 
 /**
 *
 *The run method of the component is executed in the UI thread
 */  
 class BitmapDisplayer implements Runnable {
 private Bitmap bitmap;
 private ImageView imageView;
 private String url;
 public BitmapDisplayer(Bitmap b, ImageView imageView, String url) {
 bitmap = b;
 this .imageView = imageView;
 this .url = url;
 }
 public   void run() {
 if (imageViewReused(imageView, url))
 return ;
 if (bitmap != null )
 imageView.setImageBitmap(bitmap);
 }
 } 
 
 /**
 * Release resources
 */  
 public   void destroy() {
 mMemoryCache.clear();
 mMemoryCache = null ;
 mImageViews.clear();
 mImageViews = null ;
 mTaskQueue.clear();
 mTaskQueue = null ;
 mExecutorService.shutdown();
 mExecutorService = null ;
 }
 }

After writing, it is very convenient to execute asynchronous tasks by simply calling the loadBitmap() method in AsyncImageLoader. It is best to understand the code of the AsyncImageLoader component in combination with the comments, so that you will have a deep understanding of asynchronous communication between threads in Android.

4. Tool class ImageUtil

 public   class ImageUtil {
 /**
 * Get the image from the network and cache it in the specified file
 * @param url image url
 * @param file cache file
 * @return
 */  
 public   static Bitmap loadBitmapFromWeb(String url, File file) {
 HttpURLConnection conn = null ;
 InputStream is = null ;
 OutputStream os = null ;
 try {
 Bitmap bitmap = null ;
 URL imageUrl = new URL(url);
 conn = (HttpURLConnection) imageUrl.openConnection();
 conn.setConnectTimeout( 30000 );
 conn.setReadTimeout( 30000 );
 conn.setInstanceFollowRedirects( true );
 is = conn.getInputStream();
 os = new FileOutputStream(file);
 copyStream(is, os); //Cache the image to disk  
 bitmap = decodeFile(file);
 return bitmap;
 } catch (Exception ex) {
 ex.printStackTrace();
 return   null ;
 finally​
 try {
 if (os != null ) os.close();
 if (is != null ) is.close();
 if (conn != null ) conn.disconnect();
 } catch (IOException e) { }
 }
 } 
 
 public   static Bitmap decodeFile(File f) {
 try {
 return BitmapFactory.decodeStream( new FileInputStream(f), null , null );
 catch (Exception e) { }
 return   null ;
 }
 private   static   void copyStream(InputStream is, OutputStream os) {
 final   int buffer_size = 1024 ;
 try {
 byte [] bytes = new   byte [buffer_size];
 for (;;) {
 int count = is.read(bytes, 0 , buffer_size);
 if (count == - 1 )
 break ;
 os.write(bytes, 0 , count);
 }
 } catch (Exception ex) {
 ex.printStackTrace();
 }
 }
 }

4. Test Application

Timing diagram between components:

1. Write MainActivity

 public   class MainActivity extends Activity {
 ListView list;
 ListViewAdapter adapter;
 @Override  
 public   void onCreate(Bundle savedInstanceState) {
 super .onCreate(savedInstanceState);
 setContentView(R.layout.main);
 list=(ListView)findViewById(R.id.list);
 adapter= new ListViewAdapter( this , mStrings);
 list.setAdapter(adapter);
 }
 public   void onDestroy(){
 list.setAdapter( null );
 super .onDestroy();
 adapter.destroy();
 }
 private String[] mStrings = {
 "http://news.21-sun.com/UserFiles/x_Image/x_20150606083511_0.jpg" ,
 "http://news.21-sun.com/UserFiles/x_Image/x_20150606082847_0.jpg" ,
 …..};
 }

2. Write an adapter

 public   class ListViewAdapter extends BaseAdapter {
 private Activity mActivity;
 private String[] data;
 private   static LayoutInflater inflater= null ;
 private AsyncImageLoader imageLoader; //Asynchronous component   
 
 public ListViewAdapter(Activity mActivity, String[] d) {
 this .mActivity=mActivity;
 data=d;
 inflater = (LayoutInflater)mActivity.getSystemService(
 Context.LAYOUT_INFLATER_SERVICE);
 MemoryCache mcache = new MemoryCache(); //Memory cache  
 File sdCard = android.os.Environment.getExternalStorageDirectory(); //Get SD card  
 File cacheDir = new File(sdCard, "jereh_cache" ); //Cache root directory  
 FileCache fcache = new FileCache (mActivity, cacheDir, "news_img" ); // file cache  
 imageLoader = new AsyncImageLoader(mActivity, mcache,fcache);
 }
 public   int getCount() {
 return data.length;
 }
 public Object getItem( int position) {
 return position;
 }
 public   long getItemId( int position) {
 return position;
 } 
 
 public View getView( int position, View convertView, ViewGroup parent) {
 ViewHolder vh = null ;
 if (convertView == null ) {
 convertView = inflater.inflate(R.layout.item, null );
 vh = new ViewHolder();
 vh.tvTitle=(TextView)convertView.findViewById(R.id.text);
 vh.ivImg=(ImageView)convertView.findViewById(R.id.image);
 convertView.setTag(vh);
 } else {
 vh=(ViewHolder)convertView.getTag();
 }
 vh.tvTitle.setText( "Title information test————" +position);
 vh.ivImg.setTag(data[position]);
 // Load the image asynchronously, first from the first-level cache, then from the second-level cache, and then from the network  
 Bitmap bmp = imageLoader.loadBitmap(vh.ivImg, data[position]);
 if (bmp == null ) {
 vh.ivImg.setImageResource(R.drawable.default_big);
 } else {
 vh.ivImg.setImageBitmap(bmp);
 }
 return convertView;
 }
 private   class ViewHolder{
 TextView tvTitle;
 ImageView ivImg;
 }
 public   void destroy() {
 imageLoader.destroy();
 }
 }