android ListView詳解-java教程-PHP中文網

首頁

Java

java教程

android ListView詳解

高洛峰

Dec 13, 2016 pm 03:55 PM

　在android開發中ListView是比較常用的元件，它以列表的形式展示特定內容，並且能夠根據資料的長度自適應顯示。抽空把對ListView的使用做了整理，並寫了個小例子，如下圖。

android ListView详解

清單的顯示需要三個元素：

1． ListVeiw 用來展示清單的View。

2．適配器用來把資料映射到ListView上的中介。

3．資料具體的將被映射的字串，圖片，或基本組件。

根據清單的適配器類型，清單分為三種，ArrayAdapter，SimpleAdapter和SimpleCursorAdapter

其中以ArrayAdapter最為簡單，只能展示一行字。 SimpleAdapter有最好的擴充性，可以自訂出各種效果。 SimpleCursorAdapter可以認為是SimpleAdapter對資料庫的簡單結合，可以面向的把資料庫的內容以列表的形式展示出來。

我們從最簡單的ListView開始：

/**
 * @author allin
 *
 */
public class MyListView extends Activity {
 
    private ListView listView;
    //private List<String> data = new ArrayList<String>();
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
         
        listView = new ListView(this);
        listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_expandable_list_item_1,getData()));
        setContentView(listView);
    }
     
     
     
    private List<String> getData(){
         
        List<String> data = new ArrayList<String>();
        data.add("测试数据1");
        data.add("测试数据2");
        data.add("测试数据3");
        data.add("测试数据4");
         
        return data;
    }
}

上面程式碼使用了ArrayAdapter(Context context, int textViewResourceId, List objects)來組裝資料，要組裝這些資料視圖就需要一個連接ListListViewView.適配器來兩者的適配工作，ArrayAdapter的構造需要三個參數，依次為this,佈局文件（注意這裡的佈局文件描述的是列表的每一行的佈局，android.R.layout.simple_list_item_1是系統定義好的版面配置檔案只顯示一行文字，資料來源(一個List集合)。：An easy adapter to map columns from a cursor to TextViews or ImageViews defined in an XML file. You can specify which columns you want, which views you want to display the columns, and the XML file 簡單 defse appearances。的說就是方便把從遊標得到的資料進行清單顯示，並且可以把指定的欄位對應到對應的TextView中。中加入一個聯絡人作為資料庫的資料。 , null, null, null);先取得一個指向系統通訊錄資料庫的Cursor物件取得資料來源。自動同步，省去自己手動管理Cursor。型數組。其作用是自動的將String型陣列所表示的每一列資料對應到佈局檔案對應id的元件上。上面的程式碼，將NAME列的資料一次對應到佈局檔案的id為text1的元件上。

注意：需要在AndroidManifest.xml中如權限： android ListView详解

運行後效果如下圖：

simpleAdapter的擴充性最好，可以定義各種各樣的佈局出來，可以放上ImageView（圖片），還可以放上Button（按鈕），CheckBox（複選框）等等。下面的程式碼都直接繼承了ListActivity，ListActivity和普通的Activity沒有太大的差別，不同就是對顯示ListView做了許多優化，方面顯示而已。

下面的程式是實作一個帶有圖片的類別表。

首先需要定義好一個用來顯示每個列內容的xml

vlist.xml

/**
 * @author allin
 *
 */
public class MyListView2 extends Activity {
 
    private ListView listView;
    //private List<String> data = new ArrayList<String>();
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
         
        listView = new ListView(this);
         
        Cursor cursor = getContentResolver().query(People.CONTENT_URI, null, null, null, null);
        startManagingCursor(cursor);
         
        ListAdapter listAdapter = new SimpleCursorAdapter(this, android.R.layout.simple_expandable_list_item_1, 
                cursor,
                new String[]{People.NAME}, 
                new int[]{android.R.id.text1});
         
        listView.setAdapter(listAdapter);
        setContentView(listView);
    }
     
     
}

下面是實作程式碼： android ListView详解

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
 
    <ImageView android:id="@+id/img" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_margin="5px"/>
 
    <LinearLayout android:orientation="vertical"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
 
        <TextView android:id="@+id/title" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:textColor="#FFFFFFFF"
            android:textSize="22px" />
        <TextView android:id="@+id/info" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:textColor="#FFFFFFFF"
            android:textSize="13px" />
 
    </LinearLayout>
 
 
</LinearLayout>

使用simpleAdapter的資料用一般都是HashMap構成的List，list的每一節對應ListView的每一行。 HashMap的每個鍵值資料映射到佈局檔案中對應id的元件上。因為系統沒有對應的佈局檔案可用，我們可以自己定義一個佈局vlist.xml。下面做適配，new一個SimpleAdapter參數一次是：this，佈局檔（vlist.xml），HashMap的 title 和 info，img。版面配置檔案的元件id，title，info，img。版面配置檔案的各元件分別映射到HashMap的各元素上，完成適配。

運作效果如下圖：

android ListView详解

有按钮的ListView

但是有时候，列表不光会用来做显示用，我们同样可以在在上面添加按钮。添加按钮首先要写一个有按钮的xml文件，然后自然会想到用上面的方法定义一个适配器，然后将数据映射到布局文件上。但是事实并非这样，因为按钮是无法映射的，即使你成功的用布局文件显示出了按钮也无法添加按钮的响应，这时就要研究一下ListView是如何现实的了，而且必须要重写一个类继承BaseAdapter。下面的示例将显示一个按钮和一个图片，两行字如果单击按钮将删除此按钮的所在行。并告诉你ListView究竟是如何工作的。效果如下：

android ListView详解

vlist2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
 
    <ImageView android:id="@+id/img" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_margin="5px"/>
 
    <LinearLayout android:orientation="vertical"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
 
        <TextView android:id="@+id/title" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:textColor="#FFFFFFFF"
            android:textSize="22px" />
        <TextView android:id="@+id/info" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:textColor="#FFFFFFFF"
            android:textSize="13px" />
 
    </LinearLayout>
 
 
    <Button android:id="@+id/view_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/s_view_btn"
        android:layout_gravity="bottom|right" />
</LinearLayout>

程序代码：

/**
 * @author allin
 * 
 */
public class MyListView4 extends ListActivity {
 
 
    private List<Map<String, Object>> mData;
     
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mData = getData();
        MyAdapter adapter = new MyAdapter(this);
        setListAdapter(adapter);
    }
 
    private List<Map<String, Object>> getData() {
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
 
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("title", "G1");
        map.put("info", "google 1");
        map.put("img", R.drawable.i1);
        list.add(map);
 
        map = new HashMap<String, Object>();
        map.put("title", "G2");
        map.put("info", "google 2");
        map.put("img", R.drawable.i2);
        list.add(map);
 
        map = new HashMap<String, Object>();
        map.put("title", "G3");
        map.put("info", "google 3");
        map.put("img", R.drawable.i3);
        list.add(map);
         
        return list;
    }
     
    // ListView 中某项被选中后的逻辑
    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
         
        Log.v("MyListView4-click", (String)mData.get(position).get("title"));
    }
     
    /**
     * listview中点击按键弹出对话框
     */
    public void showInfo(){
        new AlertDialog.Builder(this)
        .setTitle("我的listview")
        .setMessage("介绍...")
        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        })
        .show();
         
    }
     
     
     
    public final class ViewHolder{
        public ImageView img;
        public TextView title;
        public TextView info;
        public Button viewBtn;
    }
     
     
    public class MyAdapter extends BaseAdapter{
 
        private LayoutInflater mInflater;
         
         
        public MyAdapter(Context context){
            this.mInflater = LayoutInflater.from(context);
        }
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return mData.size();
        }
 
        @Override
        public Object getItem(int arg0) {
            // TODO Auto-generated method stub
            return null;
        }
 
        @Override
        public long getItemId(int arg0) {
            // TODO Auto-generated method stub
            return 0;
        }
 
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
             
            ViewHolder holder = null;
            if (convertView == null) {
                 
                holder=new ViewHolder();  
                 
                convertView = mInflater.inflate(R.layout.vlist2, null);
                holder.img = (ImageView)convertView.findViewById(R.id.img);
                holder.title = (TextView)convertView.findViewById(R.id.title);
                holder.info = (TextView)convertView.findViewById(R.id.info);
                holder.viewBtn = (Button)convertView.findViewById(R.id.view_btn);
                convertView.setTag(holder);
                 
            }else {
                 
                holder = (ViewHolder)convertView.getTag();
            }
             
             
            holder.img.setBackgroundResource((Integer)mData.get(position).get("img"));
            holder.title.setText((String)mData.get(position).get("title"));
            holder.info.setText((String)mData.get(position).get("info"));
             
            holder.viewBtn.setOnClickListener(new View.OnClickListener() {
                 
                @Override
                public void onClick(View v) {
                    showInfo();                 
                }
            });
             
             
            return convertView;
        }
         
    }
     
     
     
     
}

　　下面将对上述代码，做详细的解释，listView在开始绘制的时候，系统首先调用getCount（）函数，根据他的返回值得到listView的长度（这也是为什么在开始的第一张图特别的标出列表长度），然后根据这个长度，调用getView（）逐一绘制每一行。如果你的getCount（）返回值是0的话，列表将不显示同样return 1，就只显示一行。

　　系统显示列表时，首先实例化一个适配器（这里将实例化自定义的适配器）。当手动完成适配时，必须手动映射数据，这需要重写getView（）方法。系统在绘制列表的每一行的时候将调用此方法。getView()有三个参数，position表示将显示的是第几行，covertView是从布局文件中inflate来的布局。我们用LayoutInflater的方法将定义好的vlist2.xml文件提取成View实例用来显示。然后将xml文件中的各个组件实例化（简单的findViewById()方法）。这样便可以将数据对应到各个组件上了。但是按钮为了响应点击事件，需要为它添加点击监听器，这样就能捕获点击事件。至此一个自定义的listView就完成了，现在让我们回过头从新审视这个过程。系统要绘制ListView了，他首先获得要绘制的这个列表的长度，然后开始绘制第一行，怎么绘制呢？调用getView()函数。在这个函数里面首先获得一个View（实际上是一个ViewGroup），然后再实例并设置各个组件，显示之。好了，绘制完这一行了。那再绘制下一行，直到绘完为止。在实际的运行过程中会发现listView的每一行没有焦点了，这是因为Button抢夺了listView的焦点，只要布局文件中将Button设置为没有焦点就OK了。

运行效果如下图：

android ListView详解