Android User Interfaces Hsiao-Lung Chan, Ph.D. Dept Electrical Engineering Chang Gung University, Taiwan chanhl@maili.cgu.edu.tw
Basic control components Text components TextView EditText Button compoents Button ImageButton ToggleButton Selection components CheckBox RadioGroup & RadioButton ImageView Android 2
Button Our first example Android 3
Step1 在 Package Explorer 展開 res\layout 資料夾, 按二下 main.xml 開啟使用介面定義的 XML 檔, 進入圖形配置 (Graphical Layout) 檢視 Android 4
Step2 請按左上角的第 2 個 Zoom to Fit 鈕放大成最適視窗的尺寸, 並在左邊 Palette 調色盤視窗, 拖拉 Button 元件至 TextView 元件之下, 就可以新增圖形使用介面 Android 5
Step3 選上方的 TextView 元件, 右鍵點選 Show In Properties, 或者執行 Window/Show View/Properties 指令來顯示, 可以看到屬性清單 Android 6
Step4 請捲動視窗找到 Id 屬性, 在 Id 屬性欄位輸入屬性值 @+id/txtoutput, 表示元件名稱為 txtoutput Android 7
Step5 在上方選 Button 元件, 然後在下方 Properties 屬性標籤更改屬性值 1. On click button1_click 2.Text 請按我 Android 8
Step6 請展開 res/values 資料夾, 按二下 strings.xml 開啟字串資源的 XML 檔, 進入資源編輯器 (Resources) Android 9
Step7 在左邊選 hello, 然後在右邊的 Value 欄輸入新值第一個 Android 應用程式, 同樣方式, 請將 app_name 的值改為範例一 Android 10
Step8 請展開 src 資料夾, 按兩下 TestActivity.java 開啟 Java 類別程式碼編輯器, 輸入事件處理方法的程式碼 Android 11
Ex1Activity.java public class Ex1Activity extends Activity { /** Called when the activity is first created. */ @Override 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
Step 9 執行 Run/Run 指令或按 Ctrl+F11 鍵 Android 13
Step 10 按下 請按我 Android 14
Exercise 1 請依照範例一做出有三個 Button 分別為改變文字內容改變文字大小改變文字顏色的 Android App 註 : 內容按鈕按了請將內容改為 嵌入式系統與實驗 大小按鈕按了請將文字大小改為 50 顏色按鈕按了請將顏色改為 0xFF008080 Android 15
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
Exercise 1 Android 17
Exercise 1 (cont.) Android 18
Exercise 1 (cont.) Android 19
Exercise 1 (cont.) Android 20
Exercise 2: Computing interest Android 21
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
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
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
Exercise 2 (cont.) Android 25
Exercise 3: Greatest common divisor & Least common multiple Android 26
Exercise 3 (cont.) Android 27
Exercise 4: Using checkbox Android 28
Exercise 4 (cont.) Android 29
Exercise 5: Using radio buttons Android 30
Exercise 5 (cont.) Android 31
Exercise 5 (cont.) Android 32
Exercise 6: Change screen orientation Android 33
Exercise 6 (cont.) public class Testf1Activity extends Activity implements OnCheckedChangeListener{ private ToggleButton toggle; @Override 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
Exercise 7: Image button Android 35
Exercise 7 (cont.) Android 36
Exercise 7 (cont.) Android 37
Exercise 8: radiogroup & imageview Android 38
public class Testf3Activity extends Activity { private ImageView image; private RadioGroup radiogroup; private RadioButton rdb01; @Override 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
Exercise 9: Dialogue Android 40
Exercise 9 (cont.) public class Testf4Activity extends Activity { @Override 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
Android 42
Exercise 10: Dialogue & action Android 43
Exercise 10 (cont.) public class Testf6Activity extends Activity { private AlertDialog dialog; @Override 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
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
Exercise 11: Dialogue & action Android 46
Exercise 11 (cont.) Android 47
Exercise 11 (cont.) Android 48
Exercise 11 (cont.) Android 49
Exercise 12: Dialogue & multiple actions Android 50
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 phandler; @Override 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
@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
// 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
Exercise 13: Dialogue & Calendar Android 54
public class Testf9Activity extends Activity { static final int DATE_DIALOG_ID = 0; static final int TIME_DIALOG_ID = 1; Calendar dt = Calendar.getInstance(); @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Android 55
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
case TIME_DIALOG_ID: // 傳回 TimePickerDialog 對話方塊 TimePickerDialog tdialog = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() { @Override 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
public void button1_click(view view) { showdialog(date_dialog_id); // 顯示對話方塊 public void button2_click(view view) { showdialog(time_dialog_id); // 顯示對話方塊 Android 58
Exercise 14: My dialogue Android 59
Android 60
Android 61