Android ListView从网络获取图片及文字显示

如何从网络获取图片以及文本来显示。事实上，一般是先获取Josn或sml数据，然后解释显示。我们先从网上获取xml，然后对其进行解析，最后显示在ListView上。具体步骤：
•客户端发出请求，获取xml
•客户端异步解析xml
•ListView将解析完的数据显示

      一、Android客户端


(1)xml布局文件

        mainxml，就是一个ListView。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
	
    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />

</LinearLayout>

ListView的每一行的布局，list_raw.xml，看一下结构图：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_selector"
    android:orientation="horizontal"
    android:padding="5dip" >

	<!--  ListView最左边的缩略图 -->
	<LinearLayout android:id="@+id/thumbnail" 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:padding="3dip"		
        android:layout_alignParentLeft="true"
        android:background="@drawable/image_bg" 
	    android:layout_marginRight="5dip">
        
		<ImageView     
	        android:id="@+id/list_image"   
	        android:layout_width="50dip"
	        android:layout_height="50dip"
	        android:src="@drawable/rihanna"/>
        
	</LinearLayout>
    
	<!-- 歌曲名-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Rihanna Love the way lie"
        android:textColor="#040404"
        android:typeface="sans" 
        android:textSize="15dip"
        android:textStyle="bold"/>

	<!-- 歌手名 -->
    <TextView
        android:id="@+id/artist"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/title"
        android:textColor="#343434"
        android:textSize="10dip"
        android:layout_marginTop="1dip"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Just gona stand there and ..." />

	<!-- 歌曲播放时间 -->
    <TextView
        android:id="@+id/duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/title"
        android:gravity="right"
        android:text="5:45"
        android:layout_marginRight="5dip"
        android:textSize="10dip"
        android:textColor="#10bcc9"
        android:textStyle="bold"/>
      
     <!-- 进入播放 -->    
     <ImageView android:layout_width="wrap_content"
     	android:layout_height="wrap_content"
     	android:src="@drawable/arrow"
     	android:layout_alignParentRight="true"
     	android:layout_centerVertical="true"/>

</RelativeLayout>

另外我们打算使用几个特效，一个是当点击列表项目的时候，项目背景色改变，其实就是一个selector；另一个就是用shape美化视觉效果，具体看xml代码：

      1.list_selector.xml     

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selector style for listrow -->
<item 
 android:state_selected="false"
    android:state_pressed="false" 
    android:drawable="@drawable/gradient_bg" />
<item android:state_pressed="true" 
    android:drawable="@drawable/gradient_bg_hover" />
<item android:state_selected="true"
 android:state_pressed="false" 
    android:drawable="@drawable/gradient_bg_hover" />
</selector>

2.gradient_bg.xml，是默认背景梯度风格 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <!--  Gradient Bg for listrow -->
  <gradient
      android:startColor="#f1f1f2"
      android:centerColor="#e7e7e8"
      android:endColor="#cfcfcf"
      android:angle="270" />
</shape>

3.gradient_bg_hover.xml 梯度风格在悬停状态

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <!-- Gradient BgColor for listrow Selected -->
  <gradient
      android:startColor="#18d7e5"
      android:centerColor="#16cedb"
      android:endColor="#09adb9"
      android:angle="270" />
  
</shape>

4.image_bg.xml 在图片周围的白色边条

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#dbdbdc" />
            <solid android:color="#FFFFFF" />
        </shape>
   </item>
</layer-list>

以上效果基本上都用到了shape，对此不了解的可以去查看相关资料。上面就是全部的xml布局文件，下面将开始写代码。



   (2)主要代码


            代码部分主要涉及到一下几个功能，重写ListView的适配器（BaseAdapter），从网络获取图片，图片缓存的处理，xml的解析。

            ①重写ListView的适配器，这部分可以参考上一篇文章，LazyAdapter.java     

import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class LazyAdapter extends BaseAdapter {
    
    private Activity activity;
    private ArrayList<HashMap<String, String>> data;
    private static LayoutInflater inflater=null;
    public ImageLoader imageLoader; //用来下载图片的类，后面有介绍
    
    public LazyAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
        activity = a;
        data=d;
        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        imageLoader=new ImageLoader(activity.getApplicationContext());
    }

    public int getCount() {
        return data.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }
    
    public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.list_row, null);

        TextView title = (TextView)vi.findViewById(R.id.title); // 标题
        TextView artist = (TextView)vi.findViewById(R.id.artist); // 歌手名
        TextView duration = (TextView)vi.findViewById(R.id.duration); // 时长
        ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image); // 缩略图
        
        HashMap<String, String> song = new HashMap<String, String>();
        song = data.get(position);
        
        // 设置ListView的相关值
        title.setText(song.get(CustomizedListView.KEY_TITLE));
        artist.setText(song.get(CustomizedListView.KEY_ARTIST));
        duration.setText(song.get(CustomizedListView.KEY_DURATION));
        imageLoader.DisplayImage(song.get(CustomizedListView.KEY_THUMB_URL), thumb_image);
        return vi;
  <em>  }
}</em>

②网络获取图片的类，ImageLoader.java：

import java.io.File; 
import java.io.FileInputStream; 
import java.io.FileNotFoundException; 
import java.io.FileOutputStream; 
import java.io.InputStream; 
import java.io.OutputStream; 
import java.net.HttpURLConnection; 
import java.net.URL; 
import java.util.Collections; 
import java.util.Map; 
import java.util.WeakHashMap; 
import java.util.concurrent.ExecutorService; 
import java.util.concurrent.Executors;  
import android.app.Activity; 
import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.widget.ImageView; 
  
public class ImageLoader { 
  
    MemoryCache memoryCache=new MemoryCache(); 
    FileCache fileCache; 
    private Map<ImageView, String> imageViews=Collections.synchronizedMap(new WeakHashMap<ImageView, String>()); 
    ExecutorService executorService;  
  
    public ImageLoader(Context context){ 
        fileCache=new FileCache(context); 
        executorService=Executors.newFixedThreadPool(5); 
    } 
  
    final int stub_id = R.drawable.no_image; 
    public void DisplayImage(String url, ImageView imageView) 
    { 
        imageViews.put(imageView, url); 
        Bitmap bitmap=memoryCache.get(url); 
        if(bitmap!=null) 
            imageView.setImageBitmap(bitmap); 
        else
        { 
            queuePhoto(url, imageView); 
            imageView.setImageResource(stub_id); 
        } 
    } 
  
    private void queuePhoto(String url, ImageView imageView) 
    { 
        PhotoToLoad p=new PhotoToLoad(url, imageView); 
        executorService.submit(new PhotosLoader(p)); 
    } 
  
    private Bitmap getBitmap(String url) 
    { 
        File f=fileCache.getFile(url); 
  
        //从sd卡
        Bitmap b = decodeFile(f); 
        if(b!=null) 
            return b; 
  
        //从网络
        try { 
            Bitmap bitmap=null; 
            URL imageUrl = new URL(url); 
            HttpURLConnection conn = (HttpURLConnection)imageUrl.openConnection(); 
            conn.setConnectTimeout(30000); 
            conn.setReadTimeout(30000); 
            conn.setInstanceFollowRedirects(true); 
            InputStream is=conn.getInputStream(); 
            OutputStream os = new FileOutputStream(f); 
            Utils.CopyStream(is, os); 
            os.close(); 
            bitmap = decodeFile(f); 
            return bitmap; 
        } catch (Exception ex){ 
           ex.printStackTrace(); 
           return null; 
        } 
    } 
  
    //解码图像用来减少内存消耗
    private Bitmap decodeFile(File f){ 
        try { 
            //解码图像大小
            BitmapFactory.Options o = new BitmapFactory.Options(); 
            o.inJustDecodeBounds = true; 
            BitmapFactory.decodeStream(new FileInputStream(f),null,o); 
  
            //找到正确的刻度值，它应该是2的幂。
            final int REQUIRED_SIZE=70; 
            int width_tmp=o.outWidth, height_tmp=o.outHeight; 
            int scale=1; 
            while(true){ 
                if(width_tmp/2<REQUIRED_SIZE || height_tmp/2<REQUIRED_SIZE) 
                    break; 
                width_tmp/=2; 
                height_tmp/=2; 
                scale*=2; 
            } 
  
            BitmapFactory.Options o2 = new BitmapFactory.Options(); 
            o2.inSampleSize=scale; 
            return BitmapFactory.decodeStream(new FileInputStream(f), null, o2); 
        } catch (FileNotFoundException e) {} 
        return null; 
    } 
  
    /任务队列
    private class PhotoToLoad 
    { 
        public String url; 
        public ImageView imageView; 
        public PhotoToLoad(String u, ImageView i){ 
            url=u; 
            imageView=i; 
        } 
    } 
  
    class PhotosLoader implements Runnable { 
        PhotoToLoad photoToLoad; 
        PhotosLoader(PhotoToLoad photoToLoad){ 
            this.photoToLoad=photoToLoad; 
        } 
  
        @Override
        public void run() { 
            if(imageViewReused(photoToLoad)) 
                return; 
            Bitmap bmp=getBitmap(photoToLoad.url); 
            memoryCache.put(photoToLoad.url, bmp); 
            if(imageViewReused(photoToLoad)) 
                return; 
            BitmapDisplayer bd=new BitmapDisplayer(bmp, photoToLoad); 
            Activity a=(Activity)photoToLoad.imageView.getContext(); 
            a.runOnUiThread(bd); 
        } 
    } 
  
    boolean imageViewReused(PhotoToLoad photoToLoad){ 
        String tag=imageViews.get(photoToLoad.imageView); 
        if(tag==null || !tag.equals(photoToLoad.url)) 
            return true; 
        return false; 
    } 
  
    //用于显示位图在UI线程
    class BitmapDisplayer implements Runnable 
    { 
        Bitmap bitmap; 
        PhotoToLoad photoToLoad; 
        public BitmapDisplayer(Bitmap b, PhotoToLoad p){bitmap=b;photoToLoad=p;} 
        public void run() 
        { 
            if(imageViewReused(photoToLoad)) 
                return; 
            if(bitmap!=null) 
                photoToLoad.imageView.setImageBitmap(bitmap); 
            else
                photoToLoad.imageView.setImageResource(stub_id); 
        } 
    } 
  
    public void clearCache() { 
        memoryCache.clear(); 
        fileCache.clear(); 
    } 
  
} 

③xml解析，xml的解析有很多方法，这里采用进行dom方式的xml解析。

import java.io.IOException; 
import java.io.StringReader; 
import java.io.UnsupportedEncodingException;   
import javax.xml.parsers.DocumentBuilder; 
import javax.xml.parsers.DocumentBuilderFactory; 
import javax.xml.parsers.ParserConfigurationException;   
import org.apache.http.HttpEntity; 
import org.apache.http.HttpResponse; 
import org.apache.http.client.ClientProtocolException; 
import org.apache.http.client.methods.HttpPost; 
import org.apache.http.impl.client.DefaultHttpClient; 
import org.apache.http.util.EntityUtils; 
import org.w3c.dom.Document; 
import org.w3c.dom.Element; 
import org.w3c.dom.Node; 
import org.w3c.dom.NodeList; 
import org.xml.sax.InputSource; 
import org.xml.sax.SAXException;  
import android.util.Log; 
  
public class XMLParser { 
  
    // 构造方法
    public XMLParser() { 
  
    } 
  
    /** 
     * 从URL获取XML使HTTP请求
     * @param url string 
     * */
    public String getXmlFromUrl(String url) { 
        String xml = null; 
  
        try { 
            // defaultHttpClient 
            DefaultHttpClient httpClient = new DefaultHttpClient(); 
            HttpPost httpPost = new HttpPost(url); 
  
            HttpResponse httpResponse = httpClient.execute(httpPost); 
            HttpEntity httpEntity = httpResponse.getEntity(); 
            xml = EntityUtils.toString(httpEntity); 
  
        } catch (UnsupportedEncodingException e) { 
            e.printStackTrace(); 
        } catch (ClientProtocolException e) { 
            e.printStackTrace(); 
        } catch (IOException e) { 
            e.printStackTrace(); 
        } 
        return xml; 
    } 
  
    /** 
     * 获取XML DOM元素
     * @param XML string 
     * */
    public Document getDomElement(String xml){ 
        Document doc = null; 
        DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); 
        try { 
  
            DocumentBuilder db = dbf.newDocumentBuilder(); 
  
            InputSource is = new InputSource(); 
                is.setCharacterStream(new StringReader(xml)); 
                doc = db.parse(is);  
  
            } catch (ParserConfigurationException e) { 
                Log.e("Error: ", e.getMessage()); 
                return null; 
            } catch (SAXException e) { 
                Log.e("Error: ", e.getMessage()); 
                return null; 
            } catch (IOException e) { 
                Log.e("Error: ", e.getMessage()); 
                return null; 
            } 
  
            return doc; 
    } 
  
    /** 获取节点值
      * @param elem element 
      */
     public final String getElementValue( Node elem ) { 
         Node child; 
         if( elem != null){ 
             if (elem.hasChildNodes()){ 
                 for( child = elem.getFirstChild(); child != null; child = child.getNextSibling() ){ 
                     if( child.getNodeType() == Node.TEXT_NODE  ){ 
                         return child.getNodeValue(); 
                     } 
                 } 
             } 
         } 
         return ""; 
     } 
  
     /** 
      * 获取节点值
      * @param Element node 
      * @param key string 
      * */
     public String getValue(Element item, String str) { 
            NodeList n = item.getElementsByTagName(str); 
            return this.getElementValue(n.item(0)); 
        } 
}

④程序缓存的处理，主要是内存缓存+文件缓存。内存缓存中网上很多是采用SoftReference来防止堆溢出：

     MemoryCache.java：

import java.lang.ref.SoftReference;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;
import android.graphics.Bitmap;

public class MemoryCache {
    private Map<String, SoftReference<Bitmap>> cache=Collections.synchronizedMap(new HashMap<String, SoftReference<Bitmap>>());//软引用
    
    public Bitmap get(String id){
        if(!cache.containsKey(id))
            return null;
        SoftReference<Bitmap> ref=cache.get(id);
        return ref.get();
    }
    
    public void put(String id, Bitmap bitmap){
        cache.put(id, new SoftReference<Bitmap>(bitmap));
    }

    public void clear() {
        cache.clear();
    }
}

FileCache.java

import java.io.File;
import android.content.Context;

public class FileCache {
    
    private File cacheDir;
    
    public FileCache(Context context){
        //找一个用来缓存图片的路径
        if (android.os.Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED))
            cacheDir=new File(android.os.Environment.getExternalStorageDirectory(),"LazyList");
        else
            cacheDir=context.getCacheDir();
        if(!cacheDir.exists())
            cacheDir.mkdirs();
    }
    
    public File getFile(String url){
        
        String filename=String.valueOf(url.hashCode());
        File f = new File(cacheDir, filename);
        return f;
        
    }
    
    public void clear(){
        File[] files=cacheDir.listFiles();
        if(files==null)
            return;
        for(File f:files)
            f.delete();
    }

}

⑤还有一个读取流的工具类，Utils.java：

import java.io.InputStream;
import java.io.OutputStream;


public class Utils {
    public 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);
              is.close();
              os.close();
            }
        }
        catch(Exception ex){}
    }
}

还可以像下面这样表达，方法是一样的，就是表达形式上不同：

public static byte[] readStream(InputStream inStream) throws Exception{

ByteArrayOutputStream outSteam = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
int len = -1;
while( (len=inStream.read(buffer)) != -1){
outSteam.write(buffer, 0, len);

}
outSteam.close();
inStream.close();
return outSteam.toByteArray();

}
}

最后就是主Activity的代码了，

package com.example.androidhive;

import java.util.ArrayList;
import java.util.HashMap;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class CustomizedListView extends Activity {
	// 所有的静态变量
	static final String URL = "http://api.androidhive.info/music/music.xml";//xml目的地址,打开地址看一下
	// XML 节点
	static final String KEY_SONG = "song"; // parent node
	static final String KEY_ID = "id";
	static final String KEY_TITLE = "title";
	static final String KEY_ARTIST = "artist";
	static final String KEY_DURATION = "duration";
	static final String KEY_THUMB_URL = "thumb_url";
	
	ListView list;
        LazyAdapter adapter;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		

		ArrayList<HashMap<String, String>> songsList = new ArrayList<HashMap<String, String>>();

		XMLParser parser = new XMLParser();
		String xml = parser.getXmlFromUrl(URL); // 从网络获取xml
		Document doc = parser.getDomElement(xml); // 获取 DOM 节点
		
		NodeList nl = doc.getElementsByTagName(KEY_SONG);
		// 循环遍历所有的歌节点 <song>
		for (int i = 0; i < nl.getLength(); i++) {
			// 新建一个 HashMap
			HashMap<String, String> map = new HashMap<String, String>();
			Element e = (Element) nl.item(i);
			//每个子节点添加到HashMap关键= >值
			map.put(KEY_ID, parser.getValue(e, KEY_ID));
			map.put(KEY_TITLE, parser.getValue(e, KEY_TITLE));
			map.put(KEY_ARTIST, parser.getValue(e, KEY_ARTIST));
			map.put(KEY_DURATION, parser.getValue(e, KEY_DURATION));
			map.put(KEY_THUMB_URL, parser.getValue(e, KEY_THUMB_URL));

			// HashList添加到数组列表
			songsList.add(map);
		}
		

		list=(ListView)findViewById(R.id.list);
		
		
              adapter=new LazyAdapter(this, songsList);        
              list.setAdapter(adapter);
        

        //为单一列表行添加单击事件

        list.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
							
                        //这里可以自由发挥，比如播放一首歌曲等等
			}
		});		
	}	
}

最后看一下效果：