androidUI ListView

ListView是一个经常用到的控件，ListView里面的每个子项Item可以使一个字符串，也可以是一个组合控件。先说说ListView的实现：

1.准备ListView要显示的数据 ；

2.使用 一维或多维 动态数组 保存数据；

2.构建适配器 ， 简单地来说， 适配器就是 Item数组 ， 动态数组 有多少元素就生成多少个Item；

3.把 适配器 添加到ListView,并显示出来。

接下来，看看本文代码所实现的ListView:

 

接下来，就开始UI的XML代码：

main.xml代码如下，很简单，也不需要多做解释了：

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout    
3.         android:id="@+id/LinearLayout01"    
4.         android:layout_width="fill_parent"    
5.         android:layout_height="fill_parent"    
6.         xmlns:android="http://schemas.android.com/apk/res/android">  
7.            
8.         <ListView android:layout_width="wrap_content"    
9.                   android:layout_height="wrap_content"    
10.                   android:id="@+id/MyListView">  
11.         </ListView>  
12. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/MyListView"> </ListView> </LinearLayout>

 

 

my_listitem.xml的代码如下，my_listitem.xml用于设计ListView的Item：

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout    
3.         android:layout_width="fill_parent"    
4.         xmlns:android="http://schemas.android.com/apk/res/android"    
5.         android:orientation="vertical"  
6.         android:layout_height="wrap_content"    
7.         android:id="@+id/MyListItem"    
8.         android:paddingBottom="3dip"    
9.         android:paddingLeft="10dip">  
10.         <TextView    
11.                 android:layout_height="wrap_content"    
12.                 android:layout_width="fill_parent"    
13.                 android:id="@+id/ItemTitle"    
14.                 android:textSize="30dip">  
15.         </TextView>  
16.         <TextView    
17.                 android:layout_height="wrap_content"    
18.                 android:layout_width="fill_parent"    
19.                 android:id="@+id/ItemText">  
20.         </TextView>  
21. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="wrap_content" android:id="@+id/MyListItem" android:paddingBottom="3dip" android:paddingLeft="10dip"> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/ItemTitle" android:textSize="30dip"> </TextView> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/ItemText"> </TextView> </LinearLayout>

 

解释一下，里面用到的一些属性：

1.paddingBottom="3dip"，Layout往底部留出3个像素的空白区域

2.paddingLeft="10dip"，Layout往左边留出10个像素的空白区域

3.textSize="30dip"，TextView的字体为30个像素那么大。

 

最后就是JAVA的源代码：

view plain copy to clipboard print ?

1. public void onCreate(Bundle savedInstanceState) {   
2.     super.onCreate(savedInstanceState);   
3.     setContentView(R.layout.main);   
4.     //绑定XML中的ListView，作为Item的容器   
5.     ListView list = (ListView) findViewById(R.id.MyListView);   
6.        
7.     //生成动态数组，并且转载数据   
8.     ArrayList<HashMap<String, String>> mylist = new ArrayList<HashMap<String, String>>();   
9.     for(int i=0;i<30;i++)   
10.     {   
11.         HashMap<String, String> map = new HashMap<String, String>();   
12.         map.put("ItemTitle", "This is Title.....");   
13.         map.put("ItemText", "This is text.....");   
14.         mylist.add(map);   
15.     }   
16.     //生成适配器，数组===》ListItem   
17.     SimpleAdapter mSchedule = new SimpleAdapter(this, //没什么解释   
18.                                                 mylist,//数据来源    
19.                                                 R.layout.my_listitem,//ListItem的XML实现   
20.                                                    
21.                                                 //动态数组与ListItem对应的子项           
22.                                                 new String[] {"ItemTitle", "ItemText"},    
23.                                                    
24.                                                 //ListItem的XML文件里面的两个TextView ID   
25.                                                 new int[] {R.id.ItemTitle,R.id.ItemText});   
26.     //添加并且显示   
27.     list.setAdapter(mSchedule);   
28. }  

 

      

 

       以上讲的是如何制作一个具有两行文本的 自定义控件 ，作为ListView的Item的使用方法。这篇接下来也是围绕ListView和Item，更加深入地介绍它们的用法。

       首先，先来看看本文代码运行的结果，本文的Item比上一篇中的Item多出左边的图标：

 

 

 

      main.xml的源代码，跟上一篇的一样，这里就不作解释了，直接贴出item.xml的代码，就是它实现ImageItem的UI：

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>     
2. <RelativeLayout      
3.          android:layout_width="fill_parent"      
4.          xmlns:android="http://schemas.android.com/apk/res/android"      
5.          android:layout_height="wrap_content"      
6.          android:paddingBottom="4dip"      
7.          android:paddingLeft="12dip">     
8.          <ImageView      
9.                android:layout_width="wrap_content"      
10.                android:id="@+id/itemImage" android:layout_height="fill_parent">      
11.          </ImageView>     
12.          <TextView      
13.                android:text="TextView01"      
14.                android:layout_height="wrap_content"      
15.                android:layout_width="fill_parent"      
16.                android:id="@+id/itemTitle" android:layout_toRightOf="@+id/itemImage" android:textSize="20dip">     
17.          </TextView>     
18.          <TextView      
19.                android:text="TextView02"      
20.                android:layout_height="wrap_content"      
21.                android:layout_width="fill_parent"      
22.                android:id="@+id/itemText" android:layout_toRightOf="@+id/itemImage" android:layout_below="@+id/itemTitle">     
23.          </TextView>     
24. </RelativeLayout>   

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:paddingBottom="4dip" android:paddingLeft="12dip"> <ImageView android:layout_width="wrap_content" android:id="@+id/itemImage" android:layout_height="fill_parent"> </ImageView> <TextView android:text="TextView01" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/itemTitle" android:layout_toRightOf="@+id/itemImage" android:textSize="20dip"> </TextView> <TextView android:text="TextView02" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/itemText" android:layout_toRightOf="@+id/itemImage" android:layout_below="@+id/itemTitle"> </TextView> </RelativeLayout>

 

      解释一下 item.xml的代码：这里使用了RelativeLayout布局，控件的关键的属性是：

itemTitle的属性 android:layout_toRightOf="@+id/itemImage" ，itemTitle在itemImage的右边；

itemText的属性 android:layout_toRightOf="@+id/itemImage"，ItemText在itemImage的右边， android:layout_below="@+id/itemTitle"， itemText 在 itemTitle的下面。

       最后，贴出JAVA的源代码，其中重点是LayoutInflate的用法。LayoutInflate的使用方法如下： 

• LayoutInflater的作用是，把一个View的对象与XML布局文件关联并实例化。
• View的对象实例化之后，可以通过findViewById()查找布局文件中的指定Id的组件。

 

view plain copy to clipboard print ?

1. package com.testListView;   
2.   
3. import android.app.Activity;   
4. import android.content.Context;   
5. import android.os.Bundle;   
6. import android.view.LayoutInflater;   
7. import android.view.View;   
8. import android.view.ViewGroup;   
9. import android.widget.BaseAdapter;   
10. import android.widget.ImageView;   
11. import android.widget.ListView;   
12. import android.widget.TextView;   
13.   
14. public class testListView extends Activity {   
15.     ListView listView;   
16.     String[] titles={"标题1","标题2","标题3","标题4"};   
17.     String[] texts={"文本内容A","文本内容B","文本内容C","文本内容D"};   
18.     int[] resIds={R.drawable.icon,R.drawable.icon,R.drawable.icon,R.drawable.icon};   
19.        
20.     @Override  
21.     public void onCreate(Bundle savedInstanceState) {   
22.         super.onCreate(savedInstanceState);   
23.         setContentView(R.layout.main);   
24.         this.setTitle("BaseAdapter for ListView");   
25.         listView=(ListView)this.findViewById(R.id.listView1);   
26.         listView.setAdapter(new ListViewAdapter(titles,texts,resIds));   
27.     }   
28.   
29.     public class ListViewAdapter extends BaseAdapter {   
30.         View[] itemViews;   
31.   
32.         public ListViewAdapter(String[] itemTitles, String[] itemTexts,   
33.                 int[] itemImageRes) {   
34.             itemViews = new View[itemTitles.length];   
35.   
36.             for (int i = 0; i < itemViews.length; i++) {   
37.                 itemViews[i] = makeItemView(itemTitles[i], itemTexts[i],   
38.                         itemImageRes[i]);   
39.             }   
40.         }   
41.   
42.         public int getCount() {   
43.             return itemViews.length;   
44.         }   
45.   
46.         public View getItem(int position) {   
47.             return itemViews[position];   
48.         }   
49.   
50.         public long getItemId(int position) {   
51.             return position;   
52.         }   
53.   
54.         private View makeItemView(String strTitle, String strText, int resId) {   
55.             LayoutInflater inflater = (LayoutInflater) testListView.this  
56.                     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);   
57.   
58.             // 使用View的对象itemView与R.layout.item关联   
59.             View itemView = inflater.inflate(R.layout.item, null);   
60.   
61.             // 通过findViewById()方法实例R.layout.item内各组件   
62.             TextView title = (TextView) itemView.findViewById(R.id.itemTitle);   
63.             title.setText(strTitle);   
64.             TextView text = (TextView) itemView.findViewById(R.id.itemText);   
65.             text.setText(strText);   
66.             ImageView image = (ImageView) itemView.findViewById(R.id.itemImage);   
67.             image.setImageResource(resId);   
68.                
69.             return itemView;   
70.         }   
71.   
72.         public View getView(int position, View convertView, ViewGroup parent) {   
73.             if (convertView == null)   
74.                 return itemViews[position];   
75.             return convertView;   
76.         }   
77.     }   
78.   
79. }  

package com.testListView; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; public class testListView extends Activity { ListView listView; String[] titles={"标题1","标题2","标题3","标题4"}; String[] texts={"文本内容A","文本内容B","文本内容C","文本内容D"}; int[] resIds={R.drawable.icon,R.drawable.icon,R.drawable.icon,R.drawable.icon}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.setTitle("BaseAdapter for ListView"); listView=(ListView)this.findViewById(R.id.listView1); listView.setAdapter(new ListViewAdapter(titles,texts,resIds)); } public class ListViewAdapter extends BaseAdapter { View[] itemViews; public ListViewAdapter(String[] itemTitles, String[] itemTexts, int[] itemImageRes) { itemViews = new View[itemTitles.length]; for (int i = 0; i < itemViews.length; i++) { itemViews[i] = makeItemView(itemTitles[i], itemTexts[i], itemImageRes[i]); } } public int getCount() { return itemViews.length; } public View getItem(int position) { return itemViews[position]; } public long getItemId(int position) { return position; } private View makeItemView(String strTitle, String strText, int resId) { LayoutInflater inflater = (LayoutInflater) testListView.this .getSystemService(Context.LAYOUT_INFLATER_SERVICE); // 使用View的对象itemView与R.layout.item关联 View itemView = inflater.inflate(R.layout.item, null); // 通过findViewById()方法实例R.layout.item内各组件 TextView title = (TextView) itemView.findViewById(R.id.itemTitle); title.setText(strTitle); TextView text = (TextView) itemView.findViewById(R.id.itemText); text.setText(strText); ImageView image = (ImageView) itemView.findViewById(R.id.itemImage); image.setImageResource(resId); return itemView; } public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) return itemViews[position]; return convertView; } } }