The Embedded computing platform

Size: px

Start display at page:

Download "The Embedded computing platform"

蝴染廖
5 years ago
Views:

1 Android User Interfaces Hsiao-Lung Chan, Ph.D. Dept Electrical Engineering Chang Gung University, Taiwan

2 Basic control components Text components TextView EditText Button compoents Button ImageButton ToggleButton Selection components CheckBox RadioGroup & RadioButton ImageView Android 2

3 Button Our first example Android 3

$Step1 在 Package Explorer 展開 res\layout 資料夾, 按二下 main.$

4 Step1 在 Package Explorer 展開 res\layout 資料夾, 按二下 main.xml 開啟使用介面定義的 XML 檔, 進入圖形配置 (Graphical Layout) 檢視 Android 4

5 Step2 請按左上角的第 2 個 Zoom to Fit 鈕放大成最適視窗的尺寸, 並在左邊 Palette 調色盤視窗, 拖拉 Button 元件至 TextView 元件之下, 就可以新增圖形使用介面 Android 5

6 Step3 選上方的 TextView 元件, 右鍵點選 Show In Properties, 或者執行 Window/Show View/Properties 指令來顯示, 可以看到屬性清單 Android 6

7 Step4 請捲動視窗找到 Id 屬性, 在 Id 表示元件名稱為 txtoutput Android 7

8 Step5 在上方選 Button 元件, 然後在下方 Properties 屬性標籤更改屬性值 1. On click button1_click 2.Text 請按我 Android 8

9 Step6 請展開 res/values 資料夾, 按二下 strings.xml 開啟字串資源的 XML 檔, 進入資源編輯器 (Resources) Android 9

10 Step7 在左邊選 hello, 然後在右邊的 Value 欄輸入新值第一個 Android 應用程式, 同樣方式, 請將 app_name 的值改為範例一 Android 10

11 Step8 請展開 src 資料夾, 按兩下 TestActivity.java 開啟 Java 類別程式碼編輯器, 輸入事件處理方法的程式碼 Android 11

12 Ex1Activity.java public class Ex1Activity extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); public void button1_click(view view){ Find component index from resource file (R.java) TextView output = (TextView) findviewbyid(r.id.txtoutput); output.settext(" 第二個 Android 應用程式 "); 輸入事件處理方法的程式碼註 : 在輸入方法參數 View view 時, 可以看到 View 之下紅色的鋸齒線, 表示有錯誤, 此時請將游標移至錯誤上, 可以看到浮動視窗顯示的解決方法, 因為沒有匯入此類別, 請選第 1 個選項 Import View, 讓 Eclipse IDE 自動匯入此類別 Android 12

13 Step 9 執行 Run/Run 指令或按 Ctrl+F11 鍵 Android 13

14 Step 10 按下請按我 Android 14

15 Exercise 1 請依照範例一做出有三個 Button 分別為改變文字內容改變文字大小改變文字顏色的 Android App 註 : 內容按鈕按了請將內容改為嵌入式系統與實驗大小按鈕按了請將文字大小改為 50 顏色按鈕按了請將顏色改為 0xFF Android 15

16 Exercise 1: Change values of TextView components public void button1_click(view view){ TextView output = (TextView) findviewbyid(r.id.txtoutput); output.settext( 嵌入式系統與實驗 ); public void button2_click(view view){ TextView output = (TextView) findviewbyid(r.id.txtoutput); output.settextsize(30); public void button3_click(view view){ TextView output = (TextView) findviewbyid(r.id.txtoutput); output.settextcolor(color.blue); Android 16

17 Exercise 1 Android 17

18 Exercise 1 (cont.) Android 18

19 Exercise 1 (cont.) Android 19

20 Exercise 1 (cont.) Android 20

21 Exercise 2: Computing interest Android 21

22 Exercise 2 (cont.) 1. 打開 res/values/strings.xml, 修改 app_name 的值為整存整付計算機 2. 在左方的 Palette 打開 Form Widgets 工具箱加入 TextView, 使用右鍵選單的 Edit Text 功能, 打開 Resource Chooser 視窗點選 New String 按鈕, 打開 Create New Android String 視窗在 String 文字方塊輸入整存整試算 :, 在 New R.string 文字方塊輸入 title 按 OK 回到 Resource Chooser, 選擇剛才加入的 title 並按下 OK, 回到裝置預覽畫面此時 TextView 顯示的文字內容, 就會變成整存整付試算 : Android 22

23 Exercise 2 (cont.) 3. 加入 TextView, 設定 String 為本金 (NT$): New R.string 為 lend 4. 在左方的 Palette 打開 Text Fields 工具箱加入 Plain Text, 從右鍵選單選擇 Edit ID... 並將 New Id 修改為 input_lend 從右鍵選單的 InputType 勾選 NumberDecimal, 將輸入類型限制為數值 ( 整數 ) 5. 加入 TextView, 設定 String 為年利率 (%): New R.string 為 rate 6. 加入 EditText, 設定 New Id 為 input_rate,inputtype 勾選 Number 7. 加入 TextView, 設定 String 為存款期數 : New R.string 為 number Android 23

24 Exercise 2 (cont.) 8. 加入 EditText, 設定 New Id 為 input_number, InputType 勾選 NumberDecimal 9. 從 Palette 的 Form Widgets 工具箱, 加入 Button 按鈕使用 Edit Text 設定 New String, 設定 String 為計算本利和, 設定 New R.string 為 btn 使用 Edit ID 設定 New Id 為 submit 使用右鍵選單的 Layout Width 勾選 Fill Parent( 自動調整寬度為畫面大小 ) 10. 加入 Plain Text, 使用 Edit Text, 並在 Resource Chooser 按下 Clear 按鈕, 清除預設文字內容使用 Edit ID 將 New Id 修改為 amount 11. 打開 src 資料夾下的.java 程式碼, 修改如下 : Android 24

25 Exercise 2 (cont.) Android 25

26 Exercise 3: Greatest common divisor & Least common multiple Android 26

27 Exercise 3 (cont.) Android 27

28 Exercise 4: Using checkbox Android 28

29 Exercise 4 (cont.) Android 29

30 Exercise 5: Using radio buttons Android 30

31 Exercise 5 (cont.) Android 31

32 Exercise 5 (cont.) Android 32

33 Exercise 6: Change screen orientation Android 33

34 Exercise 6 (cont.) public class Testf1Activity extends Activity implements OnCheckedChangeListener{ private ToggleButton public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); toggle = (ToggleButton) findviewbyid(r.id.togglebtn); toggle.setoncheckedchangelistener(this); // 實作介面方法 public void oncheckedchanged(compoundbutton buttonview, boolean ischecked) { if (ischecked) else setrequestedorientation(activityinfo.screen_orientation_landscape); setrequestedorientation(activityinfo.screen_orientation_portrait); ; Android 34

35 Exercise 7: Image button Android 35

36 Exercise 7 (cont.) Android 36

37 Exercise 7 (cont.) Android 37

38 Exercise 8: radiogroup & imageview Android 38

39 public class Testf3Activity extends Activity { private ImageView image; private RadioGroup radiogroup; private RadioButton public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); radiogroup = (RadioGroup) findviewbyid(r.id.rdgimage); rdb01 = (RadioButton) findviewbyid(r.id.rdbrabbit); image = (ImageView) findviewbyid(r.id.image); radiogroup.setoncheckedchangelistener(listener); private RadioGroup.OnCheckedChangeListener listener = new RadioGroup.OnCheckedChangeListener() { public void oncheckedchanged(radiogroup group, int checkedid) { ; if (checkedid == rdb01.getid()) image.setimageresource(r.drawable.rabbit); else image.setimageresource(r.drawable.mouse); Android 39

40 Exercise 9: Dialogue Android 40

41 Exercise 9 (cont.) public class Testf4Activity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); public void button1_click(view view) { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.settitle( 關於 ); builder.setmessage( 版本 : 1.0 版 \n 作者 : 陳會安 ); builder.setpositivebutton(" 確定 ", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialoginterface, int i) { ); builder.show(); // 顯示對話方塊 Android 41

42 Android 42

43 Exercise 10: Dialogue & action Android 43

44 Exercise 10 (cont.) public class Testf6Activity extends Activity { private AlertDialog public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.settitle(" 選擇一個確認 "); String[] options = {" 紅色 ", " 黃色 ", " 綠色 " ; builder.setitems(options, listener); builder.setnegativebutton(" 取消 ", null); dialog = builder.create(); // 建立對話方塊 Android 44

45 Exercise 10 (cont.) // 對話方塊選項的傾聽者物件 DialogInterface.OnClickListener listener = new DialogInterface.OnClickListener() { ; public void onclick(dialoginterface dialog, int which) { Button btn = (Button) findviewbyid(r.id.button1); switch (which){ case 0: btn.setbackgroundcolor(color.red); break; case 1: btn.setbackgroundcolor(color.yellow); break; case 2: btn.setbackgroundcolor(color.green); break; public void button1_click(view view) { dialog.show(); // 顯示對話方塊 Android 45

46 Exercise 11: Dialogue & action Android 46

47 Exercise 11 (cont.) Android 47

48 Exercise 11 (cont.) Android 48

49 Exercise 11 (cont.) Android 49

50 Exercise 12: Dialogue & multiple actions Android 50

51 public class Testf8Activity extends Activity { String[] items = {"Android", "ios", "Windows Mobile"; boolean[] itemschecked = new boolean[items.length]; private ProgressDialog pdialog; private int p = 0; private Handler public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); phandler = new Handler() { public void handlemessage(message msg) { super.handlemessage(msg); if ( p >= 100 ) { pdialog.dismiss(); TextView output = (TextView) findviewbyid(r.id.lbloutput); output.settext(" 下載已完成..."); else { p++; pdialog.incrementprogressby(1); phandler.sendemptymessagedelayed(0,50); ; Android 51

52 @Override protected Dialog oncreatedialog(int id) { switch (id) { case 0: // 傳回 AlertDialog 對話方塊. case 1: // 傳回 ProgressDialog 對話方塊 pdialog = new ProgressDialog(this); pdialog.settitle(" 下載檔案..."); pdialog.setprogressstyle(progressdialog.style_horizontal); pdialog.setbutton(dialoginterface.button_positive, " 隱藏 ", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { Toast.makeText(Testf8Activity.this, 隱藏下載對話方塊..., Toast.LENGTH_SHORT).show(); ); pdialog.setbutton(dialoginterface.button_negative, " 取消 ", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { Toast.makeText(Testf8Activity.this, 取消下載..., Toast.LENGTH_SHORT).show(); ); return pdialog; return null; Android 52

53 // button2 事件處理程序 public void button2_click(view view) { TextView output = (TextView) findviewbyid(r.id.lbloutput); output.settext(""); showdialog(1); // 顯示對話方塊 p = 0; // 重設 p pdialog.setprogress(0); phandler.sendemptymessage(0); // button1 事件處理程序 public void button1_click(view view) { showdialog(0); // 顯示對話方塊 Android 53

54 Exercise 13: Dialogue & Calendar Android 54

55 public class Testf9Activity extends Activity { static final int DATE_DIALOG_ID = 0; static final int TIME_DIALOG_ID = 1; Calendar dt = public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Android 55

56 protected Dialog oncreatedialog(int id) { switch (id) { case DATE_DIALOG_ID: // 傳回 DatePickerDialog 對話方塊 DatePickerDialog ddialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() { public void ondateset(datepicker view, int year, int monthofyear, int dayofmonth) { TextView output = (TextView) findviewbyid(r.id.lbloutput); output.settext(integer.tostring(year) + "/" + Integer.toString(monthOfYear+1) + "/" + Integer.toString(dayOfMonth));, dt.get(calendar.year), dt.get(calendar.month), dt.get(calendar.day_of_month)); return ddialog; Android 56

57 case TIME_DIALOG_ID: // 傳回 TimePickerDialog 對話方塊 TimePickerDialog tdialog = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() public void ontimeset(timepicker view, int hourofday, int minute) { TextView output = (TextView) findviewbyid(r.id.lbloutput); output.settext(integer.tostring(hourofday) + ":" + Integer.toString(minute));, dt.get(calendar.hour),dt.get(calendar.minute),true); return tdialog; return null; public void button1_click(view view) { showdialog(date_dialog_id); // 顯示對話方塊 public void button2_click(view view) { showdialog(time_dialog_id); // 顯示對話方塊 Android 57

58 public void button1_click(view view) { showdialog(date_dialog_id); // 顯示對話方塊 public void button2_click(view view) { showdialog(time_dialog_id); // 顯示對話方塊 Android 58

59 Exercise 14: My dialogue Android 59

60 Android 60

61 Android 61

res/layout 目录下的 main.xml 源码 : <?xml version="1.0" encoding="utf 8"?> <TabHost android:layout_height="fill_parent" xml

res/layout 目录下的 main.xml 源码 : <?xml version=1.0 encoding=utf 8?> <TabHost android:layout_height=fill_parent xml 拓展训练 1- 界面布局 1. 界面布局的重要性做应用程序, 界面是最基本的 Andorid 的界面, 需要写在 res/layout 的 xml 里面, 一般情况下一个 xml 对应一个界面 Android 界面布局有点像写 html( 连注释代码的方式都一样 ), 要先给 Android 定框架, 然后再在框架里面放控件,Android 提供了几种框架,AbsoluteLayout,LinearLayout,