Android 學習筆記 - 建立簡單的 ListView

建立專案

• Android 版本設定在 4.1, Android Studio 2.1.1
• Activity 的話，為了簡單則選擇了 "Empty Activity", 命名為 MainActivity

在 xml 裡面新增 ListView

• 在左側檔案目錄中，打開 app/res/layout/activity_main.xml
• 把原本的 "Hello World" 的 tag 清除掉
• 加入 ListView 的標籤並做其他設定，寬和高就直接設定 match_parent 來佈滿畫面

結果如下：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.vc7.learningandroid.MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView"
        />

</RelativeLayout>

其中要注意的一點是 - Android Studio 在自動完成 ListView 的這個標籤的時候，會用

<ListView></ListView>

這樣的方式生成。
像這次練習的東西，若不需要在兩個 tag 中間放 items 的話，可以直接用 /> 結尾即可，就像這樣：

<ListView />

就可以避免空 tag 而讓 IDE 跳出警告。

新增元件的 id

在這邊有一行：

android:id="@+id/listView"

• @+id： 有一個 + 就是代表，這個 id 是要被「新增」的，而不是參照其他地方新增的
• 在這邊設定的 id ，會在 Java code 裡面使用這個 id 來找到 xml 檔案中的這個 UI

在 Java code 裡面使用，並賦予資料

接著這一步就來到 Java 的檔案中，找到剛剛在 xml 新增的 ListView ，並賦予簡單的資料並顯示出來

先大蓋列一下這一步會做哪些事

• 使用 MainActivity.java 這個檔案
• 新增變數存放在 xml 新增的 ListView 元件
• 使用 ListAdapter 來設定 ListView 要顯示的簡要資料

完成的程式碼長這個樣子：

MainActivity.java

package com.vc7.learningandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private ListAdapter listAdapter;

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

        listView = (ListView) findViewById(R.id.listView);
        listAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, new String[]{"一", "二", "三"});
        listView.setAdapter(listAdapter);
    }
}

找到 xml 中的 ListView

在這邊我先宣告一個變數來存放這個 ListView：

private ListView listView;

接著使用原生的方法 findViewById 去根據 id 來找到我要的 view 。目前看起來在 xml 中新增的 id 都可以用 R.id 找到，目前只有先實作做出來，之後再來看原理是為什麼。

取到元件之後，前面再用 (ListView) 把它轉型過再把值賦予到剛剛新增的成員變數 listView 中。

listView = (ListView) findViewById(R.id.listView);

新增一個 Adapter

Adapter 是在 Android 裡面常見的設計模式（目前對 Java 不熟，不確定 Java 是不是也是這要用，因為目前是實作練習為主，詳細待之後再查清楚），用來作為畫面和資料的接口，用途上有點像是 iOS 裡面的 DataSource 和 Delegate pattern 的綜合體，不過原理看起來是不太一樣的。

在這裡新增一個變數來存 adapter ：

private ListAdapter listAdapter;

接著初始化這個變數：

listAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, new String[]{"一", "二", "三"});

在這裡使用 ArrayAdapter ， list item 的元件則使用原生的 simple_list_item_1 來顯示，這個元件只有一個文字的畫面元件 (TextView ) 可以顯示，所以最後一個參數傳入一個 String 的 array 就可以了。

• simple_list_item_1 的 layout 檔案 (外連GitHub)

ArrayAdapter

• 官方文件

• this - 在這邊用到的第一個參數就是要帶入目前所使用的情境 (context) 以現在這個例子來說就是自己，所以帶入 this

• 第二個參數就要帶入 layout 所需要的 resource id ，在這邊就是帶入 android 原生送的 list item 的 layout

• 第三個參數則是根據指定的型態 String 傳入該型態的陣列，在這邊就是一個簡單的字串陣列

使用 android 自帶的元件

在之後也有可能會用到 android 原生的素材或是 layout ，需要取用的時候，只要在最前面加上 android 這個關鍵字即可，如這邊用到的：

android.R.layout.simple_list_item_1

就是如此。

Run or Debug

點擊後，選擇要跑的模擬器或是實體裝置，就會看到類似以下畫面，就代表成功了：