Android UI組件----ListView列表控件詳解

【聲明】

歡迎轉載，但請保留文章原始出處→_→

生命壹號：http://www.cnblogs.com/smyhvae/

文章來源：http://www.cnblogs.com/smyhvae/p/3910884.html

 

【正文】

內容簡介：

• 一、基本的XML配置

• 二、ListActivity

• 三、單選和多選模式

• 四、ListView實現圖文列表

• 五、ListView刷新分頁

 

1、基本的 XML配置：

• android:cacheColorHint="#00000000"  //設置拖動背景色爲透明
• android:dividerHeight="30px"  //listview item之間的高度（即分格條的高度）
• android:divider="@drawable/ic_launcher"  //設置listview item之間背景或者說是顏色
• android:fadingEdge="vertical"  //上邊和下邊有黑色的陰影，值爲none的話就沒有陰影
• android:drawSelectorOnTop="true" 點擊某條記錄不放，顏色會在記錄的前面，成爲前景色，記錄上的文字被遮住，因此點擊文字不放，文字就看不到（默認爲false）
• android:scrollbars="horizontal|none"  //只有值爲horizontal|vertical的時候（默認也是這個值），纔會顯示滾動條，而且會自動影藏和顯示
• android:fastScrollEnabled="true"  //快速滾動效果，配置這個屬性，在快速滾動的時候旁邊會出現一個小方塊，進行快速滾動，自動隱藏和顯示（若是沒有出現，是由於ListView item數目不夠多）
• android:listSelector="@color/pink"  //istViewl item選中時的顏色
• android:entries="@array/citys"  //設置列表填充的內容

在ListView中加載本地數據，有兩種方式，下面舉例說明：（固然了，在這以前咱們須要在佈局文件activity_main.xml中添加一個ListView控件）

【方式一】：在xml文件中添加靜態數據的方式：

在res/values/string.xml文件中， 添加一組靜態數據，做爲列表中將要填充的內容，代碼以下

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3     <string name="app_name">smyh005_ListView</string>
 4     <string name="action_settings">Settings</string>
 5     <string name="hello_world">Hello world!</string>
 6     
 7     <string-array name="names">
 8         <item >生命壹號</item>
 9         <item >生命壹號</item>
10         <item >生命壹號</item>
11         <item >生命壹號</item>
12         <item >生命壹號</item>
13         <item >生命壹號</item>
14         <item >生命壹號</item>
15         <item >生命壹號</item>
16         <item >生命壹號</item> 
17     </string-array>
18     
19 </resources>

緊接着，在佈局文件的ListView控件中，添加以下屬性：

android:entries="@array/names"

而後設置一下ListView的其餘屬性。這樣，運行後，就能夠顯示一個簡單的列表了。

 

【方式二】在java代碼中來添加數據：

 1 public class MainActivity extends Activity {
 2     private ListView listView;
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_main);
 7         listView = (ListView) findViewById(R.id.listView1);
 8         String[] names = { "生命壹號", "生命壹號", "生命壹號", "生命壹號", "生命壹號", "生命壹號" };  9         //第二個參數，也能夠新建一個佈局文件，在這個佈局文件的TextView當中設置其餘屬性。由於每一個Item自己就是一個TextView
10         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 11  android.R.layout.simple_list_item_1, names); 12         listView.setAdapter(adapter);
13     }

 

【事件處理】

事件處理的監聽器爲：OnItemClickListener。

方法舉例以下：（將當前點擊的那個item的文本以吐司的方式顯示出來）

 1 listView1.setOnItemClickListener(new OnItemClickListener(){
 2             
 3             //ListView的列表項的單擊事件 
 4             @Override
 5             //第一個參數：指的是這個ListView；第二個參數：當前單擊的那個item
 6             public void onItemClick(AdapterView<?> parent, View view, int position,
 7                     long id) {
 8                 System.out.println("parent="+parent.getClass());
 9                 System.out.println("view="+view.getClass());
10                 
11                 //既然當前點擊的那個item是一個TextView，那咱們能夠將其強制轉型爲TextView類型，而後經過getText()方法取出它的內容,緊接着以吐司的方式顯示出來
12                 TextView tv = (TextView)view; 13                 Toast.makeText(MainActivity.this,tv.getText(),Toast.LENGTH_SHORT).show();//方法： Toast makeText (Context context, CharSequence text, int duration)  
14                 
15                 System.out.println("position="+position);
16                 System.out.println("id="+id);
17                 
18             }
19             
20  });

上面的第十二、13行代碼也能夠替換成下面的這行代碼：（由於經過adapter的getItem方法也能夠獲取對應Item，返回值類型是咱們以前定義好的String類型）

        Toast.makeText(MainAcivity.this, adapter.getItem(position), Toast.LENGTH_SHORT).show;

運行效果以下：

 

2、ListActivity

（1）若是程序的窗口僅僅只須要顯示一個列表，則可讓這個activity直接繼承ListActivity來實現，此時已經包含了一個ListView組件，不用再從新寫佈局文件了。

代碼舉例以下：

 1 package com.smyhvae.smyh005listview;
 2 import android.app.ListActivity;
 3 import android.os.Bundle;
 4 import android.widget.ArrayAdapter;
 5 public class SecondActivity extends ListActivity{  6     @Override
 7     protected void onCreate(Bundle savedInstanceState) {
 8         // TODO Auto-generated method stub
 9         super.onCreate(savedInstanceState);
10         //經過代碼設置ListView中的內容
11         String[] names = {"生命壹號","生命壹號","生命壹號","生命壹號","生命壹號","生命壹號"};
12         //經過ArrayAdaper將names的內容填充進去
13         //方法：public ArrayAdapter (Context context, int resource, int textViewResourceId),第二個參數爲佈局
14         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, names);
15         // adpter和ListView進行綁定
16         setListAdapter(adapter);
17         
18         //注：經過getListView()能夠取出這個ListView
19     }
20 }

運行後，也能顯示出一個ListView。

（2）事件處理

事件處理的方法爲：onListItemClick();

ListActiviy這個類中已經包含了事件處理的監聽器，因此咱們只須要複寫其中的onListItemClick()便可：

1     //重寫ListActivity中的onListItemClick方法來實現列表項的單擊事件
2     @Override
3     protected void onListItemClick(ListView l, View v, int position, long id) {
4         // TODO Auto-generated method stub
5         super.onListItemClick(l, v, position, id);
6     }

（3）ListActivity的佈局默認是由一個單一的在屏幕中心的全屏幕的列表，用setcontentview()在在oncreate()設置您本身的自定義屏幕布局視圖佈局，必須包含一個列表視圖的對象ID："@android:id/list「

（4）自定義視圖能夠包含任何類型，顯示另外一個視圖對象列表視圖是空的，必須包含一個視圖對象的ID：android:id/empty。

 

3、單選和多選模式：

單選模式：

1         String[] cities = { "北京", "成都", "重慶", "武漢" };
2         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
3  android.R.layout.simple_list_item_single_choice, cities);
4         listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

多選模式：

1         String[] cities = { "北京", "成都", "重慶", "武漢" };
2         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
3  android.R.layout.simple_list_item_multiple_choice, cities);
4         listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

 

5、ListView實現圖文列表：

一、使用SimpleAdapter創建複雜的列表項：

使用到的方法是：

android.widget.SimpleAdapter.SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)

• 第2個參數data：每一個Item就是一個Map，多個Map放在一個List當中。這個List是一個集合對象。,每個map中應該包含全部在from參數中指定的鍵；（例如，data裏放入圖片和文字）
• 第3個參數resource：一個自定義列表項的佈局文件的資源ID。佈局文件將至少應包含在to中定義了的ID。（通俗來講，就是先定義一個Item的模板）
• 第4個參數from：一個將被添加到Map映射上的鍵名
• 第5個參數to：將綁定數據的視圖的ID,跟from參數對應,這些應該全是TextView。

舉例說明，完整版代碼以下：

佈局文件activity3.xml的代碼：

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

下面新建一個佈局文件activity_main_item.xml，做爲一個Item的模板：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/vae" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="20sp" />
</LinearLayout>

這個佈局文件展現的效果以下：

 

而後，MainActivity.java的代碼以下：

 1 import java.util.ArrayList;
 2 import java.util.HashMap;
 3 import java.util.List;
 4 import java.util.Map;
 5 import android.app.Activity;
 6 import android.os.Bundle;
 7 import android.view.Menu;
 8 import android.widget.ListView;
 9 import android.widget.SimpleAdapter;
10 public class MainActivity extends Activity {
11     private ListView listView;
12     @Override
13     protected void onCreate(Bundle savedInstanceState) {
14         super.onCreate(savedInstanceState);
15         setContentView(R.layout.activity_main);
16         listView = (ListView) findViewById(R.id.listView1);
17         //步驟1 一個列表項的內容，就是一個item
18         Map<String, Object> item1 = new HashMap<String, Object>();
19         item1.put("image", R.drawable.vae);
20         item1.put("name", "許嵩");
21         //步驟1：一個列表項的內容，就是一個item，即一個Map
22         Map<String, Object> item2 = new HashMap<String, Object>();
23         item2.put("image", R.drawable.smyh);
24         item2.put("name", "生命壹號");
25         
26         //步驟2：把這些Map放到List當中
27         List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
28         data.add(item1);
29         data.add(item2);
30         
31         //注意：第四個參數和第五個參數要一一對應
32         SimpleAdapter simpleAdapter = new SimpleAdapter(this, data, 33                 R.layout.activity_main_item, new String[] { "image", "name" }, 34                 new int[] { R.id.imageView1, R.id.textView1 }); 35         
36         //步驟3：將List中的內容填充到listView裏面去
37         listView.setAdapter(simpleAdapter);
38     }
39     @Override
40     public boolean onCreateOptionsMenu(Menu menu) {
41         // Inflate the menu; this adds items to the action bar if it is present.
42         getMenuInflater().inflate(R.menu.main, menu);
43         return true;
44     }
45 }

運行後，效果以下：

【工程文件】

連接：http://pan.baidu.com/s/1pJLmvJt

密碼：q63j

若是item比較多的話，能夠用for循環來作

 

二、自定義適配器BaseAdapter實現更靈活的列表：【重要】

以前使用SimpleAdapter，它的侷限性在於，SimpleAdapter已經將內部的結構（即每一個item）封裝好了，而後按照這種格式疊加起來，沒法進行額外的處理。因此，這時候可使用BaseAdapter實現更靈活的列表。

（1）方法：實際上，就是本身寫一個MyAdapter類，讓它繼承BaseAdapter。須要複寫該類的四個方法：

• public int getCount() ：經過 adapter告訴 最要在 listView(view) 中顯示 多少條目 的數據。
• public Object getItem(int position)
• public long getItemId(int position)
• public View getView(int position, View convertView, ViewGroup parent)：用來 顯示 【每一個條目時】 會被調用到的 方法。

最重要的是 getCount() 和 getView()。

（2）ListView 的優化：

• 重複使用convertView
• 使用ViewHolder提升在容器中查找組件的效率

完整版代碼以下：

activity_main.xml：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:paddingBottom="@dimen/activity_vertical_margin"
 6     android:paddingLeft="@dimen/activity_horizontal_margin"
 7     android:paddingRight="@dimen/activity_horizontal_margin"
 8     android:paddingTop="@dimen/activity_vertical_margin"
 9     tools:context=".MainActivity" >
10     <ListView
11         android:id="@+id/listView1"
12         android:layout_width="match_parent"
13  android:layout_height="match_parent" >
14     </ListView>
15 </LinearLayout>

注：爲了優化，第13行的代碼必定要寫match_parent，而不是wrap_content，解釋略。

activity_main_item.xml：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="wrap_content"
 5     android:orientation="horizontal"
 6     android:gravity="center" >
 7     
 8     <ImageView
 9         android:id="@+id/imageView1"
10         android:layout_width="81dp"
11         android:layout_height="81dp"
12         android:src="@drawable/vae" />
13     <TextView
14         android:id="@+id/textView1"
15         android:layout_width="match_parent"
16         android:layout_height="wrap_content"
17         android:text="TextView" />    
18 </LinearLayout>

Mainactivity.java：

 1 package com.smyhvae.smyh005listview4;
 2 import android.app.Activity;
 3 import android.os.Bundle;
 4 import android.view.Menu;
 5 import android.view.View;
 6 import android.view.ViewGroup;
 7 import android.widget.BaseAdapter;
 8 import android.widget.ImageView;
 9 import android.widget.ListView;
10 import android.widget.TextView;
11 public class MainActivity extends Activity {
12     private ListView listView;
13     @Override
14     protected void onCreate(Bundle savedInstanceState) {
15         super.onCreate(savedInstanceState);
16         setContentView(R.layout.activity_main);
17         listView = (ListView) findViewById(R.id.listView1);
18         listView.setAdapter(new MyAdapter());
19     }
20     // 定義的數據
21     private int[] images = { R.drawable.vae, R.drawable.vae, R.drawable.vae,
22             R.drawable.vae, R.drawable.vae, R.drawable.vae, R.drawable.vae,
23             R.drawable.vae, R.drawable.vae, R.drawable.vae, R.drawable.vae,
24             R.drawable.vae };
25     private String[] names = { "生命01號", "生命02號", "生命03號", "生命04號", "生命05號",
26             "生命06號", "生命07號", "生命08號", "生命09號", "生命10號", "生命11號", "生命12號" };
27     
28     //自定義適配器
29     class MyAdapter extends BaseAdapter{
30         @Override
31         public int getCount() {
32             // TODO Auto-generated method stub
33             return names.length;
34         }
35         @Override
36         public Object getItem(int position) {
37             // TODO Auto-generated method stub
38             return names[position];
39         }
40         @Override
41         public long getItemId(int position) {
42             // TODO Auto-generated method stub
43             return position;
44         }
45         @Override
46         public View getView(int position, View convertView, ViewGroup parent) {
47             // TODO Auto-generated method stub
48 //            System.out.println("position=" + position);
49 //            System.out.println(convertView);
50 //            System.out.println("------------------------");
51             ViewHolder vh = new ViewHolder();
52             //經過下面的條件判斷語句，來循環利用。若是convertView = null ，表示屏幕上沒有能夠被重複利用的對象。
53             if(convertView==null){ 54                 //建立View
55                 convertView = getLayoutInflater().inflate(R.layout.activity_main_item, null); 56                 vh.iv = (ImageView) convertView.findViewById(R.id.imageView1); 57                 vh.tv = (TextView) convertView.findViewById(R.id.textView1); 58  convertView.setTag(vh); 59             }else{ 60                  vh = (ViewHolder)convertView.getTag(); 61  } 62  vh.iv.setImageResource(images[position]); 63  vh.tv.setText(names[position]); 64             return convertView; 65         }
66         
67     }
68     
69     static class ViewHolder{ 70  ImageView iv; 71  TextView tv; 72  } 73     @Override
74     public boolean onCreateOptionsMenu(Menu menu) {
75         // Inflate the menu; this adds items to the action bar if it is present.
76         getMenuInflater().inflate(R.menu.main, menu);
77         return true;
78     }
79 }

運行效果以下：

【工程文件】

連接：http://pan.baidu.com/s/1hqvImfM

密碼：oytm

 

5、ListView刷新分頁

這個過程說來話長，具體參考本人另一篇博客：

Android UI組件----自定義ListView實現動態刷新

 

個人公衆號

想學習代碼以外的軟技能？不妨關注個人微信公衆號：生命團隊（id：vitateam）。

掃一掃，你將發現另外一個全新的世界，而這將是一場美麗的意外：