正文  UI设计 > ListView >

Android Listview异步动态加载网络图片

Android Listview异步动态加载网络图片应用实例:解析后台返回的数据,把每条都显示在ListView中,包括活动图片、店名、活动详情、地址、电话和距离等。在布局文件中ListView的定义:<ListView android:id="@i......

Android Listview异步动态加载网络图片
应用实例:解析后台返回的数据,把每条都显示在ListView中,包括活动图片、店名、活动详情、地址、电话和距离等。
 
在布局文件中ListView的定义:
<ListView android:id="@id/maplistview" android:background="@drawable/bg" android:layout_width="fill_parent" android:layout_height="fill_parent" android:cacheColorHint="#00000000"  android:divider="@drawable/separator" android:dividerHeight="2.0px" android:layout_below="@id/mapseparator"/>
 
 
 
在布局文件ListViewItem,中定义活动图片、店名、活动详情、地址、电话和距离的布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:paddingBottom="2dip" android:paddingLeft="2dip" android:paddingRight="2dip">
<ImageView android:paddingTop="2dip" android:layout_alignParentLeft="true" android:layout_width="80px"  android:layout_height="80px" android:id="@+id/maplistviewitemImage"/>
<TextView android:layout_height="wrap_content" android:textSize="17dip" android:layout_width="fill_parent" android:id="@+id/maplistviewitemshopname"android:layout_toRightOf="@id/maplistviewitemImage"android:textColor="#000000"/>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_alignParentLeft="true" android:layout_below="@+id/maplistviewitemImage" android:id="@+id/maplistviewitemActi" android:textColor="#6C6C6C"/>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_alignParentLeft="true" android:layout_below="@+id/maplistviewitemActi" android:id="@+id/maplistviewitemaddr" android:textColor="#6C6C6C" android:singleLine="true"/>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_alignParentLeft="true" android:layout_below="@+id/maplistviewitemaddr" android:id="@+id/maplistviewitemtelphone" android:textColor="#6C6C6C" android:singleLine="true"/>
</RelativeLayout>
 
 
 
(1)定义类MapListImageAndText管理ListViewItem中控件的内容
(2)定义类MapListViewCache实例化ListViewItem中的控件
(3)定义类AsyncImageLoader,开启线程下载指定图片
(4)定义类MapListImageAndTextListAdapter继承ArrayAdapter,用于创建AsyncImageLoader实例,并指定控件的内容
(5)主程序中Listview与MapListImageAndTextListAdapter的捆绑
 
 
[代码] (1)定义类MapListImageAndText管理ListViewItem中控件的内容
 
view sourceprint?01package com.google.zxing.client.android.AsyncLoadImage;
 
05public class MapListImageAndText {
 
06 private String imageUrl;
 
07 private String shopname;
 
08 private String activitynifo;
 
09 private String address;
 
10 private String telephone;
 
11 private String distance;
 
12
 
13 public MapListImageAndText(String imageUrl, String shopname, String activitynifo, String address, String telephone,String distance) {
 
14 this.imageUrl = imageUrl;
 
15 this.shopname = shopname;
 
16 this.activitynifo = activitynifo;
 
17 this.address = address;
 
18 this.telephone = telephone;
 
19 this.distance=distance;
 
20 }
 
21
 
22 public String getImageUrl() {
 
23 return imageUrl;
 
24 }
 
25
 
26 public String getShopname() {
 
27 return shopname;
 
28 }
 
29
 
30 public String getActivitynifo() {
 
31 return activitynifo;
 
32 }
 
33
 
34 public String getAddress() {
 
35 return address;
 
36 }
 
37
 
38 public String getTelephone() {
 
39 return telephone;
 
40 }
 
41
 
42 public String getDistance() {
 
43 return distance;
 
44 }
 
45
 
46
 
47}
 
[代码] (2)定义类MapListViewCache实例化ListViewItem中的控件
 
01package com.google.zxing.client.android.AsyncLoadImage;
 
02
 
03import com.google.zxing.client.android.R;
 
04
 
05import android.view.View;
 
06import android.widget.ImageView;
 
07import android.widget.TextView;
 
08
 
09public class MapListViewCache {
 
10
 
11 private View baseView;
 
12 private TextView shopname;
 
13 private TextView activitynifo;
 
14 private TextView address;
 
15 private TextView telephone;
 
16 private TextView distance;
 
17
 
18 private ImageView imageView;
 
19
 
20 public MapListViewCache(View baseView) {
 
21 this.baseView = baseView;
 
22 }
 
23
 
24 public TextView getShopname() {
 
25 if (shopname == null) {
 
26 shopname = (TextView) baseView.findViewById(R.id.maplistviewitemshopname);
 
27 }
 
28 return shopname;
 
29 }
 
30
 
31 public TextView getActivitynifo() {
 
32 if (activitynifo == null) {
 
33 activitynifo = (TextView) baseView.findViewById(R.id.maplistviewitemActi);
 
34 }
 
35 return activitynifo;
 
36 }
 
37
 
38 public TextView getAddress() {
 
39 if (address == null) {
 
40 address = (TextView) baseView.findViewById(R.id.maplistviewitemaddr);
 
41 }
 
42 return address;
 
43 }
 
44
 
45 public TextView getTelephone() {
 
46 if (telephone == null) {
 
47 telephone = (TextView) baseView.findViewById(R.id.maplistviewitemtelphone);
 
48 }
 
49 return telephone;
 
50 }
 
51
 
52 public ImageView getImageView() {
 
53 if (imageView == null) {
 
54 imageView = (ImageView) baseView.findViewById(R.id.maplistviewitemImage);
 
55 }
 
56 return imageView;
 
57 }
 
58
 
59 public TextView getDistance() {
 
60 if (distance == null) {
 
61 distance = (TextView) baseView.findViewById(R.id.maplistviewitemdistance);
 
62 }
 
63 return distance;
 
64 }
 
65
 
66}
 
[代码] (3)定义类AsyncImageLoader,开启线程下载指定图片
 
01package com.google.zxing.client.android.AsyncLoadImage;
 
02
 
03import java.io.IOException;
 
04import java.io.InputStream;
 
05import java.lang.ref.SoftReference;
 
06import java.net.MalformedURLException;
 
07import java.net.URL;
 
08import java.util.HashMap;
 
09
 
10import android.graphics.drawable.Drawable;
 
11import android.os.Handler;
 
12import android.os.Message;
 
13
 
14public class AsyncImageLoader {
 
15
 
16 private HashMap> imageCache;
 
17
 
18 public AsyncImageLoader() {
 
19 imageCache = new HashMap>();
 
20 }
 
21
 
22 public Drawable loadDrawable(final String imageUrl, finalImageCallback imageCallback) {
 
23 if (imageCache.containsKey(imageUrl)) {
 
24 SoftReference softReference = imageCache.get(imageUrl);
 
25 Drawable drawable = softReference.get();
 
26 if (drawable != null) {
 
27 return drawable;
 
28 }
 
29 }
 
30 final Handler handler = new Handler() {
 
31 public void handleMessage(Message message) {
 
32 imageCallback.imageLoaded((Drawable) message.obj, imageUrl);
 
33 }
 
34 };
 
35 new Thread() {
 
36 @Override
 
37 public void run() {
 
38 Drawable drawable = loadImageFromUrl(imageUrl);
 
39 imageCache.put(imageUrl, newSoftReference(drawable));
 
40 Message message = handler.obtainMessage(0, drawable);
 
41 handler.sendMessage(message);
 
42 }
 
43 }.start();
 
44 return null;
 
45 }
 
46
 
47 public static Drawable loadImageFromUrl(String url) {
 
48 URL m;
 
49 InputStream i = null;
 
50 try {
 
51 m = new URL(url);
 
52 i = (InputStream) m.getContent();
 
53 } catch (MalformedURLException e1) {
 
54 e1.printStackTrace();
 
55 } catch (IOException e) {
 
56 e.printStackTrace();
 
57 }
 
58 Drawable d = Drawable.createFromStream(i, "src");
 
59 return d;
 
60 }
 
61
 
62 public interface ImageCallback {
 
63 public void imageLoaded(Drawable imageDrawable, String imageUrl);
 
64 }
 
65
 
66}
 
[代码] (4)定义类MapListImageAndTextListAdapter继承ArrayAdapter
 
01package com.google.zxing.client.android.AsyncLoadImage;
 
02
 
03import java.util.List;
 
04
 
05import com.google.zxing.client.android.R;
 
06
 
07importcom.google.zxing.client.android.AsyncLoadImage.AsyncImageLoader.ImageCallback;
 
08
 
09import android.app.Activity;
 
10import android.graphics.drawable.Drawable;
 
11import android.view.LayoutInflater;
 
12import android.view.View;
 
13import android.view.ViewGroup;
 
14import android.widget.ArrayAdapter;
 
15import android.widget.ImageView;
 
16import android.widget.ListView;
 
17import android.widget.TextView;
 
18
 
19public class MapListImageAndTextListAdapter extendsArrayAdapter {
 
20
 
21 private ListView listView;
 
22 private AsyncImageLoader asyncImageLoader;
 
23
 
24 public MapListImageAndTextListAdapter(Activity activity, List imageAndTexts, ListView listView) {
 
25 super(activity, 0, imageAndTexts);
 
26 this.listView = listView;
 
27 asyncImageLoader = new AsyncImageLoader();
 
28 }
 
29
 
30 public View getView(int position, View convertView, ViewGroup parent) {
 
31 Activity activity = (Activity) getContext();
 
32
 
33 // Inflate the views from XML
 
34 View rowView = convertView;
 
35 MapListViewCache viewCache;
 
36 if (rowView == null) {
 
37 LayoutInflater inflater = activity.getLayoutInflater();
 
38 rowView = inflater.inflate(R.layout.maplistviewitem,null);
 
39 viewCache = new MapListViewCache(rowView);
 
40 rowView.setTag(viewCache);
 
41 } else {
 
42 viewCache = (MapListViewCache) rowView.getTag();
 
43 }
 
44 MapListImageAndText imageAndText = getItem(position);
 
45
 
46 // Load the image and set it on the ImageView
 
47 String imageUrl = imageAndText.getImageUrl();
 
48 ImageView imageView = viewCache.getImageView();
 
49 imageView.setTag(imageUrl);
 
50 Drawable cachedImage = asyncImageLoader.loadDrawable(imageUrl, new ImageCallback() {
 
51
 
52
 
53 public void imageLoaded(Drawable imageDrawable, String imageUrl) {
 
54 ImageView imageViewByTag = (ImageView) listView.findViewWithTag(imageUrl);
 
55 if (imageViewByTag != null) {
 
56 imageViewByTag.setImageDrawable(imageDrawable);
 
57 }
 
58 }
 
59 });
 
60 if (cachedImage == null) {
 
61 imageView.setImageResource(R.drawable.refresh);
 
62 }else{
 
63 imageView.setImageDrawable(cachedImage);
 
64 }
 
65 // Set the text on the TextView
 
66 TextView shopname = viewCache.getShopname();
 
67 shopname.setText(imageAndText.getShopname());
 
68
 
69 TextView activitynifo = viewCache.getActivitynifo();
 
70 activitynifo.setText(imageAndText.getActivitynifo());
 
71
 
72 TextView address = viewCache.getAddress();
 
73 address.setText(imageAndText.getAddress());
 
74
 
75 TextView telephone = viewCache.getTelephone();
 
76 telephone.setText(imageAndText.getTelephone());
 
77
 
78 TextView distance = viewCache.getDistance();
 
79 distance.setText(imageAndText.getDistance());
 
80
 
81 return rowView;
 
82 }
 
83
 
84}
 
[代码] (5)主程序中Listview与MapListImageAndTextListAdapter的捆绑
 
01//tuangoupoints为对后台传回来的数据解析后得到的字符串
 
02String[] mtuangoupoints =tuangoupoints.split("@");
 
03
 
04List dataArray=new ArrayList();
 
05
 
06for(int i=0; i 
 
07 String[] tonepoint=mtuangoupoints[i].split("#");
 
08
 
09 String shopname=String.valueOf(i+1)+tonepoint[2];
 
10 String activityinfo=tonepoint[1];
 
11 String address=tonepoint[6];
 
12 String telephone=tonepoint[7];
 
13 String imageurl=tonepoint[8];
 
14 String distance=tonepoint[5];
 
15
 
16 MapListImageAndText test=newMapListImageAndText(imageurl,shopname,activityinfo,address,telephone,distance);
 
17 dataArray.add(test);
 
18}
 
19
 
20MapListImageAndTextListAdapter adapter=newMapListImageAndTextListAdapter(this, dataArray, mlistView);
 
21mlistView.setAdapter(adapter);