Android Listview異步動態加載網絡圖片 – Android移動開發技術文章_手機開發 Android移動開發教學課程

 

應用實例:解析後臺返回的數據,把每條都顯示在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:pider="@drawable/separator" android:piderHeight="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="https://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中控件的內容

01 package com.google.zxing.client.android.AsyncLoadImage; 

 

02   

 

03   

 

04   

 

05 public 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中的控件

01 package com.google.zxing.client.android.AsyncLoadImage; 

 

02   

 

03 import com.google.zxing.client.android.R; 

 

04   

 

05 import android.view.View; 

 

06 import android.widget.ImageView; 

 

07 import android.widget.TextView; 

 

08   

 

09 public 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,開啟線程下載指定圖片

01 package com.google.zxing.client.android.AsyncLoadImage; 

 

02   

 

03 import java.io.IOException; 

 

04 import java.io.InputStream; 

 

05 import java.lang.ref.SoftReference; 

 

06 import java.net.MalformedURLException; 

 

07 import java.net.URL; 

 

08 import java.util.HashMap; 

 

09   

 

10 import android.graphics.drawable.Drawable; 

 

11 import android.os.Handler; 

 

12 import android.os.Message; 

 

13   

 

14 public class AsyncImageLoader { 

 

15   

 

16      private HashMap<String, SoftReference<Drawable>> imageCache; 

 

17         

 

18          public AsyncImageLoader() { 

 

19              imageCache = new HashMap<String, SoftReference<Drawable>>(); 

 

20          } 

 

21         

 

22          public Drawable loadDrawable(final String imageUrl, final ImageCallback imageCallback) { 

 

23              if (imageCache.containsKey(imageUrl)) { 

 

24                  SoftReference<Drawable> 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, new SoftReference<Drawable>(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

01 package com.google.zxing.client.android.AsyncLoadImage; 

 

02   

 

03 import java.util.List; 

 

04   

 

05 import com.google.zxing.client.android.R; 

 

06   

 

07 import com.google.zxing.client.android.AsyncLoadImage.AsyncImageLoader.ImageCallback; 

 

08   

 

09 import android.app.Activity; 

 

10 import android.graphics.drawable.Drawable; 

 

11 import android.view.LayoutInflater; 

 

12 import android.view.View; 

 

13 import android.view.ViewGroup; 

 

14 import android.widget.ArrayAdapter; 

 

15 import android.widget.ImageView; 

 

16 import android.widget.ListView; 

 

17 import android.widget.TextView; 

 

18   

 

19 public class MapListImageAndTextListAdapter extends ArrayAdapter<MapListImageAndText> { 

 

20   

 

21         private ListView listView; 

 

22         private AsyncImageLoader asyncImageLoader; 

 

23   

 

24         public MapListImageAndTextListAdapter(Activity activity, List<MapListImageAndText> 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為對後臺傳回來的數據解析後得到的字符串 

 

02 String[] mtuangoupoints =tuangoupoints.split("@"); 

 

03   

 

04 List<MapListImageAndText> dataArray=new ArrayList<MapListImageAndText>(); 

 

05       

 

06 for(int i=0; i<mtuangoupoints.length;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=new MapListImageAndText(imageurl,shopname,activityinfo,address,telephone,distance); 

 

17     dataArray.add(test); 

 

18 } 

 

19       

 

20 MapListImageAndTextListAdapter adapter=new MapListImageAndTextListAdapter(this, dataArray, mlistView); 

 

21 mlistView.setAdapter(adapter);  

發佈留言