Android筆記(22)：UI元件 ListView 列表選單

Photo by Markus Winkler on Unsplash

[ListView]

ListView 也是 Android 中很常見的一種列表元件，它以列表清單的方式將資料顯示在螢幕上。在 Android 中，如果想在螢幕中增加 ListView，可以在XML佈局檔中使用 <ListView> 標記添加，基本語法格式如下：

<ListView
   android:屬性 = "值"> 
</ListView>

ListView 元件間接繼承自 ViewGroup 元件，因此 ViewGroup 的屬性也可使用在 ListView 元件，其他常用屬性還包括：

XML屬性	描述
divider	設定分隔線，可以設定使用顏色值分隔或是以 Drawable 內的資源來分隔。
dividerHeight	設定分隔條的高度。
entries	使用陣列資源為 ListView 指定清單項。
footerDividersEnabled	設定是否在 footer View 之前繪製分隔線，預設值為true，設置為 false 時，表示不繪製。
headerDividersEnabled	設定是否在 header View 之後繪製分隔線，預設值為true，設置為 false 時，表示不繪製。

在Android 中，有兩種方式可以將資料以清單的方式顯示：一種是建立一個字串資源檔(Values Resource File)，將列表的項目定義在資源檔中，再透過 XML 佈局檔中使用 <ListView> 標記，使用屬性 android:entries 設定顯示在 ListView 中；另一種是直接在 java 程式中，以字串陣列的方式儲存列表項目，再以 Adapter 的方式將字串陣列與 ListView 結合。以下就先看如何使用使用佈局 Layout，下一篇再來瞭解如何使用 Adapter。

[使用佈局 Layout]

在 res/values 目錄中建立一個定義陣列資源的 XML 檔 arrays.xml。先將左方的 res 目錄內，對 values 目錄按右鍵 →[New]→[Values Resource File]，如下圖：

輸入 arrays.xml 當作資源檔檔名。

在資源檔中，依格式輸入列表清單中的項目：

[程式範例]

(1)新建一個模組 Module，在 res/values 目錄下新增一個字串陣列檔，名為 arrays.xml，定義內容如下：

<resources>
    <string-array name="lv_item">
        <item>香菇湯意麵</item>
        <item>滷肉飯</item>
        <item>餛飩板條</item>
        <item>榨菜肉絲米粉</item>
        <item>香菇湯意麵</item>
        <item>豬肝麵</item>
        <item>高麗菜水餃</item>
    </string-array>
</resources>

(2) 進入 res/layout 目錄下點選佈局檔 activity_main.xml。將預設的內容刪除，建立 1 個 TextView 文字框，1 個 ListView，以下是完整 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">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="40sp"
        android:layout_marginTop="30sp"
        android:textSize="26sp"
        android:text="午餐要吃什麼？">
    </TextView>

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:entries="@array/lv_item">
    </ListView>

</LinearLayout>

(3)在 MainActivity.java 在 onCreate() 方法內，先建立與佈局檔的物件，用 findValueById 連結 ListView 元件，設定 setOnItemClickListener 監聽器，如果偵測到選項被按下，執行 onItemClick 程序，使用 getItemAtPosition 方法得知目前按下的值，再將按下該選項的值 Toast 顯示在畫面上。程式碼如下：

package com.example.mylistview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class lv_MainActivity extends AppCompatActivity {

    private ListView lv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lv_main);

        lv = (ListView) findViewById(R.id.lv);
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener(){
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                String result = parent.getItemAtPosition(position).toString();
                Toast.makeText(lv_MainActivity.this, result, Toast.LENGTH_LONG).show();
            }
        });
    }
}

執行的結果如下：

[參考資料]

• Developer : ListView
• 明日科技:Android 從入門到精通