Part 1 學習使用基本介面元件和編排模式 單元11 學習更多介面元件的屬性 單元12 Spinner下拉式選單元件

Presentation on theme: "Part 1 學習使用基本介面元件和編排模式 單元11 學習更多介面元件的屬性 單元12 Spinner下拉式選單元件"— Presentation transcript:

1

2 Part 1 學習使用基本介面元件和編排模式 單元11 學習更多介面元件的屬性 單元12 Spinner下拉式選單元件
單元13使用RadioGroup和RadioButton元件建立單選清單 單元14 CheckBox多選清單和ScrollView捲軸 單元15 LinearLayout介面編排模式 單元16 TableLayout介面編排模式 單元17 RelativeLayout介面編排模式 單元18 FrameLayout介面編排模式和Tab標籤頁

3 單元11 學習更多介面元件的屬性

4 常用的介面元件屬性 屬性名稱 設定值 使用說明 android:id 元件的名稱 設定該介面元件的名稱
android:layout_width android:layout_height fill_parent, match_parent, wrap_content 設定元件的寬和高，fill_parent是舊的屬性值 android:text 元件中的文字 顯示在元件中的文字 android:inputType Text, number, date, time, … 輸入的資料類型 android:background 顏色(6個16進位數字，例如FF0000) 儲存在drawable資料夾中的圖形 設定元件的底色或底圖，顏色以#開頭 android:textSize 數值和sp長度單位 設定文字大小 android:textColor 顏色 設定文字顏色，顏色以#開頭 android:password true, false 用暗碼顯示防止被他人窺視，新版的程式改成用inputType屬性控制 android:autoLink web, , phone, map, all 自動偵測字串中的超連結資料 android:hint 元件中的提示文字 當EditText元件中沒有輸入任何資料時所顯示的字串 android:layout_margin android:layout_marginXXX 數值和dp長度單位 設定元件四周的間隔距離 android:padding android:paddingXXX 設定元件內部的文字和邊的距離 android:gravity center_hotizontal, center_vertical, center 元件中的物件的對齊方式 android:layout_gravity 元件相對於外框的對齊方式

5 介面元件屬性使用的長度單位 Android SDK建議如果是設定介面元件的位置、大小、和邊界距離的相關屬性應該使用dp長度單位，如果是設定字體大小的相關屬性，則應該使用sp長度單位。

6 match_parent和wrap_content的差別
match_parent和fill_parent的效果是一樣的，二者都是填滿元件所在的外框，wrap_content則是依照元件中的文字長度或高度來決定元件的寬或高。 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="EditText1" /> android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="EditText2"

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

8 控制文字大小、顏色和底色 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="預設的文字大小" /> android:text="10sp文字" android:textSize="10sp" android:text="20sp綠色文字" android:textSize="20sp" android:textColor="#00FF00" android:text="30sp綠色文字，黑色底色" android:textSize="30sp" android:background="#000000" 使用android:textSize、android:textColor、android:background來改變文字的大小、顏色，以及元件的底色

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

10 單元12 Spinner下拉式選單元件

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

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

13 建立Spinner下拉式選單元件的第一種方式
Step 1. 在專案介面佈局檔res/layout/main.xml中建立一個Spinner介面元件如以下 <Spinner android:layout_width="match_parent" android:layout_height="wrap_content" android:drawSelectorOnTop="true“ android:spinnerMode="dialog" 這個Spinner元件的名稱叫做spnSex，當使用者點選它時就會出現一個名稱叫做spnSexPrompt的提示字串（該字串的值定義在res/values/strings.xml中）。android:spinnerMode屬性則是設定選項清單的顯示方式，dialog的方式是以對話盒的型態出現，另一種dropdown的方式則是將選項清單列於Spinner元件的下方。

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

15 建立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);

16 建立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元件的事件處理程序。

17 Eclipse操作技巧 當要在程式碼中建立一個物件，例如以上範例中的spnSexItemSelLis物件時，先輸入宣告物件的語法，也就是以上範例中的粗體字部分，把裡面的方法先空下來，這時候在這一段程式碼會出現紅色波浪底線標示語法錯誤，將滑鼠游標移到紅色波浪底線上，就會彈出一個說明視窗建議修正方法，點選其中建議的修正項目後，就會自動修正程式碼的錯誤。利用這種方式可以讓程式碼編輯器自動幫我們加入這二個方法，然後再自行輸入裡頭的程式碼。 17

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

19 用xml檔案定義自己的選單格式 String[] sSexList = new String[] {"男", "女"}; ArrayAdapter<String> adapSexList = new ArrayAdapter<String>( this, android.R.layout.simple_spinner_item, sSexList); adapSexList.setDropDownViewResource(R.layout.spinner_layout); 以上的程式碼中用底線標示的部分就是使用我們自己專案中的選單格式定義檔res/layout/R.layout.spinner_layout.xml，該檔的內容如下，其中只有一個TextView元件，也就是說每一個選項都會用該TextView元件的格式來顯示。 <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android=" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="20sp" /> 19

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

21 建立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>

22 建立Spinner下拉式選單元件的第二種方式
Step 4.使用ArrayAdapter類別的createFromResource()方法從專案的資源類別R中取出項目清單陣列，並建立一個ArrayAdapter物件，但是該ArrayAdapter物件的處理型態必須改成CharSequence： ArrayAdapter<CharSequence> adapSexList = ArrayAdapter.createFromResource( this, R.array.spnSexList, android.R.layout.simple_spinner_item); 我們同樣可以使用自行定義的xml檔案來建立自己的選單格式。 這二個方法的執行結果完全一樣。

23 單元13 使用RadioGroup和RadioButton元件建立單選清單

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

25 使用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>

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

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

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

29 「婚姻建議」程式改成使用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>

30 「婚姻建議」程式改成使用RadioGroup選單
介面佈局檔： <?xml version="1.0" encoding="utf-8"?> <LinearLayout … … > <TextView … /> <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" <RadioButton /> <RadioButton </RadioGroup> <TextView … /> <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical” <RadioButton /> … </RadioGroup> <Button /> <TextView </LinearLayout>

31 「婚姻建議」程式改成使用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.OnCheckedChangeListener () { public void onCheckedChanged( RadioGroup group, int checkedId) { … } }; private Button.OnClickListener btnDoSugOnClick = new Button.OnClickListener() { public void onClick(View v) {

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

33 單元14 CheckBox多選清單和ScrollView捲軸

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

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

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

37 「興趣選擇」範例程式 字串資源檔： <?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>

38 「興趣選擇」範例程式 介面佈局檔： <CheckBox android:id="@+id/chbDance"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="30sp" /> … <Button <TextView </LinearLayout> </ScrollView> 介面佈局檔： <?xml version="1.0" encoding="utf-8"?> <ScrollView … > <LinearLayout … > <CheckBox android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="30sp" /> <CheckBox

39 「興趣選擇」範例程式 程式碼： private Button.OnClickListener btnSelOKOnClick = new
public void onClick(View v) { String s = getString(R.string.hobList); if (chbMusic.isChecked()) s += chbMusic.getText().toString(); if (chbSing.isChecked()) chbSing.getText().toString(); … txtHobList.setText(s); } }; 程式碼： 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中取得介面元件