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

如何从网络获取图片以及文本来显示。事实上，一般是先获取Josn或sml数据，然后解释显示。我们先从网上获取xml，然后对其进行解析，最后显示在ListView上。具体步骤：
•客户端发出请求，获取xml
•客户端异步解析xml
•ListView将解析完的数据显示

一、Android客户端


(1)xml布局文件

mainxml，就是一个ListView。

Java代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical">
7. <ListView
8. android:id="@+id/list"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:divider="#b5b5b5"
12. android:dividerHeight="1dp"
13. android:listSelector="@drawable/list_selector" />
15. </LinearLayout>

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

Java代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:background="@drawable/list_selector"
6. android:orientation="horizontal"
7. android:padding="5dip" >
9. <!-- ListView最左边的缩略图 -->
10. <LinearLayout android:id="@+id/thumbnail"
11. android:layout_width="wrap_content"
12. android:layout_height="wrap_content"
13. android:padding="3dip"
14. android:layout_alignParentLeft="true"
15. android:background="@drawable/image_bg"
16. android:layout_marginRight="5dip">
18. <ImageView
19. android:id="@+id/list_image"
20. android:layout_width="50dip"
21. android:layout_height="50dip"
22. android:src="@drawable/rihanna"/>
24. </LinearLayout>
26. <!-- 歌曲名-->
27. <TextView
28. android:id="@+id/title"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:layout_alignTop="@+id/thumbnail"
32. android:layout_toRightOf="@+id/thumbnail"
33. android:text="Rihanna Love the way lie"
34. android:textColor="#040404"
35. android:typeface="sans"
36. android:textSize="15dip"
37. android:textStyle="bold"/>
39. <!-- 歌手名 -->
40. <TextView
41. android:id="@+id/artist"
42. android:layout_width="fill_parent"
43. android:layout_height="wrap_content"
44. android:layout_below="@id/title"
45. android:textColor="#343434"
46. android:textSize="10dip"
47. android:layout_marginTop="1dip"
48. android:layout_toRightOf="@+id/thumbnail"
49. android:text="Just gona stand there and ..." />
51. <!-- 歌曲播放时间 -->
52. <TextView
53. android:id="@+id/duration"
54. android:layout_width="wrap_content"
55. android:layout_height="wrap_content"
56. android:layout_alignParentRight="true"
57. android:layout_alignTop="@id/title"
58. android:gravity="right"
59. android:text="5:45"
60. android:layout_marginRight="5dip"
61. android:textSize="10dip"
62. android:textColor="#10bcc9"
63. android:textStyle="bold"/>
65. <!-- 进入播放 -->
66. <ImageView android:layout_width="wrap_content"
67. android:layout_height="wrap_content"
68. android:src="@drawable/arrow"
69. android:layout_alignParentRight="true"
70. android:layout_centerVertical="true"/>
72. </RelativeLayout>

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3. <!-- Selector style for listrow -->
4. <item
5. android:state_selected="false"
6. android:state_pressed="false"
7. android:drawable="@drawable/gradient_bg" />
8. <item android:state_pressed="true"
9. android:drawable="@drawable/gradient_bg_hover" />
10. <item android:state_selected="true"
11. android:state_pressed="false"
12. android:drawable="@drawable/gradient_bg_hover" />
13. </selector>

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