1. 程式人生 > >說說 Android UI 中的 ListView(列表控制元件)

說說 Android UI 中的 ListView(列表控制元件)

當程式中有大量的資料需要展示時,就需要用到 ListView 啦。ListView 允許使用者通過手指上下滑動的方式將螢幕外的資料滾動到螢幕內,同時螢幕上原有的資料則會滾動出螢幕。

1 基本用法

佈局檔案中加入 ListView:

<?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" >
<ListView android:id="@+id/list" android:layout_width="match_parent" android:layout_height="match_parent"> </ListView> </LinearLayout>

這裡將寬度和高度都設定為 match_parent,這樣 ListView 就會佔據了整個佈局的空間。

活動程式碼:

public class MainActivity
extends AppCompatActivity {
private String[] data = {"暹羅貓", "布偶貓", "折耳貓", "短毛貓", "波斯貓", "藍貓", "森林貓", "孟買貓","緬因貓","埃及貓","伯曼貓","緬甸貓","新加坡貓","美國短尾貓","巴釐貓"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ArrayAdapter<String> adapter = new
ArrayAdapter<String>( MainActivity.this, android.R.layout.simple_list_item_1, data); ((ListView) findViewById(R.id.list)).setAdapter(adapter); } }

ListView 是用於展示大量資料的,這些資料可以一般是來源於服務端,實際是由具體的應用場景來決定。這裡我們就使用了一個簡單的 data 陣列來模擬。

陣列中的資料需要藉助介面卡來傳遞。Android 中提供了很多介面卡的實現類,其中最好用的就是 ArrayAdapter。它可以通過泛型來指定要適配的資料型別,然後在建構函式中把要適配的資料傳入即可。ArrayAdapter 有多個建構函式的過載,我們應該根據實際情況選擇最合適的一種。

我們使用了 android.R.layout.simple_list_item_1作為 ListView 子項佈局的 id,這是一個 Android內建的佈局檔案,裡面只有一個 TextView,用於顯示一段文字。

ListView 示例

2 定製介面

現在讓 ListView 可以顯示更加豐富的內容。

準備好一組圖片,分別對應上面提供的每一種貓,我們要讓這些貓的名稱旁邊都有一張圖。

首先定義一個實體類,作為 ListView 介面卡的適配型別:

public class Cat {
    /**
     * 名字
     */
    private String name;

    /**
     * 圖片 ID
     */
    private int imageId;

    public Cat(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

我們為 ListView 的子項建一個自定義的佈局,在 layout 目錄下新建 cat_item.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="wrap_content">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp" />

</LinearLayout>

在這個佈局中,我們定義了一個 ImageView 用於顯示貓的圖片,又定義了一個 TextView 用於顯示貓的名稱。

接著建立一個自定義的介面卡,這個介面卡繼承 ArrayAdapter,並將泛型指定為 Cat 類:

public class CatAdapter extends ArrayAdapter<Cat> {

    private int resourceId;

    public CatAdapter(Context context, int resource, List<Cat> objects) {
        super(context, resource, objects);
        resourceId = resource;
    }

    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Cat cat = getItem(position);//獲取當前項的例項
        View view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
        ((ImageView) view.findViewById(R.id.image)).setImageResource(cat.getImageId());
        ((TextView) view.findViewById(R.id.name)).setText(cat.getName());
        return view;
    }
}

CatAdapter 重寫了 ArrayAdapter 的一組建構函式,用於將上下文、ListView 子項佈局的 id 和資料都傳遞進來。另外又重寫了 getView() 方法,這個方法在每個子項被滾動到螢幕內時會被呼叫。在 getView 方法中,首先通過 getItem() 方法得到當前項的 Cat 例項,然後使用
LayoutInflater 來為這個子項載入傳入的佈局。inflate() 的第三個引數表示不新增父佈局,因為這個 View 一旦有了父佈局之後,就不能再新增到 ListView 中咯。

最後修改活動類的程式碼:

private List<Cat> cats = new ArrayList<>();

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    init();

    CatAdapter adapter = new CatAdapter(MainActivity.this, R.layout.cat_item, cats);
    ((ListView) findViewById(R.id.list)).setAdapter(adapter);
}

/**
 * 初始化資料
 */
private void init() {
    cats.add(new Cat("暹羅貓", R.drawable.cat1));
    cats.add(new Cat("布偶貓", R.drawable.cat2));
    cats.add(new Cat("蘇格蘭摺耳貓", R.drawable.cat3));
    cats.add(new Cat("英國短毛貓", R.drawable.cat4));
    cats.add(new Cat("波斯貓", R.drawable.cat5));
    cats.add(new Cat("俄羅斯藍貓", R.drawable.cat6));
    cats.add(new Cat("美國短毛貓", R.drawable.cat7));
    cats.add(new Cat("異國短毛貓", R.drawable.cat8));
    cats.add(new Cat("挪威森林貓", R.drawable.cat9));
    cats.add(new Cat("孟買貓", R.drawable.cat10));
    cats.add(new Cat("緬因貓", R.drawable.cat11));
    cats.add(new Cat("埃及貓", R.drawable.cat12));
}

我們在 onCreate() 方法中建立了 CatAdapter 物件,並將 CatAdapter 作為介面卡傳遞給了
ListView 。

定製 ListView 介面

3 提升執行效率

目前執行效率是很低的,有以下原因:
* 在 CatAdapter 的 getView() 方法中,每次都將佈局重新載入了一遍,當 ListView 快速滾動時,就會成為效能的瓶頸。
* 每次在 getView() 方法中會呼叫一次 View 的 findViewById() 方法來獲取一次控制元件的例項。

我們可以這樣解決:
* getView() 方法中有一個 convertView 引數,這個引數會將之前載入好的佈局進行快取,以便之後可以進行重用。
* 新增了一個內部類 ViewHolder,快取控制元件的例項。

public class CatAdapter extends ArrayAdapter<Cat> {

    private int resourceId;

    public CatAdapter(Context context, int resource, List<Cat> objects) {
        super(context, resource, objects);
        resourceId = resource;
    }

    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Cat cat = getItem(position);//獲取當前項的例項
        View view;
        ViewHolder viewHolder;

        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.image = (ImageView) view.findViewById(R.id.image);
            viewHolder.name = (TextView) view.findViewById(R.id.name);
            view.setTag(viewHolder);//儲存
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();//取出
        }

        viewHolder.image.setImageResource(cat.getImageId());
        viewHolder.name.setText(cat.getName());
        return view;
    }

    private class ViewHolder {
        ImageView image;
        TextView name;


    }
}

4 點選事件

我們來實踐在 ListView 中響應使用者的點選事件。為活動類的 onCreate 方法新增以下程式碼:

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Cat cat = cats.get(position);
            Toast.makeText(MainActivity.this, cat.getName(), Toast.LENGTH_SHORT).show();
        }
    });

這裡為 ListView 註冊了一個監聽器,當用戶點選了 ListView 中的任一個子項時就會回撥
onItemClick() 方法,在這個方法中可以通過 position 引數判斷使用者點選的是哪一個子項。

點選 ListView 子項