Android 的 ListView (一)

Android 最常用和最難用的 UI 元件 - ListView

ListView 絕對是 Android開發中最常用的 UI 元件之一,幾乎所有的應用程序都會用到它,當我們需要顯現大量數據的時候,我們就需要借助 ListView 來實現。比如說觀察 FB、IG 的 Po 文…等等

Imgur

首先一開始我們一樣在 xml layout 中 加入 ListView 的元件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.allenhsu.listview.MainActivity">

<LinearLayout
android:layout_width="368dp"
android:layout_height="495dp"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent">

</ListView>
</LinearLayout>

</android.support.constraint.ConstraintLayout>

這樣就完成了我們最基本的佈局,不過我們要怎麼賦予 ListView 資料呢?

首先我們先在對應的 Activity 定義我們的資料內容,這邊先用基本的字串來展示。

1
2
3
4
5
6
private String[] data = {
"蘋果", "香蕉", "橘子", "西瓜", "梨子",
"葡萄", "鳳梨", "草莓", "櫻桃", "芒果",
"蘋果", "香蕉", "橘子", "西瓜", "梨子",
"葡萄", "鳳梨", "草莓", "櫻桃", "芒果",
};

Android Adpter

不過,這邊的 data 數據是無法直接傳遞給 ListView的,我們需要借助 Adapter 來完成, Android 中提供了很多 Adapter 的實現類別, 我們這邊使用 ArrayAdapter。它能夠透過泛型來指定要轉接的數據類型,然後在 Construct 中把要轉接的數據傳入。 ArrayAdapter 有多個建構子的多載, 你應該根據實際情況所選擇最合適的一種。

Adpter To ListView

這裡由於我們的資料都是字串,所以我們將 ArrayAdpter 型別指定為 String ,然後在 ArrayAdpter 的 Construct 中依序傳入 Context ,ListView 佈局中 Child Item 的 元件id,以及要轉接的數據。

這邊我們直接使用了 android.R.layout.simple_list_item_ 作為 ListView Child Item 的元件id,它是一個 Android 內建的佈局文件,裡面只有一個 TextView, 可用於簡單顯示一段文字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 listView = (ListView)findViewById(R.id.list_view);
listView.setAdapter(adapter);
}
}

運行結果

Imgur