深入剖析Android之ListView从网络异步加载图片
我写这篇博客参考了许多文章,其中要重点感谢的是Android ListView从网络获取图片及文字显示和他的英文版文章Android Custom ListView with Image and Text
布局篇
先来看一下做出来之后的效果
看看这个布局效果的xml文件
(1)activity_main.xml
<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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.music.MainActivity" > <ListView android:id="@+id/list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:divider="#b5b5b5" android:dividerHeight="1dp" /> </RelativeLayout>
里面只有一个ListView,ListView的每一行叫做一个item,它的布局文件是list_raw.xml,看一下结构图:
- 注意我的布局里面并没有红圈中的那一部分,为了省事借用网上的图片
list_raw.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:orientation="horizontal" android:padding="5dip" > <LinearLayout android:id="@+id/thumbnail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dip" android:layout_alignParentLeft="true" android:layout_marginRight="5dip" > <ImageView android:id="@+id/list_image" android:layout_width="50dip" android:layout_height="50dip" android:src="@drawable/ic_launcher" /> </LinearLayout> <!-- song name --> <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"/> <!-- singer name --> <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 ..." /> <!-- time --> <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&