Chapter 4

Transcription

1 Chapter 4 手機控制項應用

2 元件佈局

3 <LinearLayout> 線性佈局共有兩個方向 : 垂直 (vertical) 水帄 (horizontal) 決定垂直或是水帄的屬性為 Orientation android:orientation="vertical"

4 <LinearLayout> 線性佈局就是將在 < LinearLayout > 內的元件以線性的方式來呈現

5 <LinearLayout> - 範例 在這個範例中, 使用了 <TextView> 元件, 共使用了三個 <TextView>, 這三個元件都以垂直向下的方式來呈現

6 <LinearLayout> - 範例 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text=" 這是第一列 " android:textsize="22sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text=" 這是第二列 " android:textsize="22sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text=" 這是第三列 " android:textsize="22sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

7 <LinearLayout> - 常用屬性設定 android:orientation 在 <LinearLayout> 中, 此屬性代表元件的排列是垂直或水帄佈局 android:layout_width 代表此元件佈局的寬度, 若值為 fill_parent 則會填滿 parent 的寬度 ; 若值為 wrap_content 則元件寬度會依照內容大小而調整

8 <LinearLayout> - 常用屬性設定 android:layout_height 代表此元件佈局的高度, 若值為 fill_parent 則會填滿 parent 的高度 ; 若值為 wrap_content 則元件高度會依照內容大小而調整 android:layout_margin 指定這個 view 距離上下左右的額外距離

9 <LinearLayout> - 常用屬性設定 android: layout_marginbottom 指定這個 view 距離下方的額外距離 android: layout_marginleft 指定這個 view 距離左方的額外距離 android: layout_marginright 指定這個 view 距離右方的額外距離 android: layout_margintop 指定這個 view 距離上方的額外距離

10 <FrameLayout> FrameLayout 是所有佈局中最單純的 若同個 FrameLayout 中若有數個元件 以最上層的元件為主 若同個 FrameLayout 中有同大小的元件 只會看到最上層的元件 若同個 FrameLayout 中有不同大小的元件 會看到由下至上的元件

11 <FrameLayout> - 範例 This is 蓋過 That is

12 <FrameLayout> - 範例 布局文件 -1 (res/layout/main.xml) : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <FrameLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <!-- 最底層的元件 --> <EditText android:text="that is a framelayout example" android:id="@+id/text01" android:layout_width="wrap_content" android:layout_height="wrap_content" />

13 <FrameLayout> - 範例 布局文件 -2(res/layout/main.xml): <!-- 最上層的元件 --> <EditText android:text="this is" android:id="@+id/text02" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </FrameLayout> </LinearLayout> 下層元件為 "That is a framelayout example" 上層元件為 "Thit is"

14 <RelativeLayout>

15 <RelativeLayout> - 範例 用 RelativeLayout 展示如 LinearLayout 的結果

16 <RelativeLayout> - 範例 布局文件架構 (res/layout/main.xml): <!-- 顯示第一行的 TextView --> android:id="@+id/textview01" <!-- 顯示第二行的 TextView --> android:id="@+id/ TextView02" android:layout_below="@id/ TextView01" <!-- 顯示第三行的 TextView --> android:id="@+id/ TextView03" android:layout_below="@id/ TextView02" 程式以 TextView01 為參考,TextView02 置放在 TextView01 下方,TextView03 放置在 TextView02 下方

17 <RelativeLayout> - 範例 布局文件架構 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text=" 這是第一列 " android:id="@+id/textview01" android:textsize="30sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text=" 這是第二列 " android:id="@+id/textview02" android:textsize="30sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/textview01" /> <TextView android:text=" 這是第三列 " android:id="@+id/textview03" android:textsize="30sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/textview02" /> </RelativeLayout> 此範例用到三個 TextView, 利用三個 TextView 作 RelativeLayout

18 <RelativeLayout> - 常用屬性設定 android:layout_above 置於目標 id 元件的上方 android:layout_alignbaseline 置於與目標 id 元件同樣的基準線上 android:layout_alignbottom 讓自己的下邊界與目標 id 元件的下邊界在同一個位置

19 <RelativeLayout> - 常用屬性設定 android:layout_alignleft 讓自己的左邊界與目標 id 元件的左邊界在同一位置 android:layout_alignparentbottom 若為 true, 讓自己的下邊界與 Parent 的下邊界同位置 android:layout_alignparentleft 若為 true, 讓自己的左邊界與 Parent 的左邊界同位置

20 <RelativeLayout> - 常用屬性設定 android:layout_alignparentright 若為 true, 讓自己的右邊界與 Parent 的右邊界同位置 android:layout_alignparenttop 若為 true, 讓自己的上邊界與 Parent 的上邊界同位置 android:layout_alignright 讓自己的右邊界與目標 id 元件的右邊界在同一位置

21 <RelativeLayout> - 常用屬性設定 android:layout_aligntop 讓自己的上邊界與目標 id 元件的上邊界在同一個位置 android:layout_alignwithparentifmissing 若設為 true, 當參考的目標 id 不可用時, 會以 Parent 為參考目標 android:layout_below 置於目標 id 元件的下方

22 <RelativeLayout> - 常用屬性設定 android:layout_centerhorizontal 若為 true, 置於 Parent 水帄位置的中心 android:layout_centerinparent 若為 true, 置於 Parent 水帄以及垂直位置的中心 android:layout_centervertical 若為 true, 置於 Parent 垂直位置的中心 android:layout_toleftof/torightof 置於目標 id 元件的左方 / 右方

23 <TableLayout>

24 <TableLayout> - 範例 範例使用了三個 <TableRow>, 意即有三個 row

25 <TableLayout> - 範例 布局文件 -1(res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow android:layout_margintop="20px"> <TextView android:layout_column="0" android:text=" 第一列 \n 第一行 " android:textsize="22sp" android:layout_marginleft="60px"/> <TextView android:layout_column="1" android:text=" 第一列 \n 第二行 " android:textsize="22sp" android:layout_marginleft="60px"/>/> </TableRow> <TableRow android:layout_margintop="20px"> <TextView

26 <TableLayout> - 範例 布局文件 -2(res/layout/main.xml): android:layout_column="0" android:text=" 第二列 \n 第一行 " android:textsize="22sp" android:layout_marginleft="60px"/> <TextView android:layout_column="1" android:text=" 第二列 \n 第二行 " android:textsize="22sp" android:layout_marginleft="60px"/>/> </TableRow> <TableRow android:layout_margintop="20px"> <TextView android:layout_column="0" android:text=" 第三列 \n 第一行 " android:textsize="22sp" android:layout_marginleft="60px"/> <TextView android:layout_column="1" android:text=" 第三列 \n 第二行 " android:textsize="22sp" android:layout_marginleft="60px"/>/> </TableRow> </TableLayout>

27 文字元件

28 TextView TextView 是個基本常用的元件 可使用 XML 來操作 可使用程式碼中的 Method 方法來操作 下列敘述 XML 與 Method 相對應之屬性功能 格式為 XML <-> Method

29 TextView 屬性功能介紹 android:autolink <-> setautolinkmask(int) 可讓文字上的連結自動變成可點擊的連結 android:gravity <-> setgravity(int) 設定文字在 View 中 x 軸和 y 軸相關數值 android:height <-> setheight(int) 設定 TextView 的高度 android:width <-> setwidth(int) 設定 TextView 的寬度

30 TextView 屬性功能介紹 android:hint <-> sethint(int) 當 Text 是空的時候, 就會顯示 hint 中的文字 android:lines <-> setlines(int) 設置 TextView 高度為幾個 Line 的高度, 值必須為整數型別 android:maxlength <-> setfilters(inputfilter) 設定 TextView 文字的最大長度

31 TextView 屬性功能介紹 android:password <-> settransformationmethod(transformation) 讓 Text 顯示成其他符號, 常用於輸入或顯示密碼時 android:text <-> settext(charsequence) 顯示的文字 android:textstyle <-> settypeface(typeface) 設定文字樣式

32 TextView 屬性功能介紹 android:textcolor <-> settextcolor(colorstatelist) 設定文字的顏色 android:textcolorlink <-> setlinktextcolor(int) 設定連結的顏色 android:textsize <-> settextsize(float) 設定文字大小

33 TextView 範例 若點擊上述的網址, 則會自動開啟瀏覽器跳至指定之網頁

34 TextView 範例一 純粹用 XML 語法產生連結 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: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 - /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:autolink="web" android:text="yahoo - /> </LinearLayout> 設置 autolink 為 web 設置 autolink 為 web

35 TextView 範例二 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > </LinearLayout> 用程式碼產生連結 1(TextView.java): package ncu.bnlab; 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;

36 TextView 範例二 用程式碼產生連結 2(TextView.java): public class TextViewExample extends Activity { /** Called when the activity is first created. 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 - layout.addview(tv1); TextView tv2 = new TextView(this); tv2.setgravity(gravity.center); tv2.setautolinkmask(linkify.web_urls); tv2.settext("yahoo - layout.addview(tv2);

37 TextView autolink 屬性 android:autolink <-> setautolinkmask(int) none autolink 預設值 all <-> Linkify.ALL 目前所有連結種類 <-> Linkify. _ADDRESSES 連結 phone <-> Linkify. PHONE_NUMBERS 電話號碼連結 web <-> Linkify.WEB_URLS 網址連結

38 AutoCompleteTextView AutoCompleteTextView 可達到簡易自動完成 Text 的功能 假設已有定義台灣的縣市英文名稱, 當輸入 Ta 時, 程式會自動將符合 Ta 的縣市名稱給列出來, 如範例所展示

39 AutoCompleteTextView 範例

40 AutoCompleteTextView 範例 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <AutoCompleteTextView android:text="" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>

41 AutoCompleteTextView 範例 程式碼 (TextView.java): package ncu.bnlab; 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. 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); private static final String[] TAIWAN = new String[] { "Keelung", "Taipei", "Taoyuan", "Hsinchu", "Miaoli", "Taichung", "Changhua", "Nantou", "Yunlin", "Chiayi", "Tainan", "Kaohsiung", "Pingtung ", "Yilan", "Hualien", "Taitung" ;

42 表單元件

43 Button Button 的 layout 方面會有兩種屬性 wrap_content layout_width 為 wrap_content 時, 這個 button 會依據 button 上的 text 長度為基準 fill_parent layout_width 為 fill_parent 時, 則會以 parent 最寬的長度為主

44 Button 範例 利用 XML 建立 Button 即可

45 ImageButton ImageButton 可以將圖片當作 button 的背景 利用此屬性 layout:src=" 圖片位置 " ImageButton 範例

46 ImageButton 範例 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> </LinearLayout>

47 RadioButton RadioButton 為個別的一個按鈕 若要做成有多選一這種功能時, 則需將這些 RadioButton 放置一個 <RadioGroup> 中

48 RadioButton 範例

49 RadioButton 範例 布局文件 -1(res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text=" 您對此次教學感到?" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal >

50 RadioButton 範例 布局文件 -2(res/layout/main.xml): <RadioButton android:text=" 滿意 " android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true"/> <RadioButton android:text=" 普通 " android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioButton android:text=" 不滿意 " android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RadioGroup> </LinearLayout>

51 ToggleButton ToggleButton 是一種類似開關的 Button 預設為 Off, 點擊後變為 On 開關上的文字也可以自訂 android:texton 和 android:textoff 當中的文字即為開關 On 或 Off 時顯示的文字

52 ToggleButton 範例 此範例中, 使用到一個簡單的事件處理, 當開關變動時在開關下方的 TextView 會跟著改變

53 ToggleButton 範例 布局文件 -1(res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ToggleButton android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="now is Off" android:layout_width="wrap_content" android:layout_height="wrap_content" />

54 ToggleButton 範例 布局文件 -2(res/layout/main.xml): <ToggleButton 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:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

55 ToggleButton 範例 程式碼 -1(ToggleButtonExample.java): public class ToggleButtonExample extends Activity { /** Called when the activity is first created. 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) { if (togglebutton01.ischecked()) { textview01.settext("now is ON"); else { textview01.settext("now is OFF"); );

56 ToggleButton 範例 程式碼 -2(ToggleButtonExample.java): 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) { if (togglebutton02.ischecked()) { textview02.settext("now is ON"); else { textview02.settext("now is OFF"); ); 在 togglebutton01 以及 togglebutton02 設置 onclick 事件處理並利用 ischeck() 來判斷 togglebutton 的開關狀態, 再依照狀態改變 TextView01 和 TextView02 的文字內容

57 CheckBox CheckBox 只有兩種型態 checked unchecked CheckBox 可用在勾選多項選擇時

58 CheckBox 範例

59 CheckBox 範例 布局文件 -1(res/layout/main.xml): <TextView android:text=" 你喜歡的顏色? ( 可複選 )" android:id="@+id/textview01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:orientation= horizontal android:layout_width="fill_parent" android:layout_height="wrap_content"> <CheckBox android:text=" 紅色 " android:id="@+id/checkbox01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <CheckBox android:text=" 黃色 " android:id="@+id/checkbox02" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <CheckBox android:text=" 綠色 " android:id="@+id/checkbox02" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

60 CheckBox 範例 布局文件 -2(res/layout/main.xml): <TextView android:text=" 帄常的休閒活動? ( 可複選 )" android:id="@+id/textview02" android:layout_width="wrap_content" android:layout_height="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_width="wrap_content" android:layout_height="wrap_content" /> <CheckBox android:text=" 游泳 " android:id="@+id/checkbox05" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <CheckBox android:text=" 上網 " android:id="@+id/checkbox06" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout>

61 DatePicker DatePicker 可讓使用者選擇年 月 日 當使用者按下 button 後,TextView 會顯示 DatePicker 所選的日期

62 DatePicker 布局文件 -1(res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <DatePicker android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margintop="15sp"/> <Button android:text=" 確定 " android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margintop="25sp"/> <TextView android:text="" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margintop="35sp"/> </LinearLayout>

63 DatePicker 程式碼 (DatePickerExample.java): public class DatePickerExample extends Activity { /** Called when the activity is first created. 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(); int month = datepicker.getmonth() + 1; int day = datepicker.getdayofmonth(); textview.settext( year + "-" + month + "-" + day ); );

64 TimePicker TimePicker 可讓使用者選擇時間 預設可讓使用者選擇 AM 或是 PM

65 TimePicker 範例 布局文件 (res/layout/main.xml): <TimePicker android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margintop="15sp"/> <Button android:text=" 確定 " android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margintop="25sp"/> <TextView android:text="" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margintop="35sp" android:textsize="20sp"/>

66 TimePicker 範例 程式碼 (TimePickerExample.java): public class TimePickerExample extends Activity 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 ); );

67 EditText EditText 可讓使用者輸入文字 layout_width 為 wrap_content 時,EditText 的寬度會隨著輸入的字而變寬 當為 fill_parent 時則會固定為 parent 的寬度

68 EditText 範例

69 ProgressBar ProgressBar 可用於顯示程式執行進度 ProgressBar 有上述四種型態

70 ProgressBar 範例 布局文件 (res/layout/main.xml): <ProgressBar android:layout_height= wrap_content android:layout_width= 200px android:layout_gravity= center_horizontal android:layout_margintop= 20sp style=?android:attr/progressbarstylehorizontal /> <ProgressBar android:layout_height= wrap_content android:layout_width= wrap_content android:layout_gravity= center_horizontal android:layout_margintop= 20sp style=?android:attr/progressbarstylesmall /> <ProgressBar android:layout_height= wrap_content android:layout_width= wrap_content android:layout_gravity= center_horizontal android:layout_margintop= 20sp style=?android:attr/progressbarstyle /> <ProgressBar android:layout_height= wrap_content android:layout_width= wrap_content android:layout_gravity= center_horizontal android:layout_margintop= 20sp style="?android:attr/progressbarstylelarge" /> 改變 style 即可變更 ProgressBar 的樣式

71 RatingBar RatingBar 可用來製作評分系統 使用者可碰觸 RatingBar 的星星來達到評分 若碰觸星星的右半部則會加分 碰觸左半部則會扣分 最多為五顆星, 星星間隔為 0.5 顆星

72 RatingBar 範例

73 RatingBar 範例 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RatingBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:numstars="3" /> <TextView android:text="" android:textsize="50sp" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <RatingBar android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="" android:textsize="50sp" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>

74 RatingBar 範例 程式碼 (RatingBarExample.java): public class RatingBarExample extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); 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); ratingbar01.setonratingbarchangelistener(new OnRatingBarChangeListener(){ public void onratingchanged(ratingbar ratingbar, float rating, boolean fromuser) { 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) { textview02.settext(float.tostring(ratingbar02.getrating())); );

75 對話視窗元件

76 AlertDialog AlertDialog 為警告對話視窗, 像是離開程式或是刪除檔案時會跳出的對話視窗元件

77 AlertDialog 範例 程式碼 -1(AlertDialogExample.java): public class AlertDialogExample extends Activity 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) { About(); ); button02.setonclicklistener(new OnClickListener(){ public void onclick(view arg0) { Leave(); ); private void About() { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.settitle(" 關於 ").setmessage(" 這是 Alert Dialog").show();

78 AlertDialog 範例 程式碼 -2(AlertDialogExample.java): private void Leave() { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setmessage(" 確定要離開本程式嗎?").setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { // TODO Auto-generated method stub AlertDialogExample.this.finish(); ).setnegativebutton("no", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { // TODO Auto-generated method stub dialog.cancel(); ); AlertDialog about_dialog = builder.create(); about_dialog.show();

79 AlertDialog.Builder - 屬性 create() 創建一個 AlertDialog setcancelable(boolean) 設為 false 時, 使用者無法使用其他方式關閉這個對話視窗, 只可使用對話視窗上給的操作方式來操作 seticon(drawable or int) 設置 Title 上的 Icon settitle(charsequence or int) 設定要顯示的 Title

80 AlertDialog.Builder - 屬性 setmessage(charsequence or int) 設定要顯示的內容 setpositivebutton(charsequence text, DialogInterface.OnClickListener listener) 設定正向 ( 左邊 ) 的按鈕 setnegativebutton(charsequence text, DialogInterface.OnClickListener listener) 設定反向 ( 右邊 ) 的按鈕 show() 顯示 AlertDialog

81 ProgressDialog ProgressDialog 可用於在等待其他程式或是在等待上傳時使用 ProgressDialog 有兩種形式 圓型 ProgressDialog 長條型 ProgressDialog

82 ProgressDialog 範例一 圓形的 ProgressDialog

83 ProgressDialog 範例一 程式碼 (AlertDialogExample01.java): public class ProgressDialogExample extends Activity { int nowprogressstatus = 0; Handler myhandler = new public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); final ProgressDialog dialog01 = ProgressDialog.show(this, "", " 程式正在開啟中...", false); Thread thread01 = 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; // While myhandler.post(new Runnable() { public void run() { dialog01.cancel(); ); ); thread01.start(); 圓形的 ProgressDialog

84 ProgressDialog 範例二 長條型 ProgressDialog

85 ProgressDialog 範例二 程式碼 (AlertDialogExample02.java): public class ProgressDialogExample02 extends Activity { int nowprogressstatus = 0; Handler myhandler = new public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); final ProgressDialog dialog02 = new ProgressDialog(this); dialog02.setprogressstyle(progressdialog.style_horizontal); dialog02.setmessage(" 讀取中..."); dialog02.show(); Thread thread02 = new Thread(new Runnable() { public void run() { while (nowprogressstatus < 100) { try { Thread.sleep(500); catch (InterruptedException e) { e.printstacktrace(); nowprogressstatus+=5; myhandler.post(new Runnable() { public void run() { dialog02.setprogress(nowprogressstatus); ); // While myhandler.post(new Runnable() { public void run() { dialog02.cancel(); ); ); thread02.start();

86 DatePickerDialog DatePickerDialog 除了選擇日期外, 在預設的對話視窗上會顯示目前挑選的日期以及星期幾的資訊

87 DatePickerDialog 範例 程式碼 (DatePickerDialogExample.java): public class DatePickerDialogExample extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); DatePickerDialog dpd = new DatePickerDialog(this,myOnDateSetListener,2009, 10, 05); dpd.show(); private DatePickerDialog.OnDateSetListener myondatesetlistener = new DatePickerDialog.OnDateSetListener() { public void ondateset(datepicker view, int year, int monthofyear, int dayofmonth) { // TODO Auto-generated method stub ;

88 DatePickerDialog 屬性 DatePickerDialog 有兩種建構種類 : public DatePickerDialog (Context context, DatePickerDialog.OnDateSetListener callback, int year, int monthofyear, int dayofmonth) public DatePickerDialog (Context context, int theme, DatePickerDialog.OnDateSetListener callback, int year, int monthofyear, int dayofmonth)

89 TimePickerDialog TimePickerDialog 選擇時間外, 預設在對話視窗會顯示所選的時間

90 TimePickerDialog 範例 程式碼 (TimePickerDialogExample.java): public class TimePickerDialogExample extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); TimePickerDialog tpd = new TimePickerDialog(this, mytimesetlistener, 12, 25, false); tpd.show(); private TimePickerDialog.OnTimeSetListener mytimesetlistener = new TimePickerDialog.OnTimeSetListener() { public void ontimeset(timepicker view, int hourofday, int minute) { // TODO Auto-generated method stub ;

91 TimePickerDialog 屬性 TimePickerDialog 有兩種建構種類 : public TimePickerDialog (Context context, TimePickerDialog.OnTimeSetListener callback, int hourofday, int minute, boolean is24hourview) public TimePickerDialog (Context context, int theme, TimePickerDialog.OnTimeSetListener callback, int hourofday, int minute, boolean is24hourview)

92 選單元件

93 Options Menu Options Menu 就是透過按手機或模擬器上的 menu 鍵顯示的功能表 最多可以顯示六項, 稱為 Icon Menu 超過六項就會以 More 的功能項來表示其餘的選項, 稱為 Expanded Menu

94 Options Menu 範例一 此種型式的 Menu 就稱為 OptionsMenu

95 Options Menu 範例一 程式碼 -1(OptionsMenuEX.java): public class OptionsMenu extends Activity { public static final int aboutbtnid = Menu.FIRST; public static final int exitbtnid = Menu.FIRST + 1; /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); public boolean oncreateoptionsmenu(menu menu) { menu.add(0, aboutbtnid, 0, "About"); menu.add(0, exitbtnid, 0, "Exit"); return true;

96 Options Menu 範例一 程式碼 -2(OptionsMenuEX.java): public boolean onoptionsitemselected(menuitem item) { super.onoptionsitemselected(item); switch( item.getitemid() ) { case aboutbtnid: opendialog(); break; case exitbtnid: finish(); break; return true; public void opendialog() { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setmessage("about OptionsMenu"); builder.settitle("about"); builder.setpositivebutton("ok", new DialogInterface.OnClickListener() public void onclick(dialoginterface dialog, int which) { ).show();

97 Options Menu 範例二

98 Options Menu 範例二 程式碼 -1(OptionsMenuEX.java): public class OptionsMenu2 extends Activity { public static final int aboutbtnid = Menu.FIRST; public static final int exitbtnid = Menu.FIRST + 1; public static final int searchbtnid = Menu.FIRST + 2; public static final int addbtnid = Menu.FIRST + 3; public static final int playbtnid= Menu.FIRST + 4; public static final int delbtnid = Menu.FIRST + 5; public static final int openbtnid = Menu.FIRST + 6; /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); public boolean oncreateoptionsmenu(menu menu) { menu.add(0, aboutbtnid, 0, "About"); menu.add(0, exitbtnid, 0, "Exit"); menu.add(0, searchbtnid, 0, "Search"); menu.add(0, addbtnid, 0, "Add"); menu.add(0, playbtnid, 0, "Play"); menu.add(0, delbtnid, 0, "Delete"); menu.add(0, openbtnid, 0, "Open"); return true;

99 Options Menu 範例二 程式碼 -2(OptionsMenuEX2.java): public boolean onoptionsitemselected(menuitem item) { super.onoptionsitemselected(item); switch( item.getitemid() ) { case aboutbtnid: opendialog(); break; case exitbtnid: finish(); break; return true; public void opendialog() { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setmessage("about OptionsMenu"); builder.settitle("about"); builder.setpositivebutton( OK, new DialogInterface.OnClickListener() public void onclick(dialoginterface dialog, int which) { ).show();

100 Options Menu 範例三 在功能表中增加圖示

101 Options Menu 範例三 程式碼 (OptionsMenuEX.java): public boolean oncreateoptionsmenu(menu menu) { menu.add(0, aboutbtnid, 0, "About").setIcon(R.drawable.icon); menu.add(0, exitbtnid, 0, "Exit").setIcon(R.drawable.icon); return true; 透過 seticon() 方法在功能表中增加圖示

102 Context Menu Android 中的 Context Menu 與一般個人電腦中的滑鼠右鍵非常類似 當在 View 上, 使用者長按螢幕不放兩秒, 將會出現一個浮動功能表 Context Menu 不支援圖示或快捷鍵

103 Context Menu 範例

104 Context Menu 範例 程式碼 (ContextMenuEX.java): public class ContextMenu extends Activity { public String checkeditem = ""; public static final int newbtnid = Menu.FIRST; public static final int openbtnid = Menu.FIRST + 1; public static final int closebtnid = Menu.FIRST + public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Button filebtn = (Button)findViewById(R.id.fileBtn); Button editbtn = (Button)findViewById(R.id.editBtn); registerforcontextmenu(filebtn); registerforcontextmenu(editbtn); public void oncreatecontextmenu(android.view.contextmenu conmenu, View v, ContextMenuInfo menuinfo) { super.oncreatecontextmenu(conmenu, v, menuinfo); conmenu.setheadertitle("context Menu"); conmenu.add(0, newbtnid, 0, "New").setNumericShortcut('1'); conmenu.add(0, openbtnid, 0, "Open").setCheckable(true); conmenu.add(0, closebtnid, 0, "Close").setIcon(R.drawable.icon); public boolean oncontextitemselected(menuitem item) { super.oncontextitemselected(item); return false;

105 Sub Menu 一個子功能表可以被加入任何功能表中, 但不能加入另外的子功能表中 當應用程式有很多功能可以被分類時, 會非常好用, 就像是一般電腦的功能表

106 Sub Menu 範例

107 Sub Menu 範例 程式碼 -1(SubMenuEX.java): public class SubMenus extends Activity { public String checkeditem = ""; public static final int newbtnid = Menu.FIRST; public static final int openbtnid = Menu.FIRST + 1; public static final int closebtnid = Menu.FIRST + public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Button filebtn = (Button)findViewById(R.id.fileBtn); Button editbtn = (Button)findViewById(R.id.editBtn); registerforcontextmenu(filebtn); registerforcontextmenu(editbtn);

108 Sub Menu 範例 程式碼 -2(SubMenuEX.java): public void oncreatecontextmenu(android.view.contextmenu conmenu, View v, ContextMenuInfo menuinfo) { super.oncreatecontextmenu(conmenu, v, menuinfo); /* conmenu.setheadertitle("context Menu"); conmenu.add(0, newbtnid, 0, "New").setNumericShortcut('1'); // 利用數字選擇 conmenu.add(0, openbtnid, 0, "Open").setCheckable(true); // 設定 checkbox conmenu.add(0, closebtnid, 0, "Close").setIcon(R.drawable.icon); //ContextMenu 不支援 icon*/ SubMenu sub = conmenu.addsubmenu("submenu"); sub.add("add..."); sub.add("delete..."); public boolean oncontextitemselected(menuitem item) { super.oncontextitemselected(item); return false;

109 Spinner Spinner 是一個 widget, 允許使用者從一群選項中選出其中一個 Spinner 就類似下拉式選單, 當列表超過螢幕大小時也可允許捲動

110 Spinner 範例

111 Spinner 範例 布局文件 -1(res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:padding="10dip" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margintop="10dip" android:text="please select a planet:" /> <Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" android:drawselectorontop="true" android:prompt="@string/planet_prompt" /> </LinearLayout> 首先我們將 main.xml 改寫成下列範例中的程式碼

112 Spinner 範例 布局文件 (res/value/strings.xml): <string name="planet_prompt">choose a item</string> 布局文件 (res/value/arrays.xml): 其中我們新增了 Spinner 的標籤, 接著新增這段程式碼至 strings.xml 中 <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name= cards"> <item>visa</item> <item>mastercard</item> <item>jbc</item> <item>hsbc</item> <item>citibank</item> <item>sd</item> </string-array> </resources> 接著在 res/value/ 中建立一下名為 arrays.xml 的文件,arrays.xml 程式碼如下

113 Spinner 範例 程式碼 -1(SpinnerEX.java): package ncu.bnlab.spinnerexample; import android.app.activity; import android.os.bundle; import android.widget.arrayadapter; import android.widget.spinner; public class SpinnerEX extends Activity { /** Called when the activity is first public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); 最後將 Spinner 的 JAVA 原始檔開啟, 在 oncreate() 中加入程式碼 Spinner s = (Spinner)findViewById(R.id.spinner);

114 Spinner 範例 程式碼 -2(SpinnerEX.java): /* 設定功能表項目陣列, 使用 createfromresource 方法 */ ArrayAdapter adapter = ArrayAdapter.createFromResource( this, R.array.cards, android.r.layout.simple_spinner_item); /* 設定選單 */ adapter.setdropdownviewresource(android.r.layout.simple_spinner_dropdown_item); /* 設定 Adapter */ s.setadapter(adapter);

115 Notifying 元件

116 Toast Notification 消息條通知是一個在視窗彈出的訊息, 它只顯示內容所需的空間且使用者當前活動仍然保持可見和可互動 這個通知自動淡入淡出, 且不接受互動事件, 因為消息條可以從一個後台服務 Service 中建立, 即便應用程式不可見, 它也將呈現出來

117 Toast Notification 一個消息條是用來顯示簡短文字訊息的好方法, 例如說 檔案已儲存, 當使用者正在注意螢幕時, 這種方式就可以提醒使用者動作已完成 一個消息條不能接受使用者互動事件 ; 如果希望使用者回答並採取對應動作, 可以考慮使用一個狀態條通知 Status Bar Notification, 在下一小節將會介紹

118 Toast Notification 首先,Toast 物件有一個 maketext 的方法, 這個方法帶有三個參數 : 應用程式內容 文字訊息 顯示時間長短 接著它會回傳一個初始化的 Toast 物件, 在程式中可以使用 show() 方法來顯示

119 Toast Notification 一般標準的 Toast 預設位置是靠底下偏中間, 可以透過 setgravity(int, int, int) 方法改變, 在下面的範例中程式設定讓 Toast 物件靠左上角顯示 如果要讓 Toast 物件往右移動, 增加第二個參數 (x-postion) 的數值 如果要讓 Toast 物件往下移動, 增加第三個參數 (y-postion) 的數值

120 Toast Notification 範例

121 Toast Notification 範例 程式碼 (ToastNotificationEX.java): public class ToastNotification extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); /* 第一種 maketext 用法 */ Context context1 = getapplicationcontext(); CharSequence text1 = "Short Toast"; int duration1 = Toast.LENGTH_SHORT; // 設定停留長短 Toast toast = Toast.makeText(context1, text1, duration1); toast.setgravity(gravity.top Gravity.LEFT, 0, 0); // 設定 Toast 物件位置 toast.show(); /* 第二種 maketext 用法 */ Context context2 = getapplicationcontext(); CharSequence text2 = "Long Toast"; int duration2 = Toast.LENGTH_LONG; // 設定停留長短 Toast.makeText(context2, text2, duration2).show();

122 Status Bar Notification 一個狀態條通知會增加一個圖示到 系統狀態列上 一個可選的滾動訊息 在這個 通知 視窗中的一個擴展消息 當使用者選擇這個擴展消息時,Android 發出這個通知所定義的一個 Intent( 通常是啟動一個活動 ) 也可配置這個通知使用聲音 震動和設備上的閃燈來警告用戶

123 Status Bar Notification 當應用程式是以後台服務運行且需要通知使用者事件時, 這類通知是一種理想的方式 如果需要在活動仍處於焦點下時警告使用者一個發生的事件, 可以使用對話框通知 Dialog Notification

124 Status Bar Notification 一個活動或服務可以起始一個狀態條通知, 然而活動只有在啟動狀態及處於焦點狀態時才可以完成這個動作 所以當使用者在使用其他應用程式或設備處於休眠狀態時, 服務可以在背景中建立狀態條通知

125 Status Bar Notification 一個活動或服務可以起始一個狀態條通知, 然而活動只有在啟動狀態及處於焦點狀態時才可以完成這個動作 所以當使用者在使用其他應用程式或設備處於休眠狀態時, 服務可以在背景中建立狀態條通知

126 Status Bar Notification 範例

127 Status Bar Notification 範例 程式碼 (StatusBarNotificationEX.java): public class StatusBarNotification extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); String ns = Context.NOTIFICATION_SERVICE; NotificationManager mnotificationmanager = (NotificationManager) getsystemservice(ns); int icon = R.drawable.icon; // 通知圖示 CharSequence tickertext = "Hello!!!"; // ticker-text long when = System.currentTimeMillis(); // 通知時間 Context context = getapplicationcontext(); // 應用程式內容 CharSequence contenttitle = " 這是訊息標題 "; // 訊息標題 CharSequence contenttext = " 這是訊息內文 "; // 訊息內文 Intent notificationintent = new Intent(this, StatusBarNotification.class); PendingIntent contentintent = PendingIntent.getActivity(this, 0, notificationintent, 0); Notification notification = new Notification(icon, tickertext, when); notification.setlatesteventinfo(context, contenttitle, contenttext, contentintent); final int HELLO_ID = 1; mnotificationmanager.notify(hello_id, notification); // 傳送通知

128 Dialog Notification 一個對話框通知一般是出現在當前活動前面的一個視窗 背後的活動遺失焦點而由此對話框接受所有的使用者互動 對話框通常用於和運行中應用程式直接相關的通知和短暫活動

129 Dialog Notification 應該使用對話框來顯示一個進度條或者一個需要使用者確認的訊息 例如說帶有 確認 和 取消 按鈕的警告 也可將對話框作為構成應用程式界面整體的元件以及用於除了通知之外的其它目的

130 顯示元件

131 ImageView 用於顯示一個圖樣, 例如說一個圖示或圖片 ImageView 類別可以載入來自不同來源的圖片 ( 可能來自資源或內容提供商 ), 它可以用於任何佈局管理器, 並提供多種顯示選項, 例如 : 縮放 著色

132 ImageView - 屬性功能介紹 android:adjustviewbounds <-> setadjustviewbounds(boolean) 如果要讓 ImageView 根據 drawable 資源大小去調整邊界, 必須將此值設為 true android:croptopadding 如果為真, 此圖片將被裁剪成適合的大小 android:maxheight <-> setmaxheight(int) 設定最大高度

133 ImageView - 屬性功能介紹 android:maxwidth <-> setmaxwidth(int) 設定最大寬度 android:scaletype <-> setscaletype(imageview.scaletype) 控制圖片如何縮放或移動且配合 ImageView 的大小 android:src <-> setimageresource(int) 為此 ImageView 內容設定資源圖檔 android:tint <-> setcolorfilter(int,porterduff.mode) 設定著色的過濾器

134 ImageView 範例

135 ImageView 範例 程式碼 -1(ImageViewEX.java): public class ImageViewEX extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); ImageView imageview = new ImageView(this); imageview.setimageresource(r.drawable.christmas); setcontentview(imageview); 將 drawable 中的圖檔資源置入 imageview 的圖片來源

136 ListView Android 除了提供 CheckBox 與 RadioButton 的物件之外, 還提供另一種更為方便且表現多樣化的物件 ListView

137 ListView 範例

138 ListView 範例一程式碼 程式碼 -1(ListViewEX.java): public class ListViewEX extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); String[] Data = {" 網路概論 "," 通訊網路實驗 "," 通訊概論 "; ListView listview = new ListView(this); // 設定 ListView 選擇的方式 : // 單選 :ListView.CHOICE_MODE_SINGLE // 多選 :ListView.CHOICE_MODE_MULTIPLE listview.setchoicemode( ListView.CHOICE_MODE_SINGLE ); ArrayAdapter varraydata = new ArrayAdapter( this, android.r.layout.simple_list_item_single_choice, Data ); // 設定 ListView 的接收器, 做為選項的來源 listview.setadapter( varraydata ); // ListView 設定為 ContentView setcontentview(listview);

139 ListView 範例二程式碼 程式碼 -2(ListViewEX.java): public class ListViewEX2 extends ListActivity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); String[] Data = { " 葷食 "," 素食 "," 兩者皆可 " ; ListView listview = this.getlistview(); listview.setchoicemode( ListView.CHOICE_MODE_SINGLE ); // ListView 的選項來源由陣列提供 this.setlistadapter( new ArrayAdapter( this, android.r.layout.simple_list_item_single_choice, Data ));

140 GridView GridView 可以顯示一個二維滾動格框, 也可搭配其他元件, 呈現類似一般手機上的功能表

141 GridView 範例

142 GridView 範例 GridView 程式碼 -1(GridViewEX.java): public class GridViewEX extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); GridView gridview = (GridView) findviewbyid(r.id.gridview); gridview.setadapter(new ImageAdapter(this));

143 GridView 範例 ImageAdapter 程式碼 -1(ImageAdapter.java): public class ImageAdapter extends BaseAdapter { private Context mcontext; public ImageAdapter(Context c) { mcontext = c; public int getcount() { return mthumbids.length; public Object getitem(int position) { return null; public long getitemid(int position) { return 0;

144 GridView 範例 ImageAdapter 程式碼 -2(ImageAdapter.java): public View getview(int position, View convertview, ViewGroup parent) { ImageView imageview; if (convertview == null) { imageview = new ImageView(mContext); imageview.setlayoutparams(new GridView.LayoutParams(85, 85)); imageview.setscaletype(imageview.scaletype.center_crop); imageview.setpadding(8, 8, 8, 8); else { imageview = (ImageView) convertview; imageview.setimageresource(mthumbids[position]); return imageview; private Integer[] mthumbids = { R.drawable.icon, R.drawable.christmas, R.drawable.favorite, R.drawable.ipod ;

145 SurfaceView 依照傳統的作法, 要快速更新畫面, 如果做遊戲之類的應用 通常會新增執行緒處理工作後, 使用 handler 傳送訊息給 View 顯示畫面 或在非使用者執行緒呼叫 View 做法就是透過 SurfaceView 的 getholder() 取得 SurfaceHolder, 然後對 SurfaceHolder 的 Canvas 畫圖

146 SurfaceView 範例

147 SurfaceView 範例 程式碼 -1(SurfaceViewEX.java): public class SurfaceViewEX extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(new MyView(this)); // 內部類別 class MyView extends SurfaceView implements SurfaceHolder.Callback { SurfaceHolder holder; public MyView(Context context) { super(context); holder = this.getholder();// 獲取 Holder public void surfacechanged(surfaceholder holder, int format, int width, int height) {

148 SurfaceView 範例 程式碼 public void surfacecreated(surfaceholder holder) { new Thread(new public void surfacedestroyed(surfaceholder holder) { // 執行緒 class MyThread implements Runnable public void run() { Canvas canvas = holder.lockcanvas(null);// 獲得畫布 Paint mpaint = new Paint(); mpaint.setcolor(color.blue); canvas.drawrect(new RectF(40,60,80,80), mpaint); holder.unlockcanvasandpost(canvas);// 解鎖畫布並更新顯示

149 WebView Webview 是用於顯示 web 頁面的視景 在活動中的任何一個瀏覽器或簡易地顯示一些線上內容 它使用 Webkit 繪圖引擎去顯示頁面且包含 上一頁 下一頁 放大縮小 文字搜尋 等等方法

150 WebView 範例

151 WebView 範例 <uses-permission android:name="android.permission.internet" /> 布局文件 (res/layout/main.xml): 為了使活動可以在 WebView 存取 Internet 及讀取 web 頁面, 需在 AndroidManifest.xml 中加入 INTERNET 權限 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <WebView android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> 修改 main.xml 中的布局方式

152 WebView 範例 程式碼 (WebViewEX.java): public class WebViewEX extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); WebView webview; webview = (WebView) findviewbyid(r.id.webview); webview.getsettings().setjavascriptenabled(true); webview.loadurl(" 此處以 Google 網站作為連接範例

153 MapView 可在活動中顯示 Google Map 地圖畫面, 並可於地圖上進行標示動作, 與一般在瀏覽器上操作類似 在此範例中需使用到 Google Map API 金鑰, 此部分將於後面章節作詳細介紹

154 MapView 範例

155 MapView 範例 <uses-library android:name="com.google.android.maps" /> 首先必須在 AndroidManifest.xml 中的 <application> 標籤內加入 Google Map API <uses-permission android:name="android.permission.internet" /> 接著在 AndroidManifest.xml 中的 <manifest> 標籤內加入存取網路的權限

156 MapView 範例 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <view class = "com.google.android.maps.mapview" android:id="@+id/mapview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" android:apikey= 你的 apikey" /> </LinearLayout> 其中 android:apikey 需要去 Google 網站申請

157 MapView 範例 程式碼 (MapViewEX.java): public class MapViewEX extends MapActivity { /** Called when the activity is first created. protected boolean isroutedisplayed() { return false; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); MapView mv = (MapView) findviewbyid(r.id.mapview); MapController controller = (MapController)mv.getController(); GeoPoint p = new GeoPoint((int) (25 * ),(int)(121.5 * )); controller.animateto(p); controller.setzoom(15);

158 客製化元件

159 客製化元件 介紹完 Android 所提供的各類元件後, 其實 Android 本身也可以自行製作客製化元件來用, 像是 Button TextView EditText ListView CheckBox RadioButton 與一些其他有特殊用途的 AutoCompleteTextView ImageSwitcher 和 TextSwitcher 等等搭配 Layout 組成新元件

160 客製化元件 如果只是需要改變某個元件的小部分, 那就可以直接覆寫元件中的方法即可 完全客製化元件的方法可以建立一些用於顯示的圖形元件, 也許一個像電壓的圖形計量器, 或者是卡拉 OK 中的波紋隨著音樂滾動

161 客製化元件 在 Android 中, 可以用自訂的要求輕鬆地建立客製化元件, 下面將簡單介紹如何創造客製化元件 : 最為通用的毫無疑問是 View 類別, 因此, 最開始要建立一個基於此類別的一個子類別 寫一個函數從 XML 文件中取得屬性和參數, 當然也可以自行定義這些屬性和參數 可能有必要撰寫本身的事件監聽器 修改函數和一些元件本身功能上的程式碼 如果希望元件能夠顯示什麼東西, 可能會重載 onmeasure() 函數 當兩個函數都用預設的, 那 ondraw() 函數將不會做任何事情, 並且預設的 onmeasure() 函數會自動的設定一個 100x100 的尺寸, 這個尺寸可能非我們所要的 其他有必要重載的 on... 開頭系列函數都需要重新撰寫一次

162 客製化元件 ondraw() 函數將會傳送一個 Canvas 對象, 透過它即可在 2D 圖形上做任何事情, 包含其他的一些標準和通用的元件 格式化本文, 任何可以想到的東西都可以透過它呈現 但此不包含 3D 圖形, 如果想使用 3D 圖形, 應該把父類別由 View 改為 SurfaceView 類, 並使用獨立的執行緒

163 客製化元件 onmeasure() 函數較為複雜一些, 因為這個函數是呈現元件和容器互動的關鍵部分, onmeasure() 應該重載, 讓它能夠有效且準確的表現它所包含部分的測量值 一旦測量寬度和高度出來後, 就要立即呼叫 setmeasureddimension() 方法

164 客製化元件 整體來說, 執行 onmeasure() 函數分為以下幾個步驟 : 重載的 onmeasure() 方法會被呼叫, 高度和寬度參數同時也會牽涉到 (widthmeasurespec 和 heighmeasurespec 兩個參數都是整數類型 ), 同時還要考慮產品螢幕的尺寸限制 元件要透過 onmeasure() 計算得到必要的測量長度和寬度, 用來顯示元件 另外它可以實現一些規格以外的功能, 像是滑動 捲動 裁切 等等 一旦高度和寬度計算出來之後, 必須呼叫 setmeasureddimension(int width, int height), 否則就會導致系統異常

165 課後習題 1. 在 <LinearLayout> 中有兩種方向, 請問要更改 Layout 方向的屬性為何? 2. 請問 <RelativeLayout> 的佈局概念為何? 詴舉例說明 3. 詴說明 <TableLayout> 和 <TableRow> 之間的關係 4. 如何讓 <TextView> 中的文字有自動連結的功能? 5. 如何讓某個 RadioButton 為預設勾選項目? 6. ProgressBar 有幾種樣式? 若要更改樣式要如何修改?

166 課後習題 7. Options Menu 最多可顯示幾個項目, 若超過上限會如何? 8. ContextMenu 是否可支援圖示或快捷鍵? 9. Toast 可否更改顯示時間之間隔? 需如何修改? 10. StatusBarNotification 如欲通知使用者需在程式中呼叫哪個方法? 11. ListView 如何設定單選或多選? 12. 若要實現手機上之程式選單, 可使用本章中何種元件? 13. 如需在手機上使用 MapView, 需在 AndroidManifest.xml 加入哪項指令?