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

## 建立專案

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

<img width="821" alt="Add Empty Activity" src="https://qiita-image-store.s3.amazonaws.com/0/41979/dffb1596-9e37-7306-e1ac-198d64354a83.png">

## 在 xml 裡面新增 ListView

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

結果如下：

``` xml: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 的這個標籤的時候，會用 

``` xml
<ListView></ListView>
```

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

``` xml
<ListView />
```

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

### 新增元件的 id

在這邊有一行：

``` xml
android:id="@+id/listView"
```

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

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

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

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

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

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

``` java: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`：

``` java
private ListView listView;
```

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

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

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

### 新增一個 Adapter

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

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

``` java
private ListAdapter listAdapter;
```

接著初始化這個變數：

``` java
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 檔案](https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/simple_list_item_1.xml) *(外連GitHub)*

#### ArrayAdapter

- [官方文件](https://developer.android.com/reference/android/widget/ArrayAdapter.html)

- `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

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

<img width="366" alt="ListView Practice" src="https://qiita-image-store.s3.amazonaws.com/0/41979/954ae06f-9f4d-2405-aa9a-1be67ac1fbcc.png">