从网络获取图片以及文本来显示。事实上,一般是先获取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);
-
-
-
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);
-
-
-
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);
-
-
-
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;
-
}
-
-
-
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解析。
④程序缓存的处理,主要是内存缓存+文件缓存。内存缓存中网上很多是采用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目的地址,打开地址看一下
-
-
static final String KEY_SONG = "song";
-
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);
-
Document doc = parser.getDomElement(xml);
-
-
NodeList nl = doc.getElementsByTagName(KEY_SONG);
-
-
for (int i = 0; i < nl.getLength(); i++) {
-
-
HashMap<String, String> map = new HashMap<String, String>();
-
Element e = (Element) nl.item(i);
-
-
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));
-
-
-
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) {
-
-
-
}
-
});
-
}
-
}
最后看一下效果:

Android ListView从网络获取图片及文字显示
原文:http://blog.csdn.net/veloi/article/details/39546513