Android 基礎

Android SDK 1. ANDROID專案開發環境

ADT (Android Development Tools) ADT is a plugin for the Eclipse IDE for building Android applications. ADT extends the capabilities of Eclipse to let you quickly set up new Android projects, create an application UI, add packages based on the Android Framework API, debug your applications using the Android SDK tools, and even export signed (or unsigned) .apk files in order to distribute your applications

Install ADT and Config Eclipse

Android SDK 2. GUI 元件

2.1 Android 元件 文字文件 表單元件 對話視窗元件

2.2文字文件 表 2.3 XML屬性及對應Method 2.2.1 TextView TextView 是個基本常用的元件，不僅可以使用xml檔來操作，也可在程式碼中使用一些Method來控制TextView，下表2.3列出較為常用的XML屬性以及相對應的Method: 表 2.3 XML屬性及對應Method

以下範例使用<TextView>做一個網頁連結的書籤，如圖2. 2 　以下範例使用<TextView>做一個網頁連結的書籤，如圖2.2.1，在裡面有兩個TextView，內容分別為Google(“www.google.com”)和Yahoo!(“www.yahoo.com.tw”)兩筆資料，並且將TextView設定有autoLink的屬性，加入此屬性後，若在文字當中有連結(ex. 網址、手機號碼等) ，則會自動判斷連結的部份並對應到適合的應用程式上，如範例，若點擊網址部分，則會自動開啟瀏覽器至點擊的網址；若為手機號碼，則會跳至撥號的軟體上。 圖2.2.1

autoLink 的屬性如表2.4 表2.4autoLink屬性

以下使用xml和程式碼來達到上述範例，首先先介紹純粹用xml來達成 4_5_TextViewEX/res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView 　android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:autoLink="web" android:text="Google - www.google.com" /> android:text="Yahoo - www.yahoo.com.tw" /> </LinearLayout>

在 TextView 中，若沒有將 autoLink 設為 web，則文字中的網址就沒有連結功能，若今天要自動設置電話號碼連結，只需將 autoLink設為 all 或 phone即可。另外，也可使用程式的方式來產生上述的TextView，如下: 4_6_TextViewEX2/res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/my_layout" > </LinearLayout>

package ncu.bnlab.TextViewExample; import android.app.Activity; 4_6__TextViewEX2/src/ncu/bnlab/TextViewExample/TextViewExample.java package ncu.bnlab.TextViewExample; import android.app.Activity; import android.os.Bundle; import android.text.util.Linkify; import android.view.Gravity; import android.widget.LinearLayout; import android.widget.TextView; public class TextViewExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); LinearLayout layout = (LinearLayout)findViewById(R.id.my_layout); TextView tv1 = new TextView(this); tv1.setGravity(Gravity.CENTER); tv1.setAutoLinkMask(Linkify.WEB_URLS); tv1.setText("Google - www.google.com"); // 在layout中加入TextView tv1 Layout.addView(tv1); TextView tv2 = new TextView(this); tv2.setGravity(Gravity.CENTER); tv2.setAutoLinkMask(Linkify.WEB_URLS); tv2.setText("Yahoo - www.yahoo.com.tw"); // 在layout中加入TextView tv2 layout.addView(tv2); }}

首先，要使用程式碼新增元件的話，必須使用到 findViewById，故在xml 裡面必須先給 LinearLayout 一個id – my_layout，而在程式碼部分宣告了一個layout 物件，而此物件使用了 findViewById 去找剛剛在 xml檔案所設定的 id。 接下來產生兩個TextView 物件 tv1 以及 tv2，使用set 相關的Method 設定完物件屬性後，接著使用 layout.addView 將tv1 和tv2加入layout當中。

2.2.2 AutoCompleteTextView AutoCompleteTextView 可達到簡易自動完成 Text 的功能，如圖2.2.2所示，在此範例中，宣告了一個TAIWAN 的字串陣列，而內容則是各縣市的英文，如 Taipei、Taichung 等名稱。當我們在 AutoCompleteTextView 當中輸入Ta時，會自動搜索到在TAIWAN這個陣列中符合Ta開頭的字串。 圖2.2.2 AutoCompleteTextView範例

<?xml version="1.0" encoding="utf-8"?> 範例程式碼如下: 4_7_AutoCompleteTextViewEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <AutoCompleteTextView android:text="" android:id="@+id/city" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>

4_7_AutoCompleteTextViewEX\src\ncu\bnlab\AutoCompleteTextViewExample\TextView.java package ncu.bnlab.AutoCompleteTextViewExample; import android.app.Activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; public class AutoCompleteTextViewExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, TAIWAN); AutoCompleteTextView TaiwanCity = (AutoCompleteTextView)findViewById(R.id.city); TaiwanCity.setAdapter(adapter); } // 設定Adapter內容 private static final String[] TAIWAN = new String[] { "Keelung", "Taipei", "Taoyuan", "Hsinchu", "Miaoli", "Taichung", "Changhua", "Nantou", "Yunlin", "Chiayi", "Tainan", "Kaohsiung", "Pingtung ", "Yilan", "Hualien", "Taitung" };

在一開始先產生一個 ArrayAdapter ，在其中可看到 simple_dropdown_item_line，此為內建的列表樣式，而後面的 TAIWAN 則是下面宣告的陣列。 接著宣告一個 AutoCompleteTextView ，使用findViewById找在xml檔中 id 為 city 的物件並將剛剛的adapter 設給TaiwanCity。

2.3 表單元件 應用程式執行的視窗在開發環境通常稱為表單(Form) ，而一般視窗中呈現的各種元件，例如：按鈕、文字區塊、開關等，則稱作表單元件。本節將介紹 Android 系統常用到的表單元件，包含了幾種不同的Button、時間相關的元件以及 Bar 的使用。

2.3.1 Button 在xml裡面新增一個 Button 可以用<Button> 來新增，而 button 常用的屬性有 txet 以及 layout 屬性。 通常在 layout 方面會有兩種屬性: wrap_content 以及 fill_parent。 當 layout_width 為 wrap_content 時，這個 button 會依據 button 上的 text 長度為基準；若 layout_width 為 fill_parent 時，則會以 parent 最寬的長度為主，如圖2.3.1 。

範例程式碼如下: 4_8_ButtonEX\res\layout\main.xml 圖2.3.1 button範例 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:text="button" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content"> </Button> <Button android:text="This is a button" android:layout_height="wrap_content"> </LinearLayout> 圖2.3.1 button範例

2.3.2 ImageButton ImageButton 如其名可以將圖片當作 button 的背景，而在<ImageButton>使用 layout:src=“圖片位置” 這個屬性來達到此效果，如範例 2.3.2。 圖2.3.2 ImageButton範例

範例程式碼如下: 4_9_ImageButtonEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageButton android:id="@+id/ImageButton01" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:layout_gravity="center_horizontal“ android:src="@drawable/heart" /> <ImageButton android:id="@+id/ImageButton02" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:src="@drawable/lightning" /> <ImageButton android:id="@+id/ImageButton03" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:layout_gravity="center_horizontal" android:src="@drawable/star" /> </LinearLayout> 由程式碼可看出，範例指定<ImageButton>的 android:src 屬性分別指定在 drawable 這個資源檔中的三張圖片，heart、lightning 以及 star。

2.3.3 RadioButton RadioButton 為個別的一個按鈕，而若要做成有多選一這種功能時，則需將這些 RadioButton 放置一個<RadioGroup>當中，如範例2.3.3 圖2.3.3 RadioButton範例

範例程式碼如下: 4_10_RadioButtonEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="您對此次教學感到?" /> <RadioGroup android:orientation="horizontal" android:layout_height="wrap_content" > <RadioButton android:text="滿意" 首先，將三個 RadioButton 元件放置在一個 Radio Group當中，在這個Radio Group 中設置 android:orientation 為 horizontal，則三個 RadioButton 會以水平方式來擺放，可看到第一個 RadioButton 中有一個屬性 android:checked，若此屬性設為 true 代表在這個 Group 當中此 RadioButton是預設的選項。

android:checked="true" android:layout_width="wrap_content" 範例程式碼如下: 4_10_RadioButtonEX\res\layout\main.xml android:checked="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioButton android:text="普通" android:text="不滿意" </RadioGroup> </LinearLayout>

2.3.4 ToggleButton ToggleButton 是一種類似開關的 Button，在預設的情況下為 off ，當點擊後會變成 On 。而在開關上的文字也可以自訂，在 ToggleButton 中的 android:textOn 和android:textOff 分別為當開關為On 和 Off 時所顯示的文字，如範例2.3.4。而在此範例中，使用到一個簡單的事件處理，當開關變動時，在開關下方的TextView 會跟著改變。

範例程式碼如下: 4_11_ToggleButtonEX\res\layout\main.xml 圖2.3.4 ToggleButton範例 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ToggleButton android:text="@+id/ToggleButton01" android:id="@+id/ToggleButton01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Now is Off" android:id="@+id/TextView01" 圖2.3.4 ToggleButton範例

範例程式碼如下: 4_11_ToggleButtonEX\res\layout\main.xml android:layout_height="wrap_content" /> <ToggleButton android:text="@+id/ToggleButton02" android:id="@+id/ToggleButton02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30sp“ android:textOn="開" android:textOff="關"/> <TextView android:text="Now is Off“ android:id="@+id/TextView02" </LinearLayout> 首先在 main.xml 中使用到兩個<ToggleButton>和兩個<TextView>，TextView 用來顯示 ToggleButton 的狀態。在 ToggleButtonExample.java 當中使用到兩個事件處理，首先使用findViewById 分別找到各元件，在 toggleButton01 以及 toggleButton02 設置 onClick 事件處理並利用 isChecked() 來判斷 toggleButton 的開關狀態，再依照狀態改變 TextView01 和TextView02 的文字內容。

4_11_ToggleButtonEX\src\ncu\bnlab\ToggleButtonExample\ToggleButtonExample.java package ncu.bnlab.ToggleButtonExample; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.TextView; import android.widget.ToggleButton; public class ToggleButtonExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final TextView textView01 = (TextView)findViewById(R.id.TextView01); final ToggleButton toggleButton01 = (ToggleButton) findViewById(R.id.ToggleButton01); toggleButton01.setOnClickListener(new OnClickListener() { public void onClick(View v) { // 用isChecked()來判斷ToggleButton狀態 // 若是被選取狀態，將textView01文字設定為"Now is ON" if (toggleButton01.isChecked()) {

4_11_ToggleButtonEX\src\ncu\bnlab\ToggleButtonExample\ToggleButtonExample.java textView01.setText("Now is ON"); } // 若是未選取狀態，將textView01文字設定為"Now is OFF" else { textView01.setText("Now is OFF"); } } }); final TextView textView02 = (TextView)findViewById(R.id.TextView02); final ToggleButton toggleButton02 = (ToggleButton) findViewById(R.id.ToggleButton02); toggleButton02.setOnClickListener(new OnClickListener() { public void onClick(View v) { // 用isChecked()來判斷ToggleButton狀態 // 若是被選取狀態，將textView02文字設定為"Now is ON" if (toggleButton02.isChecked()) { textView02.setText("Now is ON"); // 若是未選取狀態，將textView02文字設定為"Now is OFF" else { textView02.setText("Now is OFF"); } } }); }}

2.3.5 CheckBox CheckBox 只有兩種型態，checked 以及 uncheck ，可用在需要勾選多項選擇的狀況，像是做問卷調查，如範例 2.3.5。 圖2.3.5 CheckBox範例

範例程式碼如下: 4_12_checkBoxEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="你喜歡的顏色? (可複選)" android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content"> <CheckBox android:text="紅色" android:id="@+id/CheckBox01" android:layout_height="wrap_content" /> android:text="黃色" android:id="@+id/CheckBox02" android:text="綠色"

範例程式碼如下: 4_12_checkBoxEX\res\layout\main.xml android:layout_height="wrap_content" /> </LinearLayout> <TextView android:text="平常的休閒活動? (可複選)" android:id="@+id/TextView02" android:layout_width="wrap_content" <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <CheckBox android:text="打球" android:id="@+id/CheckBox04" android:layout_height="wrap_content" /> android:text="游泳" android:id="@+id/CheckBox05" android:text="上網" android:id="@+id/CheckBox06"

2.3.6 DatePicker DatePicker 可讓使用者選擇年、月、日，如範例2.3.6。在範例中，除了<DatePicker>元件外，還使用了一個<Button>和一個<TextView>，當使用者按下 button 後，TextView 會顯示 DatePicker 所選的日期。 圖2.3.6 DatePicker 範例

範例程式碼如下: 4_13_DatePickerEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <DatePicker android:id="@+id/DatePicker01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="15sp"/> <Button android:text="確定" android:id="@+id/Button01" android:layout_marginTop="25sp"/> <TextView android:text="" android:id="@+id/TextView01" android:layout_marginTop="35sp"/> </LinearLayout>

範例程式碼如下: 4_13_DatePickerEX\src\ncu\bnlab\DatePickerExample\DatePickerExample.java 首先，對 button 設置一個 OnClickListener ，當 button 發生 onClick 事件時會到 datePicker 元件中抓年、月、日並將值讓 textView 來顯示。在 datePicker 中的 month 是由 0~11 ，故在此才會在 getMonth() 後+1。 package ncu.bnlab.DatePickerExample; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.DatePicker; import android.widget.TextView; public class DatePickerExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final DatePicker datePicker = (DatePicker) findViewById(R.id.DatePicker01); final Button myButton = (Button) findViewById(R.id.Button01); final TextView textView = (TextView) findViewById(R.id.TextView01); myButton.setOnClickListener(new OnClickListener(){ public void onClick(View v) { // 年份 int year = datePicker.getYear(); // 月份，由於月份為0至11，故取值後要加1 int month = datePicker.getMonth() + 1; // 日期 int day = datePicker.getDayOfMonth(); textView.setText( year + "-" + month + "-" + day ); } }); }}

2.3.7 TimePicker TimePicker 可讓使用者選擇時間，在預設的功能下還可以選擇為AM或是PM，範例2.3.7利用一個TextView來顯示被顯示的時間，若時間為5點17分，當選擇為AM時會顯示為5:17；當選擇成PM時則會變成17:17。 圖2.3.7 TimePicker 範例

範例程式碼如下: 4_14_TimePickerEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TimePicker android:id="@+id/TimePicker01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="15sp"/> <Button android:text="確定" android:id="@+id/Button01" android:layout_marginTop="25sp"/> <TextView android:text="" android:id="@+id/TextView01" android:layout_marginTop="35sp" android:textSize="20sp"/> </LinearLayout>

範例程式碼如下: 4_14_TimePickerEX\src\ncu\bnlab\TimePickerExample\TimePickerExample.java package ncu.bnlab.TimePickerExample; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.TextView; import android.widget.TimePicker; public class TimePickerExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final TimePicker timePicker = (TimePicker) findViewById(R.id.TimePicker01); final Button myButton = (Button) findViewById(R.id.Button01); final TextView textView = (TextView) findViewById(R.id.TextView01); myButton.setOnClickListener(new OnClickListener(){ public void onClick(View v) { // 當前時間（小時） int hour = timePicker.getCurrentHour(); // 當前時間（分鐘） int minute = timePicker.getCurrentMinute(); textView.setText( hour + " : " + minute ); } }); }} 在　timePicker.getCurrentHour() 所得到的小時為 0~23 ，在此範例中也是對 button 設置 OnClickListener，當有 click 事件發生時，會將 timerPicker 的時間顯示在TextView 上。

2.3.8 EditText EditText可讓使用者輸入文字，如範例2.3.8。當layout_width為wrap_content時， EditText的寬度會隨著輸入的字而變寬；當為fill_parent時則會固定為parent毒寬度。

2.3.9 ProgressBar ProgressBar 可用於顯示程式執行進度，範例2.3.9參考Android Developer 修改並展示SDK本身提供的四種ProgressBar型態。 圖2.3.9 ProgressBar 範例

範例程式碼如下: 4_15_ProgressBarEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ProgressBar android:id="@+id/ProgressBar01" android:layout_height="wrap_content" android:layout_width="200px" android:layout_gravity="center_horizontal" android:layout_marginTop="20sp" style="?android:attr/progressBarStyleHorizontal" /> android:id="@+id/ProgressBar02" android:layout_width="wrap_content" android:layout_marginTop="20sp" style="?android:attr/progressBarStyleSmall" /> android:id="@+id/ProgressBar03" android:layout_marginTop="20sp" style="?android:attr/progressBarStyle" /> android:id="@+id/ProgressBar04" android:layout_marginTop="20sp" style="?android:attr/progressBarStyleLarge" /> </LinearLayout>

上述四種 stay 分別對應範例的四種 ProgressBar，而預設的 ProgressBar 為第三個圓形的 ProgressBar 。 在範例中，顯示了四種 ProgressBar ，而預設的 ProgressBar 為第三個圓形的 ProgressBar ，要更改不同種 ProgressBar 可在XML 當中來修改: 1. style="?android:attr/progressBarStyleHorizontal“ 2. style="?android:attr/progressBarStyleSmall" 3. style="?android:attr/progressBarStyle" 2. style="?android:attr/progressBarStyleLarge" 上述四種 stay 分別對應範例的四種 ProgressBar，而預設的 ProgressBar 為第三個圓形的 ProgressBar 。 在本範例當中，再第一種長條狀的 ProgressBar 展示了類似讀取進度的功能，而要達到此功能則需要 Thread 以及 Handler，而 ，ProgressBar 的進度則使用ProgressStatus 來表示。首先，程式產生一個 Thread，而每 100 毫秒會將進度增加 5，接著利用Handler 來將ProgressBar 的進度做更新到 100 為止。

2.3.10 RatingBar RatingBar 可用來製作評分系統，如範例 2.3.10 所示，在預設的情況下，使用者可碰觸 RatingBar 的星星來達到評分，若碰觸星星的右半部則會加分，反之亦然，碰觸左半部則會扣分。而預設情況下，最多為五顆星，星星間隔為 0.5 顆星。 下表列出RatingBar 常用的屬性以及 Method: 圖2.3.10 RatingBar 範例

表 2.5 RatingBar 常用屬性及 Method XML 屬性 Method 敘述 android:islndicator setIslndicator(boolean) 設定RatingBar是否為參考指標(使用者無法更改) android:Stars setNumStars(int) 設定星星數量 android:rating setRating(float) 預設的評分數 android:stepSize serStepSize(float) 設定每次平分的分數間隔 getNumStars() 得知現在星星總數 getRating() 得知評分分數 getStepSize() 得知評分的分數間隔

範例程式碼如下: 4_16_RatingBarEX\res\layout\main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RatingBar android:id="@+id/RatingBar01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="3" /> <TextView android:text="" android:id="@+id/TextView01" android:textSize="50sp" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <RatingBar android:id="@+id/RatingBar02" android:id="@+id/TextView02" </LinearLayout>

範例程式碼如下: 4_16_RatingBarEX\src\ncu\bnlab\RatingBarExample\RatingBarExample.java 在這個範例中，使用了兩個<RatingBar>和兩個<TextView>元件，第一個 RatingBar 設為 3 星等，第二個設定為五星等，當 RatingBar 的評分改變時，在對應的 TextView 中顯示現在被評分的分數。在此對 ratingBar01 以及 ratingBar02 設置了 OnRatingBarChangeListener ，當 rating 改變時會觸發事件，而當事件被觸發後會將現在的評分顯示在相對應的 textView01 和 textView02 上。 package ncu.bnlab.RatingBarExample; import android.app.Activity; import android.os.Bundle; import android.widget.RatingBar; import android.widget.TextView; import android.widget.RatingBar.OnRatingBarChangeListener; public class RatingBarExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final TextView textView01 = (TextView) findViewById(R.id.TextView01); final TextView textView02 = (TextView) findViewById(R.id.TextView02); final RatingBar ratingBar01 = (RatingBar) findViewById(R.id.RatingBar01); // 設定RatingBar狀態更改的Listener ratingBar01.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){ public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) { // 當ratingBar01狀態更改時，將顯示的分數顯示在textView上 textView01.setText(Float.toString(ratingBar01.getRating())); }}); final RatingBar ratingBar02 = (RatingBar) findViewById(R.id.RatingBar02); ratingBar02.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){ public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) { // 當ratingBar02狀態更改時，將顯示的分數顯示在textView上 textView02.setText(Float.toString(ratingBar02.getRating())); }}); }}

2.4 對話視窗元件 對話視窗元件提供了一個基本框架可與使用者作互動，如在程式中常會跟使用者確認資料是否刪除、是否離開程式等情形，利用對話視窗元件則可達到此需求。

2.4.1 AlertDialog AlertDialog 是一種警告對話視窗，像是離開程式或是刪除檔案時會跳出的對話視窗元件，在此以 Android Developer 當中的範例稍作簡化修改來做說明，如圖 2.4.1: 圖2.4.1 AlertDialog 範例

範例程式碼如下: 4_17_AlertDialogEX\src\ncu\bnlab\AlertDialogExample\AlertDialogExample.java package ncu.bnlab.AlertDialogExample; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.os.Bundle;import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class AlertDialogExample extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final Button button01 = (Button) findViewById(R.id.Button01); final Button button02 = (Button) findViewById(R.id.Button02); button01.setOnClickListener(new OnClickListener(){ public void onClick(View arg0) { // TODO Auto-generated method stub About(); } }); button02.setOnClickListener(new OnClickListener(){

範例程式碼如下: 4_17_AlertDialogEX\src\ncu\bnlab\AlertDialogExample\AlertDialogExample.java // TODO Auto-generated method stub Leave(); } }); // 顯示“關於”的對話視窗 private void About() { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("關於") .setMessage("這是 Alert Dialog") .show(); // 顯示確認是否離開程式的視窗，若選擇是則結束程式，若否則關閉對話視窗 private void Leave() { builder.setMessage("確定要離開本程式嗎?") .setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // 結束AlertDialogExample這個Activity AlertDialogExample.this.finish(); } }) .setNegativeButton(“No”, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // 將AlertDialog關閉 dialog.cancel(); AlertDialog about_dialog = builder.create(); about_dialog.show();

在這個範例中，使用到兩個 Button，各對兩個 Button 設置事件，一個為 About()，一個為Leave() 。而這兩個 Method 都會定義其 AlertDialog 的屬性，首先需要產生一個　AlertDialog.Builder 物件，接著再對 builder 設置屬性，如範例中的 builder.set{*****，較常用的 builder 屬性如表 2.6。當設定好這些參數後，使用 show()來顯示這個 Dialog，在 About()當中，在設定 builder 後直接加入”.show()”讓 Dialog 顯示，也可以如Leave()當中當設定完 builder 後，將 builder create 後，再用 show() 來顯示。 表2.6 AlertDialog.Builder 屬性

2.4.2 ProgressDialog ProgressDialog可用於在等待期他程式或是在等待上傳時使用。如圖2.4.2和圖2.4.3所示: 圖2.4.2 圓型ProgressDialog 範例

範例程式碼如下: 4_18_ProgressDialogEX\src\ncu\bnlab\ProgressDialogExample\ProgressDialogExample.java package ncu.bnlab.ProgressDialogExample; import android.app.Activity; import android.app.ProgressDialog; import android.os.Bundle; import android.os.Handler; public class ProgressDialogExample extends Activity { int nowProgressStatus = 0; Handler myHandler = new Handler(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final ProgressDialog dialog01 = ProgressDialog.show(this,"", "程式正在開啟中...", false); // 建立一個Thread，每次迴圈sleep 0.5秒並將nowProgressStatus的值加五 // 直到nowProgressStatus為100時停止迴圈，跳出迴圈後將ProgressDialog // 關閉 Thread thread01 = new Thread(new Runnable() {

範例程式碼如下: 4_18_ProgressDialogEX\src\ncu\bnlab\ProgressDialogExample\ProgressDialogExample.java public void run() { while (nowProgressStatus < 100) { try { Thread.sleep(500); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } nowProgressStatus+=5; } // While myHandler.post(new Runnable() { // 關閉ProgressDialog，也可使用dismiss()來關閉 dialog01.cancel(); } }); thread01.start();

在這個範例當中，使用了預設的 ProgressDialog，再程式一進行時，宣告了一個 ProgressDialog 並將顯示出來，接著程式會等待執行緒中的nowProgressStatus 加到 100 後，利用 handler 將這個 ProgressDialog 給 cancel 掉。 例如當要執行一個程式或是做運算時，在運算一開始時可以使用 ProgressDialog 來表示程式或是運算正在進行，當程式結束或是運算結束後再將此 ProgressDialog 結束 Tip:關閉ProgressDialog有兩種方式，一種是使用dismiss()來關閉，另一種是使用cancel()關閉。這兩者差別是當使用cancel()關閉時，若有註冊DialogInterface.OnCancelListener 的話，則可捕捉到此事件。 圖2.4.３ 長條型ProgressDialog 範例

範例程式碼如下: 4_19_ProgressDialogEX2\src\ncu\bnlab\ProgressDialogExample02\ProgressDialogExample02.java package ncu.bnlab.ProgressDialogExample02; import android.app.Activity; import android.app.ProgressDialog; import android.os.Bundle; import android.os.Handler; public class ProgressDialogExample02 extends Activity { int nowProgressStatus = 0; Handler myHandler = new Handler(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final ProgressDialog dialog02 = new ProgressDialog(this); // 設定ProgressDialog的樣式為水平樣式 dialog02.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL); // 設定ProgressDialog的Title dialog02.setMessage("讀取中..."); dialog02.show(); // 建立一個Thread，每次迴圈sleep 0.5秒並將nowProgressStatus的值加五 // 直到nowProgressStatus為100時停止迴圈，跳出迴圈後將ProgressDialog // 關閉 此範例與前述圖 2.4.2 範例相似，主要差別在於 ProgressDialog 樣式不同，而樣式可從 setProgressStyle來修改: Dialog02.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

範例程式碼如下: 4_19_ProgressDialogEX2\src\ncu\bnlab\ProgressDialogExample02\ProgressDialogExample02.java Thread thread02 = new Thread(new Runnable() { public void run() { while (nowProgressStatus < 100) { try { Thread.sleep(500); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); nowProgressStatus+=5; myHandler.post(new Runnable() { dialog02.setProgress(nowProgressStatus); }); } // While // 關閉ProgressDialog dialog02.cancel(); }); } thread02.start(); }}

而可用的樣式有兩種，一種為 STYLE_SPINNER，即圖 2. 4 而可用的樣式有兩種，一種為 STYLE_SPINNER，即圖 2.4.2 圓型的 ProgressDialog；另一種即是 STYLE_HORIZONTAL， 為長條狀的 ProgressDialog， STYLE_HORIZONTAL這種形式的ProgressDialog下，可透過 setProgress()這個 Method 來顯示目前的進度以及完成的百分比。在此範例中則是透過 handler 來幫忙 setProgress() 給予目前完成的進度

2.4.3 DatePickerDialog DatePickerDialog除了選擇日期外，在預設的對話視窗上會顯示目前挑選的日期以及星期幾的資訊，如範例2.4.4。 圖2.4.３ DatePickerDialog 範例

範例程式碼如下: 4_20_DatePickerDialogEX\src\ncu\bnlab\DatePickerDialogExample\DatePickerDialogExample.java package ncu.bnlab.DatePickerDialogExample; import android.app.Activity; import android.app.DatePickerDialog; import android.os.Bundle; import android.widget.DatePicker; public class DatePickerDialogExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // 產生DatePickerDialog物件，並設定其事件Listener，初始日期設為 // 2009年11月05日 DatePickerDialog dpd = new DatePickerDialog(this,myOnDateSetListener,2009, 10, 05); dpd.show(); } // 設定DateSet的Listener，當日期被設定後會觸發此事件 private DatePickerDialog.OnDateSetListener myOnDateSetListener = new DatePickerDialog.OnDateSetListener() { public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) { // TODO Auto-generated method stub } };

DatePickerDialog有兩種建構種類: 在範例中，首先先產生一個 DatePickerDialog 物件，指定日期為2009/11/05(月份為 0-11，故在此 10 即代表 11 月) ，並指定一個事件 myOnDateSetListener 給此 DatePickerDialog ，而在此範例中當 Set 按紐被按下時沒有做任何事情，若要加入功能時，可加在 onDateSet(…)當中。 DatePickerDialog有兩種建構種類: Public DatePickerDialog(Context context, DatePickerDialog. OnDateSetListener callback, int yaer, int monthOFYear, int dayOFMonth) context 此Dialog所要執行的環境 callback 當日期被set後的通知 year 初始的年份 monthOFYear 初始的月份，從0-11 dayOFMonth 初始的日 Public DatePickerDialog(Context context, int theme, DatePickerDialog. OnDateSetListener callback, int yaer, int monthOFYear, int dayOFMonth) theme 當Dialog的theme 表2.6 DatePickerDialog 建構種類

2.4.4 TimePickerDialog TimePickerDialog選擇時間外，預設在對話視窗會顯示所選的時間，如圖2.4.5。

範例程式碼如下: 4_21_TimePickerDialogEX\src\ncu\bnlab\TimePickerDialogExample\TimePickerDialogExample.java package ncu.bnlab.DatePickerDialogExample; import android.app.Activity; import android.app.DatePickerDialog; import android.os.Bundle; import android.widget.DatePicker; public class DatePickerDialogExample extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // 產生DatePickerDialog物件，並設定其事件Listener，初始日期設為 // 2009年11月05日 DatePickerDialog dpd = new DatePickerDialog(this,myOnDateSetListener,2009, 10, 05); dpd.show(); } // 設定DateSet的Listener，當日期被設定後會觸發此事件 private DatePickerDialog.OnDateSetListener myOnDateSetListener = new DatePickerDialog.OnDateSetListener() { public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) { // TODO Auto-generated method stub } }; }

TimePickerDialog有兩種建構種類: 在範例中，首先先產生一個 TimePickerDialog 物件，初始時間為 12 點 25 分，並指定一個事件 OnDateSetListener 給此 TimePickerDialog ，而在此範例中當 Set 按紐被按下時沒有做任何事情，若要加入功能時，可加在 onTimeSet(…)當中。 TimePickerDialog有兩種建構種類: Public TimePickerDialog(Context context, TimePickerDialog. OnTimeSetListener callback, int minute, Boolean is24HourView) context 此Dialog所要執行的環境 callback 當日期被set後的通知 hourOFDay 初始的小時 minute 初始的分鐘 is24HourView 是24小時制或是AM/PM Public TimePickerDialog(Context context, TimePickerDialog. OnTimeSetListener callback, hourOFDay ,int minute, Boolean is24HourView) theme 當Dialog的theme