Android 开发笔记 ListView异步加载图片

当ListView需要在线获取数据，并且列表中需要显示图片时，友好的处理方式是使用异步加载图片的方式。

这是因为LIstView中显示的内容是分为两部加载的，第一次加载文本信息（包含图片的uri地址），第二次使用图片的uri下载图片到本地显示。

如果一次性获取文本信息与图片，将要较长时间加载，用户等待太久。

 以下为代码实现：

xml文件，list.xml

 <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

<ListView

        android:id="@+id/list"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/img_your_circle"

        android:layout_marginBottom="50dp"

        android:layout_marginLeft="13dp"

        android:layout_marginRight="13dp"

        android:divider="@null"

        android:dividerHeight="5dp"

        android:fadingEdge="none"

        android:listSelector="@android:color/transparent"

        android:scrollbars="none" >

    </ListView>

</RelativeLayout>

 

list_item.xml文件：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="@drawable/layout_background"

    android:padding="10dp" >

    <RelativeLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/txt_icon"

        android:layout_alignLeft="@+id/txt_icon"

        android:layout_alignRight="@+id/txt_icon"

        android:layout_alignTop="@+id/txt_icon"

        android:layout_centerVertical="true" >

        <ProgressBar

            android:id="@+id/progressBar"

            style="?android:attr/progressBarStyleSmall"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerInParent="true" />

    </RelativeLayout>

    <ImageView

        android:id="@+id/txt_icon"

        android:layout_width="90dp"

        android:layout_height="90dp"

        android:scaleType="fitXY"

        android:visibility="invisible" />

    <TextView

        android:id="@+id/txt_title"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_alignTop="@+id/txt_icon"

        android:layout_marginLeft="5dp"

        android:layout_marginRight="5dp"

        android:layout_toLeftOf="@+id/imageView1"

        android:layout_toRightOf="@+id/txt_icon"

        android:ellipsize="end"

        android:maxLines="2"

        android:minLines="2"

        android:textColor="#000000" />

    <TextView

        android:id="@+id/txt_content"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/txt_icon"

        android:layout_alignLeft="@+id/txt_title"

        android:layout_alignRight="@+id/txt_title"

        android:ellipsize="end"

        android:maxLines="2"

        android:minLines="2" />

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_centerVertical="true"

        android:src="@drawable/list_arrow" />

</RelativeLayout> 

 

java文件，ListActivity.java

 public class ListActivity extends Activity {

 

.....

@Override

protected void onCreate(Bundle savedInstanceState) {

setContentView(R.layout.list);

super.onCreate(savedInstanceState);

 list = (ListView) findViewById(R.id.list);

 

getResource(); 

} 

 

class AppsAdapter extends BaseAdapter {

@Override

public int getCount() {

return myList.size();

}

@Override

public Object getItem(int position) {

return myList.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ArticleResponse app = myList.get(position);

ImageView del = null;

if (convertView == null) {

LayoutInflater inflater = getLayoutInflater();

convertView = inflater.inflate(

R.layout.goldencircle_innercircle_list_item, parent,

false);

}

TextView txt_title = (TextView) convertView

.findViewById(R.id.txt_title);

txt_title.setText(app.pagetitle);

TextView txt_content = (TextView) convertView

.findViewById(R.id.txt_content);

String teaser = app.teaser;

if (teaser != null && teaser.trim().length() > CONTENT_LENGHT)

teaser = teaser.substring(0, CONTENT_LENGHT) + "...";

txt_content.setText(teaser);

ImageView icon = (ImageView) convertView

.findViewById(R.id.txt_icon);

icon.setTag(position);

icon.setVisibility(View.INVISIBLE);

if (app.bitmap != null) {

icon.setVisibility(View.VISIBLE);

icon.setImageBitmap(app.bitmap);

} else if (!app.flag) {

new ImageLoadTask(GoldenCircleInnerCircleListActivity.this,

position, icon).execute();

app.flag = true;

}

return convertView;

}

}

public class ImageLoadTask extends AsyncTask<Void, Void, Void> {

private int position;

private ImageView image;

public ImageLoadTask(Context context, int position, ImageView image) {

this.position = position;

this.image = image;

}

@Override

protected Void doInBackground(Void... params) {

ArticleResponse app = myList.get(position);

if (app.thumb != null && app.thumb.trim().length() > 0) {

Drawable dr = AsyncImageLoader.loadCacheImageFromUrl(app.thumb);

Bitmap bitmap = null;

if (dr != null) {

bitmap = new WeakReference<Bitmap>(

((BitmapDrawable) dr).getBitmap()).get();

}

app.flag = dr != null;

app.bitmap = bitmap;

publishProgress();

}

return null;

}

public void onProgressUpdate(Void... voids) {

if (isCancelled())

return;

int p = Integer.valueOf(image.getTag().toString());

if (p != position)

return;

ArticleResponse app = myList.get(position);

image.setImageBitmap(app.bitmap);

image.setVisibility(app.bitmap != null ? View.VISIBLE

: View.INVISIBLE);

}

}

｝ 

 

list项中加入圆形进度条，在图片还未加载完时，进度条一直在滚动，当图片显示时，将遮住它。