首页 > 代码库 > Android ListView从网络获取图片及文字显示
Android ListView从网络获取图片及文字显示
上一篇文章说的是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=http://www.mamicode.com/"@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=http://www.mamicode.com/"@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=http://www.mamicode.com/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) {
- //这里可以自由发挥,比如播放一首歌曲等等
- }
- });
- }
- }
最后看一下效果: