ListView asynchronously loads Images

ListView is a very practical method to load images asynchronously. It is generally better to use this method to obtain image resources through the network, and the user experience is good, so users do not have to wait, the implementation method is described as follows:
Package cn. wangmeng. test;
 
Import java. io. IOException;
Import java. io. InputStream;
Import java. lang. ref. SoftReference;
Import java.net. MalformedURLException;
Import java.net. URL;
Import java. util. HashMap;
 
Import android. graphics. drawable. Drawable;
Import android. OS. Handler;
Import android. OS. Message;
 
Public class AsyncImageLoader {
 
Private HashMap <String, SoftReference <Drawable> imageCache;
 
Public AsyncImageLoader (){
ImageCache = new HashMap <String, SoftReference <Drawable> ();
}
 
Public Drawable loadDrawable (final String imageUrl, final ImageCallback imageCallback ){
If (imageCache. containsKey (imageUrl )){
SoftReference <Drawable> softReference = imageCache. get (imageUrl );
Drawable drawable = softReference. get ();
If (drawable! = Null ){
Return drawable;
}
}
Final Handler handler = new Handler (){
Public void handleMessage (Message message ){
ImageCallback. imageLoaded (Drawable) message. obj, imageUrl );
}
};
New Thread (){
@ Override
Public void run (){
Drawable drawable = loadImageFromUrl (imageUrl );
ImageCache. put (imageUrl, new SoftReference <Drawable> (drawable ));
Message message = handler. obtainMessage (0, drawable );
Handler. sendMessage (message );
}
}. Start ();
Return null;
}
 
Public static Drawable loadImageFromUrl (String url ){
URL m;
InputStream I = null;
Try {
M = new URL (url );
I = (InputStream) m. getContent ();
} Catch (MalformedURLException e1 ){
E1.printStackTrace ();
} Catch (IOException e ){
E. printStackTrace ();
}
Drawable d = Drawable. createFromStream (I, "src ");
Return d;
}
 
Public interface ImageCallback {
Public void imageLoaded (Drawable imageDrawable, String imageUrl );
}
 
}
The above code is the main method for obtaining images asynchronously. SoftReference is soft reference. It is used to better recycle variables for the system. Duplicate URLs directly return existing resources and implement callback functions, after the data is successfully updated to the UI thread.
Several helper files:
Package cn. wangmeng. test;
 
Public class ImageAndText {
Private String imageUrl;
Private String text;
 
Public ImageAndText (String imageUrl, String text ){
This. imageUrl = imageUrl;
This. text = text;
}
Public String getImageUrl (){
Return imageUrl;
}
Public String getText (){
Return text;
}
}
Package cn. wangmeng. test;
 
Import android. view. View;
Import android. widget. ImageView;
Import android. widget. TextView;
 
Public class ViewCache {
 
Private View baseView;
Private TextView textView;
Private ImageView imageView;
 
Public ViewCache (View baseView ){
This. baseView = baseView;
}
 
Public TextView getTextView (){
If (textView = null ){
TextView = (TextView) baseView. findViewById (R. id. text );
}
Return textView;
}
 
Public ImageView getImageView (){
If (imageView = null ){
ImageView = (ImageView) baseView. findViewById (R. id. image );
}
Return imageView;
}
 
}
ViewCache is a child element layout that assists in obtaining the adapter
Package cn. wangmeng. test;
 
Import java. util. List;
 
Import cn. wangmeng. test. AsyncImageLoader. ImageCallback;
 
Import android. app. Activity;
Import android. graphics. drawable. Drawable;
Import android. view. LayoutInflater;
Import android. view. View;
Import android. view. ViewGroup;
Import android. widget. ArrayAdapter;
Import android. widget. ImageView;
Import android. widget. ListView;
Import android. widget. TextView;
 
Public class ImageAndTextListAdapter extends ArrayAdapter <ImageAndText> {
 
Private ListView listView;
Private AsyncImageLoader asyncImageLoader;
 
Public ImageAndTextListAdapter (Activity activity, List <ImageAndText> imageAndTexts, ListView ){
Super (activity, 0, imageAndTexts );
This. listView = listView;
AsyncImageLoader = new AsyncImageLoader ();
}
 
Public View getView (int position, View convertView, ViewGroup parent ){
Activity activity = (Activity) getContext ();
 
// Inflate the views from XML
View rowView = convertView;
ViewCache viewCache;
If (rowView = null ){
LayoutInflater inflater = activity. getLayoutInflater ();
RowView = inflater. inflate (R. layout. image_and_text_row, null );
ViewCache = new ViewCache (rowView );
RowView. setTag (viewCache );
} Else {
ViewCache = (ViewCache) rowView. getTag ();
}
ImageAndText imageAndText = getItem (position );
 
// Load the image and set it on the ImageView
String imageUrl = imageAndText. getImageUrl ();
ImageView imageView = viewCache. getImageView ();
ImageView. setTag (imageUrl );
Drawable cachedImage = asyncImageLoader. loadDrawable (imageUrl, new ImageCallback (){
Public void imageLoaded (Drawable imageDrawable, String imageUrl ){
ImageView imageViewByTag = (ImageView) listView. findViewWithTag (imageUrl );
If (imageViewByTag! = Null ){
ImageViewByTag. setImageDrawable (imageDrawable );
}
}
});
If (cachedImage = null ){
ImageView. setImageResource (R. drawable. default_image );
} Else {
ImageView. setImageDrawable (cachedImage );
}
// Set the text on the TextView
TextView textView = viewCache. getTextView ();
TextView. setText (imageAndText. getText ());
 
Return rowView;
}
 
}
ImageAndTextListAdapter is the Adapter used to implement ListView. The technique in it is imageView. setTag (imageUrl) and setTag are used to store data, so as to ensure that when the callback function is used, listview updates its corresponding item. You can read it carefully.
Finally, paste the layout file:
<? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: orientation = "horizontal"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content">
 
<ImageView android: id = "@ + id/image"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
/>
 
<TextView android: id = "@ + id/text"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"/>
 
</LinearLayout>

Excerpt from advancing with the times