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

时间：2014-09-25 11:32:49 阅读：389 评论：0 收藏：0 [点我收藏+]

从网络获取图片以及文本来显示。事实上，一般是先获取Josn或sml数据，然后解释显示。我们先从网上获取xml，然后对其进行解析，最后显示在ListView上。具体步骤：

客户端发出请求，获取xml
客户端异步解析xml
ListView将解析完的数据显示

一、Android客户端

bubuko.com,布布扣

(1)xml布局文件

mainxml，就是一个ListView。

[java]view
 plaincopy

<?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，看一下结构图：

bubuko.com,布布扣

[java]view
 plaincopy

<?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

[java]view
 plaincopy

<?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，是默认背景梯度风格

[java]view
 plaincopy

<?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 梯度风格在悬停状态

[java]view
 plaincopy

<?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 在图片周围的白色边条

[java]view
 plaincopy

<?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

[java]view
 plaincopy

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：

[java]view
 plaincopy

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解析。

[java]view
 plaincopy

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：

[java]view
 plaincopy

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

[java]view
 plaincopy

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：

[java]view
 plaincopy

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){}  

    }  

}

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

[java]view
 plaincopy

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的代码了，

[java]view
 plaincopy

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) {  

                        //这里可以自由发挥，比如播放一首歌曲等等  

            }  

        });       

    }     

}

最后看一下效果：

bubuko.com,布布扣

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

标签：android

原文地址：http://blog.csdn.net/veloi/article/details/39546513

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行