PowerPoint Presentation

Transcription

1 Part 3 學 習 使 用 基 本 介 面 元 件 單 元 12 更 多 變 化 的 TextView EditText 和 Button 介 面 元 件 單 元 13 Spinner 下 拉 式 選 單 元 件 單 元 14 使 用 RadioGroup 和 RadioButton 元 件 建 立 單 選 清 單 單 元 15 CheckBox 多 選 清 單 和 ScrollView 捲 軸 單 元 16 ListView 選 項 清 單 單 元 17 ExpandableListView 二 層 式 可 展 開 選 項 清 單 單 元 18 AutoCompleteTextView 自 動 完 成 文 字 輸 入 1

2 單 元 12 更 多 變 化 的 TextView EditText 和 Button 介 面 元 件 2

3 常 用 的 介 面 元 件 屬 性 屬 性 名 稱 設 定 值 使 用 說 明 android:id 元 件 的 名 稱 設 定 該 介 面 元 件 的 名 稱 android:layout_width android:layout_height fill_parent, match_parent, wrap_content 設 定 元 件 的 寬 和 高 android:text 元 件 中 的 文 字 顯 示 在 元 件 中 的 文 字 android:inputtype Text, number, date, time, 輸 入 的 資 料 類 型 android:background 顏 色 (6 個 16 進 位 數 字, 例 如 FF0000) 儲 存 在 drawable 資 料 夾 中 的 圖 形 android:textsize 數 值 和 sp 長 度 單 位 設 定 文 字 大 小 設 定 元 件 的 底 色 或 底 圖, 顏 色 以 # 開 頭 android:textcolor 顏 色 設 定 文 字 顏 色, 顏 色 以 # 開 頭 android:password true, false 用 暗 碼 顯 示 防 止 被 他 人 窺 視 android:autolink web, , phone, map, all 自 動 偵 測 字 串 中 的 超 連 結 資 料 android:layout_margin android:layout_marginxxx android:padding android:paddingxxx 數 值 和 dp 長 度 單 位 數 值 和 dp 長 度 單 位 設 定 元 件 四 周 的 間 隔 距 離 設 定 元 件 內 部 的 文 字 和 邊 的 距 離 android:gravity center_hotizontal, center_vertical, center 元 件 中 的 物 件 的 對 齊 方 式 android:layout_gravity center_hotizontal, center_vertical, center 元 件 相 對 於 外 框 的 對 齊 方 式 3

4 介 面 元 件 屬 性 使 用 的 長 度 單 位 單 位 名 稱 全 名 說 明 px pixel 螢 幕 像 素 pt point 傳 統 印 刷 使 用 的 字 體 大 小 單 位,1pt = 1/72 英 吋 dp density-independent point 對 應 到 160 dpi 螢 幕 的 像 素 個 數,Android 程 式 應 該 使 用 這 個 單 位 來 設 定 元 件 的 大 小 和 空 間 距 離 sp scale-independent point 對 應 到 160 dpi 螢 幕 的 字 體 大 小,Android 程 式 應 該 使 用 這 個 單 位 來 設 定 字 體 的 大 小 mm millimeter 毫 米 in inch 英 吋 Android SDK 建 議 如 果 是 設 定 介 面 元 件 的 位 置 大 小 和 邊 界 距 離 的 相 關 屬 性 應 該 使 用 dp 長 度 單 位, 如 果 是 設 定 字 體 大 小 的 相 關 屬 性, 則 應 該 使 用 sp 長 度 單 位 4

5 android:inputtype 範 例 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="" android:inputtype="text" <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="" android:inputtype="number" <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="" android:inputtype="date" <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="" android:inputtype="time" 用 來 限 制 輸 入 的 字 元 種 類, 如 果 設 定 成 text 就 能 夠 輸 入 任 何 字 元, 如 果 設 定 成 number 就 只 能 輸 入 數 字, 當 設 定 成 date 時 可 以 輸 入 數 字 和 斜 線 / 字 元, 當 設 定 成 time 時 則 可 以 輸 入 數 字 和 分 號 : 字 元 以 及 pam 等 3 個 英 文 字 母 6

6 控 制 文 字 大 小 顏 色 底 色 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 預 設 的 文 字 大 小 " <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="10sp 文 字 " android:textsize="10sp" <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="20sp 綠 色 文 字 " android:textsize="20sp" android:textcolor="#00ff00" <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="30sp 綠 色 文 字, 黑 色 底 色 " android:textsize="30sp" android:textcolor="#00ff00" android:background="#000000" 使 用 android:textsize android:textcolor android:background 來 改 變 文 字 的 大 小 顏 色, 以 及 元 件 的 底 色 7

7 控 制 元 件 四 周 的 間 隔 距 離 以 及 元 件 內 部 的 文 字 和 邊 的 距 離 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 預 設 的 間 隔 " <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 設 定 padding=20dp" android:padding="20dp" <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 再 設 定 margin=20dp" android:padding="20dp" android:layout_margin="20dp" <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 只 設 定 左 右 margin=30dp" android:layout_marginleft="30dp" android:layout_marginright="30dp" 使 用 margin 相 關 屬 性 來 增 加 元 件 和 外 框 之 間 的 距 離, 以 及 使 用 padding 相 關 屬 性 來 增 加 元 件 內 的 文 字 和 元 件 邊 框 的 距 離 8

8 單 元 13 Spinner 下 拉 式 選 單 元 件 9

9 建 立 Spinner 下 拉 式 選 單 元 件 的 過 程 必 須 完 成 下 列 幾 件 事 : 1. 建 立 選 項 清 單 選 項 清 單 中 包 含 許 多 項 目 名 稱, 這 些 項 目 名 稱 是 用 陣 列 的 方 式 表 示 2. 把 選 項 清 單 設 定 給 一 個 Spinner 介 面 元 件 3. 設 定 Spinner 元 件 的 清 單 顯 示 格 式 4. 設 定 Spinner 元 件 的 OnItemSelectedListener() 事 件 處 理 程 序 當 使 用 者 點 選 某 個 項 目 之 後, 程 式 必 須 取 得 該 項 目 所 對 應 的 資 料 10

10 建 立 Spinner 下 拉 式 選 單 元 件 的 二 種 方 式 一 種 是 直 接 將 選 項 清 單 以 陣 列 的 方 式 宣 告 在 程 式 中 這 種 方 式 比 較 簡 單, 但 是 如 果 選 項 的 名 稱 會 隨 著 不 同 地 區 的 語 言 作 調 整, 就 不 適 合 使 用 這 種 方 式, 而 必 須 採 用 第 二 種 方 法, 就 是 把 選 項 清 單 建 立 在 專 案 的 res/values/strings.xml 檔 案 中, 再 讓 程 式 從 專 案 的 資 源 類 別 R 中 取 得 選 項 清 單 陣 列 11

11 建 立 Spinner 下 拉 式 選 單 元 件 的 第 一 種 方 式 Step 1. 在 專 案 介 面 佈 局 檔 res/layout/main.xml 中 建 立 一 個 Spinner 介 面 元 件 如 以 下 <Spinner android:layout_width="fill_parent" android:layout_height="wrap_content" android:drawselectorontop="true 這 個 Spinner 元 件 的 名 稱 叫 做 spnsex, 當 使 用 者 點 選 它 時 就 會 出 現 一 個 名 稱 叫 做 spnsexprompt 的 提 示 字 串 ( 該 字 串 的 值 定 義 在 res/values/strings.xml 中 ) 12

12 建 立 Spinner 下 拉 式 選 單 元 件 的 第 一 種 方 式 Step 2. 取 得 前 一 個 步 驟 所 建 立 的 Spinner 元 件 Spinner spnsex = (Spinner)findViewById(R.id.spnSex); Step 3. 把 要 顯 示 的 選 項 清 單 宣 告 成 一 個 String 型 態 的 陣 列 String[] ssexlist = new String[] {" 男 ", " 女 "}; 13

13 建 立 Spinner 下 拉 式 選 單 元 件 的 第 一 種 方 式 Step 4. 建 立 一 個 ArrayAdapter 類 別 的 物 件, 將 前 一 個 步 驟 的 清 單 陣 列 輸 入 該 物 件 並 指 定 使 用 Spinner 格 式 ArrayAdapter 是 一 個 泛 型 類 別 (generic class), 這 裡 我 們 指 定 使 用 String 型 態 的 物 件 ArrayAdapter<String> adapsexlist = new ArrayAdapter<String>( this, android.r.layout.simple_spinner_item, ssexlist); adapsexlist.setdropdownviewresource( android.r.layout.simple_spinner_dropdown_item); Step 5. 將 上 一 個 步 驟 建 立 的 ArrayAdapter 物 件 設 定 給 前 面 建 立 的 Spinner 元 件 spnsex.setadapter(adapsexlist); 14

14 建 立 Spinner 下 拉 式 選 單 元 件 的 第 一 種 方 式 Step 6. 建 立 Spinner 的 OnItemSelectedListener 並 完 成 其 中 的 onitemselected() 和 onnothingselected() 二 個 方 法 private Spinner.OnItemSelectedListener spnsexitemsellis = new Spinner.OnItemSelectedListener () { }; public void onitemselected(adapterview parent, View v, int position, long id) { } ssex = parent.getselecteditem().tostring(); public void onnothingselected(adapterview parent) { } Step 7. 把 上 一 個 步 驟 建 立 的 OnItemSelectedListener 物 件 設 定 成 為 Spinner 元 件 的 事 件 處 理 程 序 15

15 建 立 Spinner 下 拉 式 選 單 元 件 的 第 一 種 方 式 16

16 建 立 Spinner 下 拉 式 選 單 元 件 的 第 二 種 方 式 把 和 語 言 相 關 的 字 串 定 義 在 程 式 專 案 的 資 源 檔 中, 將 來 如 果 要 把 程 式 專 案 移 植 到 其 它 語 言, 只 要 修 改 專 案 的 資 源 檔 即 可, 這 樣 可 以 有 效 提 高 程 式 的 維 護 效 率 為 了 達 到 這 個 目 的 必 須 修 改 第 一 個 方 法 中 的 第 3 和 第 4 步 驟 17

17 建 立 Spinner 下 拉 式 選 單 元 件 的 第 二 種 方 式 Step 3. 把 選 項 清 單 陣 列 以 <string-array> 標 籤 的 格 式 宣 告 在 res/values/strings.xml 檔 案 中 如 下 : <?xml version="1.0" encoding="utf-8"?> <resources> <string> </string> <string-array name="spnsexlist > <item> 男 </item> <item> 女 </item> </string-array> </resources> 18

18 建 立 Spinner 下 拉 式 選 單 元 件 的 第 二 種 方 式 Step 4. 使 用 ArrayAdapter 類 別 的 createfromresource() 方 法 從 專 案 的 資 源 類 別 R 中 取 出 項 目 清 單 陣 列, 並 建 立 一 個 ArrayAdapter 物 件, 但 是 該 ArrayAdapter 物 件 的 處 理 型 態 必 須 改 成 CharSequence: ArrayAdapter<CharSequence> adapsexlist = ArrayAdapter.createFromResource( this, R.array.spnSexList, android.r.layout.simple_spinner_item); 這 二 個 方 法 的 執 行 結 果 完 全 一 樣 19

19 單 元 14 使 用 RadioGroup 和 RadioButton 元 件 建 立 單 選 清 單 20

20 RadioGroup 和 RadioButton 範 例 一 組 RadioGroup 是 單 選 清 單 由 多 個 RadioButton 項 目 所 組 成, 這 組 RadioButton 元 件 包 含 在 一 個 RadioGroup 元 件 中, 使 用 者 只 能 從 這 些 RadioButton 項 目 中 點 選 其 中 一 個 21

21 使 用 RadioGroup 和 RadioButton 的 步 驟 Step 1. 在 res/layout 資 料 夾 下 的 介 面 佈 局 檔 中 利 用 RadioGroup 標 籤 和 RadioButton 標 籤 建 立 好 選 項 清 單 <RadioGroup android:layout_width="fill_parent android:layout_height="wrap_content android:orientation="vertical > <RadioButton android:text=" 男 生 <RadioButton android:text=" 女 生 </RadioGroup> 22

22 使 用 RadioGroup 和 RadioButton 的 步 驟 Step 2. RadioGroup 選 項 清 單 的 操 作 都 會 搭 配 一 個 Button 元 件, 當 按 下 該 Button 之 後, 程 式 才 會 讀 取 使 用 者 點 選 的 項 目, 只 要 呼 叫 RadioGroup 元 件 的 getcheckedradiobuttonid() 方 法 就 會 傳 回 目 前 被 使 用 者 選 取 的 項 目 id 名 稱 int icheckedradbtn = radgsex.getcheckedradiobuttonid(); switch (icheckedradbtn) { case R.id.radMale: // 選 擇 這 個 選 項 所 執 行 的 程 式 碼 case R.id.radFemale: // 選 擇 這 個 選 項 所 執 行 的 程 式 碼 } 23

23 婚 姻 建 議 程 式 改 成 使 用 RadioGroup 選 單 年 齡 選 項 中 的 文 字 必 須 隨 著 點 選 的 性 別 而 改 變 24

24 婚 姻 建 議 程 式 改 成 使 用 RadioGroup 選 單 當 使 用 者 點 選 RadioGroup 元 件 中 的 RadioButton 時,Android 系 統 會 發 出 一 個 OnCheckedChange 的 事 件, 所 以 我 們 可 以 在 性 別 RadioGroup 元 件 的 OnCheckedChange 事 件 的 listener 中 執 行 改 變 年 齡 選 項 文 字 的 動 作 25

25 婚 姻 建 議 程 式 改 成 使 用 RadioGroup 選 單 字 串 資 源 檔 : <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name"> 婚 姻 建 議 </string> <string name="promptsex"> 性 別 :</string> <string name="promptage"> 年 齡 :</string> <string name="promptbtndosug"> 婚 姻 建 議 </string> <string name="sugresult"> 結 果 :</string> <string name="sugnothurry"> 還 不 急 </string> <string name="suggetmarried"> 趕 快 結 婚!</string> <string name="sugfindcouple"> 開 始 找 對 象 </string> <string name="male"> 男 生 </string> <string name="female"> 女 生 </string> <string name="maleagerng1"> 小 於 28 歲 </string> <string name="maleagerng2">28~33 歲 </string> <string name="maleagerng3"> 大 於 33 歲 </string> <string name="femaleagerng1"> 小 於 25 歲 </string> <string name="femaleagerng2">25~30 歲 </string> <string name="femaleagerng3"> 大 於 30 歲 </string> </resources> 26

26 婚 姻 建 議 程 式 改 成 使 用 RadioGroup 選 單 介 面 佈 局 檔 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout > <TextView <RadioGroup android:id="@+id/radgsex" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:checkedbutton="@+id/radmale"> <RadioButton android:id="@+id/radmale" android:text="@string/male" <RadioButton android:id="@+id/radfemale" android:text="@string/female" </RadioGroup> <TextView <RadioGroup android:id="@+id/radgage" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical android:checkedbutton="@+id/radagerng1"> <RadioButton android:id="@+id/radbtnagerng1" android:text="@string/maleagerng1" <RadioButton android:id="@+id/radbtnagerng2" android:text="@string/maleagerng2" </RadioGroup> <Button android:id="@+id/btndosug <TextView android:id="@+id/txtresult </LinearLayout> 27

27 婚 姻 建 議 程 式 改 成 使 用 RadioGroup 選 單 程 式 檔 : public class Main extends Activity { public void oncreate(bundle savedinstancestate) { } setupviewcomponent(); private void setupviewcomponent() { // 從 資 源 類 別 R 中 取 得 介 面 元 件 // 設 定 事 件 listener btndosug.setonclicklistener( btndosugonclick); radgsex.setoncheckedchangelistener( radgsexonchechanlis); } private RadioGroup. OnCheckedChangeListener radgsexonchechanlis = new RadioGroup.OnCheckedChangeL istener () { public void oncheckedchanged( RadioGroup group, int checkedid) { } }; } private Button.OnClickListener btndosugonclick = new Button.OnClickListener() { public void onclick(view v) { } }; 28

28 婚 姻 建 議 程 式 改 成 使 用 RadioGroup 選 單 婚 姻 建 議 程 式 從 最 原 始 的 文 字 輸 入 資 料 方 式, 修 改 成 使 用 Spinner 下 拉 式 選 單 的 操 作 介 面, 現 在 進 一 步 改 成 使 用 RadioButton 選 單, 仔 細 體 會 一 下 程 式 的 操 作 流 程 應 該 可 以 瞭 解 使 用 者 介 面 的 改 變 對 程 式 操 作 的 便 利 性 所 帶 來 的 影 響 對 手 機 應 用 程 式 來 說, 點 選 是 最 方 便 的 操 作 方 式, 如 果 畫 面 空 間 允 許, 應 該 盡 可 能 把 選 項 全 部 列 出, 如 此 使 用 者 可 以 一 目 了 然 29

29 單 元 15 CheckBox 多 選 清 單 和 ScrollView 捲 軸 30

30 CheckBox 多 選 清 單 如 果 程 式 需 要 提 供 使 用 者 可 以 複 選 的 選 項 清 單, 就 可 以 使 用 CheckBox 介 面 元 件 <LinearLayout > <CheckBox android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 項 目 1 的 名 稱 " <CheckBox android:id="@+id/chbitem2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 項 目 2 的 名 稱 " <Button </LinearLayout> 31

31 CheckBox 多 選 清 單 我 們 必 須 為 每 一 個 CheckBox 元 件 都 設 定 一 個 id 名 稱, 因 為 在 程 式 中 必 須 檢 查 每 一 個 CheckBox 元 件 是 否 被 使 用 者 選 取, 程 式 可 以 利 用 CheckBox 元 件 的 ischecked() 方 法 來 檢 查 每 一 個 CheckBox 的 選 取 狀 態 另 外 在 所 有 CheckBox 選 項 的 最 後 也 要 加 上 一 個 按 鈕, 當 使 用 者 完 成 選 項 的 勾 選 之 後, 可 以 按 下 該 按 鈕 32

32 CheckBox 多 選 清 單 如 果 程 式 包 含 的 選 項 太 多 以 致 超 出 手 機 螢 幕 的 範 圍, 可 以 在 介 面 佈 局 檔 的 <LinearLayout> 標 籤 前 面 加 上 <ScrollView> 標 籤, 也 就 是 用 <ScrollView> 標 籤 將 <LinearLayout> 標 籤 包 起 來 <ScrollView xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout </LinearLayout> </ScrollView> 33

33 興 趣 選 擇 範 例 程 式 字 串 資 源 檔 : <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name"> 選 擇 興 趣 </string> <string name="music"> 音 樂 </string> <string name="sing"> 唱 歌 </string> <string name="dance"> 跳 舞 </string> <string name="travel"> 旅 行 </string> <string name="reading"> 閱 讀 </string> <string name="writing"> 寫 作 </string> <string name="climbing"> 爬 山 </string> <string name="swim"> 游 泳 </string> <string name="exercise"> 運 動 </string> <string name="fitness"> 健 身 </string> <string name="promptselok"> 確 定 </string> <string name="hoblist"> 您 的 興 趣 :</string> </resources> 34

34 興 趣 選 擇 範 例 程 式 介 面 佈 局 檔 : <?xml version="1.0" encoding="utf-8"?> <ScrollView > <LinearLayout > <CheckBox android:id="@+id/chbmusic" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textsize="30sp" android:text="@string/music" <CheckBox android:id="@+id/chbsing" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textsize="30sp" android:text="@string/sing" <CheckBox android:id="@+id/chbdance" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textsize="30sp" android:text="@string/dance" <Button android:id="@+id/btnselok" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/promptselok" <TextView android:id="@+id/txthoblist" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hoblist" </LinearLayout> </ScrollView> 35

35 興 趣 選 擇 範 例 程 式 程 式 碼 : public class HobbySel extends Activity { private CheckBox chbmusic, chbsing, chbdance, private Button btnselok; private TextView txthoblist; public void oncreate(bundle savedinstancestate) { setupviewcomponent(); } private void setupviewcomponent() { // 從 資 源 類 別 R 中 取 得 介 面 元 件 } private Button.OnClickListener btnselokonclick = new Button.OnClickListener() { public void onclick(view v) { String s = getstring(r.string.hoblist); if (chbmusic.ischecked()) s += chbmusic.gettext().tostring(); if (chbsing.ischecked()) s += chbsing.gettext().tostring(); }; } } txthoblist.settext(s); 36

36 單 元 16 ListView 選 項 清 單 37

37 ListView 範 例 手 機 的 Settings 操 作 介 面 38

38 建 立 ListView 的 方 法 我 們 可 以 採 用 一 種 專 門 用 於 ListView 的 Activity 類 別, 它 的 名 稱 叫 做 ListActivity, 它 提 供 比 較 方 便 的 方 式 來 完 成 清 單 的 建 立 和 控 制 Step 1. 建 立 一 個 新 的 程 式 專 案 Step 2. 開 啟 主 類 別 程 式 檔, 把 它 所 繼 承 的 基 礎 類 別 從 Activity 改 成 ListActivity public class MyListActivity extends ListActivity { 39

39 建 立 ListView 的 方 法 Step 3. 開 啟 res/layout/main.xml 介 面 佈 局 檔 並 加 以 編 輯 成 如 下, 它 的 id 一 定 要 和 範 例 相 同 不 可 以 改 變, 因 為 ListActivity 會 固 定 取 得 這 個 id <?xml version="1.0" encoding="utf-8"?> <LinearLayout > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" <ListView android:layout_width="match_parent android:layout_height="match_parent android:layout_weight="1 android:drawselectorontop="false </LinearLayout> 40

40 建 立 ListView 的 方 法 Step 4. 程 式 碼 中 必 須 再 一 次 用 到 ArrayAdapter 這 個 泛 型 類 別, 我 們 把 要 顯 示 的 選 項 清 單 存 入 一 個 ArrayAdapter 型 態 的 物 件, 然 後 再 呼 叫 setlistadapter() 方 法 將 這 個 物 件 設 定 給 ListView 選 項 清 單 可 以 用 陣 列 的 型 態 宣 告 在 程 式 碼 中, 或 是 定 義 在 res/values/strings.xml 檔 案 中 再 從 程 式 碼 中 載 入 使 用, 以 後 者 為 佳 41

41 建 立 ListView 的 方 法 res/values/strings.xml 檔 案 : <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="weekday"> <item> 星 期 日 </item> <item> 星 期 一 </item> <item> 星 期 二 </item> <item> 星 期 三 </item> <item> 星 期 四 </item> <item> 星 期 五 </item> <item> 星 期 六 </item> </string-array> </resources> 程 式 碼 : ArrayAdapter<CharSequence> adapweekday = ArrayAdapter.createFromResource( this, R.array.weekday, android.r.layout.simple_list_item_1); setlistadapter(adapweekday); 42

42 建 立 ListView 的 方 法 Step 5. 程 式 中 我 們 必 須 建 立 一 個 AdapterView.OnItemClickListener 型 態 的 物 件, 它 是 用 來 執 行 使 用 者 點 選 一 個 項 目 後 的 程 式 碼 : AdapterView.OnItemClickListener listviewonitemclklis = new AdapterView.OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { // 在 TextView 元 件 中 顯 示 使 用 者 點 選 的 項 目 名 稱 mtxtresult.settext(((textview) view).gettext()); } }; 43

43 建 立 ListView 的 方 法 Step 6. 最 後 是 取 得 介 面 佈 局 檔 中 定 義 的 ListView 元 件, 然 後 把 步 驟 5 建 立 的 物 件 利 用 setonitemclicklistener() 方 法 設 定 給 它 ListView listview = getlistview(); listview.setonitemclicklistener(listviewonitemclklis); 44

44 單 元 17 ExpandableListView 二 層 式 可 展 開 選 項 清 單 45

45 ExpandableListView 範 例 ListView 選 項 清 單 只 有 一 層, 也 就 是 說 使 用 者 直 接 看 到 的 就 是 可 以 點 選 的 項 目 如 果 這 些 選 項 可 以 先 分 成 幾 個 群 組, 然 後 群 組 下 面 才 是 真 正 可 以 選 擇 的 項 目, 這 樣 就 變 成 二 層 式 的 選 項 清 單, 這 種 類 型 的 清 單 可 以 使 用 ExpandableListView 介 面 元 件 來 顯 示 46

46 建 立 ExpandableListView 的 方 法 ExpandableListActivity 是 針 對 ExpandableListView 元 件 的 操 作 所 設 計 的 類 別, 它 可 以 簡 化 ExpandableListView 元 件 的 使 用 步 驟 在 使 用 這 種 二 層 式 可 展 開 選 項 清 單 時, 比 較 麻 煩 的 是 選 項 清 單 的 建 立 因 為 第 一 層 是 群 組 名 稱, 它 是 用 一 個 一 維 陣 列 來 儲 存, 第 二 層 則 是 選 項 名 稱, 必 須 用 二 維 陣 列 陣 列 來 儲 存, 第 一 列 是 第 一 個 群 組 的 選 項, 第 二 列 是 第 二 個 群 組 的 選 項, 依 此 類 推 而 且 每 一 個 群 組 名 稱 或 是 選 項 名 稱 還 可 以 使 用 二 個 說 明 字 串, 第 一 個 字 串 是 群 組 或 項 目 名 稱, 第 二 個 字 串 是 說 明 文 字, 這 必 須 利 用 Map 泛 型 類 別 來 完 成 47

47 建 立 ExpandableListView 的 方 法 Step 1. 建 立 一 個 新 的 程 式 專 案 Step 2. 開 啟 主 類 別 程 式 檔, 把 它 所 繼 承 的 基 礎 類 別 從 Activity 改 成 ExpandableListActivity, 如 以 下 粗 體 字 的 部 分 public class MyExpaListAct extends ExpandableListActivity { 48

48 建 立 ExpandableListView 的 方 法 Step 3. 開 啟 res/layout/main.xml 介 面 佈 局 檔 並 加 以 編 輯 成 如 下,ExpandableListView 元 件 的 id 一 定 要 和 範 例 相 同 不 可 以 改 變, 因 為 ExpandableListActivity 物 件 會 固 定 取 得 這 個 id <?xml version="1.0" encoding="utf-8"?> <LinearLayout > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content android:text=" <ExpandableListView android:layout_width="match_parent" android:layout_height="match_parent android:layout_weight="1 android:drawselectorontop="false </LinearLayout> 49

49 建 立 ExpandableListView 的 方 法 Step 4. 程 式 碼 中 必 須 使 用 List 和 Map 這 二 個 泛 型 類 別 List 類 別 是 用 陣 列 的 形 式 來 儲 存 資 料, 在 List 物 件 中 儲 存 Map 型 態 的 物 件, 每 一 個 Map 的 物 件 都 包 含 二 個 字 串, 一 個 是 群 組 或 項 目 的 名 稱, 另 一 個 是 說 明 文 字 我 們 將 建 立 選 項 清 單 的 程 式 碼 寫 在 自 行 定 義 的 setupviewcomponent() 方 法 中 50

50 建 立 ExpandableListView 的 方 法 private void setupviewcomponent() { mtxtresult = (TextView)findViewById(R.id.txtResult); List<Map<String, String>> grouplist = new ArrayList<Map<String, String>>(); List<List<Map<String, String>>> childlist2d = new ArrayList<List<Map<String, String>>>(); for (int i = 0; i < 5; i++) { Map<String, String> group = new HashMap<String, String>(); group.put(item_name, " 選 項 群 組 " + i); group.put(item_subname, " 說 明 " + i); grouplist.add(group); List<Map<String, String>> childlist = new ArrayList<Map<String, String>>(); } for (int j = 0; j < 2; j++) { Map<String, String> child = new HashMap<String, String>(); child.put(item_name, " 選 項 " + i + j); child.put(item_subname, " 說 明 " + i + j); childlist.add(child); } childlist2d.add(childlist); // 設 定 我 們 的 ExpandableListAdapter ( 接 下 頁 ) 51

51 建 立 ExpandableListView 的 方 法 } ( 接 上 頁 ) // 設 定 我 們 的 ExpandableListAdapter mexpalistadap = new SimpleExpandableListAdapter( this, grouplist, android.r.layout.simple_expandable_list_item_2, new String[] {ITEM_NAME, ITEM_SUBNAME}, new int[] {android.r.id.text1, android.r.id.text2}, childlist2d, android.r.layout.simple_expandable_list_item_2, new String[] {ITEM_NAME, ITEM_SUBNAME}, new int[] {android.r.id.text1, android.r.id.text2} ); setlistadapter(mexpalistadap); grouplist 是 群 組 名 稱 的 陣 列, 它 是 一 維 結 構, 而 childlist2d 則 是 選 項 陣 列, 它 是 二 維 結 構, 我 們 使 用 二 層 的 for 迴 圈 來 建 立 選 項 清 單, 每 個 群 組 和 它 所 包 含 的 選 項 都 以 編 號 來 命 名 完 成 群 組 名 稱 陣 列 和 選 項 陣 列 的 建 立 之 後, 再 產 生 一 個 SimpleExpandableListAda pter 物 件 儲 存 這 二 個 陣 列, 最 後 呼 叫 setlistadapter() 方 法 把 這 個 SimpleExpandableListAda pter 物 件 設 定 給 ExpandableListActivity 就 完 成 顯 示 選 項 清 單 的 工 作 52

52 建 立 ExpandableListView 的 方 法 Step 5. 當 使 用 者 點 選 清 單 中 的 項 目 時, 程 式 必 須 取 得 該 項 目 的 位 置 這 個 工 作 可 以 藉 由 ExpandableListActivity 類 別 的 onchildclick() 方 法 來 完 成 public boolean onchildclick(expandablelistview parent, View v, int groupposition, int childposition, long id) { // TODO Auto-generated method stub String s = " 選 擇 : 群 組 " + groupposition + ", 選 項 " + childposition + ", ID" + id; mtxtresult.settext(s); } return super.onchildclick(parent, v, groupposition, childposition, id); 53

53 建 立 ExpandableListView 的 方 法 54

54 建 立 ExpandableListView 的 方 法 如 果 不 需 要 在 群 組 或 項 目 名 稱 的 下 方 顯 示 說 明 文 字, 只 要 把 步 驟 4 程 式 碼 中 的 格 式 simple_expandable_list_ite m_2 換 成 simple_expandable_list_ite m_1 就 可 以, 修 改 後 的 程 式 執 行 畫 面 如 右 55

55 單 元 18 AutoCompleteTextView 自 動 完 成 文 字 輸 入 56

56 AutoCompleteTextView 範 例 自 動 完 成 文 字 輸 入 的 功 能 就 像 是 我 們 在 瀏 覽 網 頁 時, 如 果 到 以 前 曾 經 去 過 的 網 站, 當 要 輸 入 使 用 者 帳 號 時, 只 要 輸 入 帳 號 的 前 幾 個 字, 下 方 就 會 自 動 出 現 候 選 字 供 我 們 選 擇 57

57 建 立 AutoCompleteTextView 的 方 法 Step 1. 在 res/layout 資 料 夾 下 的 介 面 佈 局 檔 中 建 立 一 個 AutoCompleteTextView 元 件 : <AutoCompleteTextView android:layout_width= fill_parent android:layout_height= wrap_content 58

58 建 立 AutoCompleteTextView 的 方 法 Step 2. 在 程 式 碼 中 建 立 一 個 ArrayAdapter 類 別 的 物 件 ArrayAdapter 是 一 個 泛 型 類 別, 在 前 面 我 們 已 經 使 用 過, 這 一 次 要 再 度 利 用 它 來 設 定 自 動 完 成 功 能 的 候 選 字 串 : AutoCompleteTextView autcomptextview = (AutoCompleteTextView)findViewById(R.id.autCompTextView); String[] sarr = new String[] {" 候 選 字 串 1", " 候 選 字 串 2", " 候 選 字 串 3"}; ArrayAdapter<String> adapautocomptext = new ArrayAdapter<String>( this, android.r.layout.simple_dropdown_item_1line, sarr); autcomptextview.setadapter(adapautocomptext); 59

59 動 態 AutoCompleteTextView 前 面 的 說 明 是 用 固 定 的 候 選 字 串 為 例, 也 就 是 說 我 們 是 用 宣 告 在 程 式 碼 中 的 固 定 陣 列 來 提 供 自 動 完 成 的 候 選 字 串 但 是 在 實 際 應 用 時, 候 選 字 串 通 常 會 動 態 改 變 例 如 當 現 在 輸 入 了 一 個 新 的 字 串 之 後, 下 一 次 要 在 同 樣 的 欄 位 輸 入 資 料 時, 這 個 新 的 字 串 就 會 自 動 成 為 候 選 字 串, 接 下 來 就 讓 我 們 來 看 看 如 何 完 成 這 樣 的 功 能 要 動 態 改 變 候 選 字 串 的 關 鍵 在 於 ArrayAdapter 這 個 物 件 除 了 可 以 利 用 固 定 的 陣 列 來 設 定 ArrayAdapter 物 件 的 內 容 之 外, 也 可 以 藉 由 呼 叫 ArrayAdapter 物 件 的 add() 方 法 把 新 的 資 料 加 入 ArrayAdapter 物 件, 另 外 也 可 以 使 用 clear() 方 法 清 除 其 中 的 資 料 60

60 動 態 AutoCompleteTextView 61

61 動 態 AutoCompleteTextView 字 串 資 源 檔 : <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">hello World, AutoCompleteTextInput!</string> <string name="app_name"> 自 動 完 成 文 字 輸 入 </string> <string name="promptautocompletetext"> 請 輸 入 文 字 </string> <string name="promptbtnaddautocompletetext"> 加 入 自 動 完 成 文 字 </string> <string name="promptbtnclrautocompletetext"> 清 除 自 動 完 成 文 字 </string> </resources> 62

62 動 態 AutoCompleteTextView 介 面 佈 局 檔 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text= "@string/promptautocompletetext" <AutoCompleteTextView android:id="@+id/autcomptextview" android:layout_width="fill_parent" android:layout_height="wrap_content" <Button android:id="@+id/btnaddautocompletetext" android:layout_width="fill_parent" android:layout_height="wrap_content android:text= "@string/promptbtnaddautocompletetext" <Button android:id="@+id/btnclrautocompletetext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text= "@string/promptbtnclrautocompletetext" </LinearLayout> 63

63 動 態 AutoCompleteTextView 程 式 碼 : public class AutoCompleteTextInput extends Activity { private Button btnaddautocompletetext, btnclrautocompletetext; private AutoCompleteTextView autcomptextview; private ArrayAdapter<String> adapautocomptext; /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } setupviewcomponent(); private void setupviewcomponent() { // 從 資 源 類 別 R 中 取 得 介 面 元 件 btnaddautocompletetext = (Button)findViewById( R.id.btnAddAutoCompleteText); btnclrautocompletetext = (Button)findViewById( R.id.btnClrAutoCompleteText); autcomptextview = (AutoCompleteTextView)findViewById( R.id.autCompTextView); adapautocomptext = new ArrayAdapter<String>( this, android.r.layout.simple_dropdown_item_1line); autcomptextview.setadapter( adapautocomptext); // 設 定 button 元 件 的 事 件 listener ( 接 下 一 頁 ) 64

64 動 態 AutoCompleteTextView ( 接 上 一 頁 ) // 設 定 button 元 件 的 事 件 listener btnaddautocompletetext.setonclicklistener( btnaddautocompletetextonclicklis); btnclrautocompletetext.setonclicklistener( btnclrautocompletetextonclicklis); } private Button.OnClickListener btnclrautocompletetextonclicklis = new Button.OnClickListener() { public void onclick(view v) { adapautocomptext.clear(); } }; } private Button.OnClickListener btnaddautocompletetextonclicklis = new Button.OnClickListener() { public void onclick(view v) { String s = autcomptextview.gettext().tostring(); adapautocomptext.add(s); autcomptextview.settext(""); } }; 65