Microsoft PowerPoint - 07.Android 介面元件-TableLayout、Toast、AlertDialog

Size: px

Start display at page:

Download "Microsoft PowerPoint - 07.Android 介面元件-TableLayout、Toast、AlertDialog"

樽裴姜
6 years ago
Views:

1 計劃名稱 : 104 年度教育部資通訊軟體創新人才推升推廣計畫跨校資源中心 : 雲端運算 ( 國立中山大學 ) 課程名稱 : 網路及平台服務 Part1- 課程教材教材名稱 :Android 介面元件 -TableLayout Toast AlertDialog 國立高雄大學資訊工程學系張保榮教授

2 大綱 TableLayout 版面配置 Toast 版面配置 AlertDialog 版面配置

3 TableLayout 版面配置 TableLayout 是以表格的方式安排版面配置, 只要將元件或資訊放在儲存格中, 顯示時會排列整齊 TableLayout 語法如下 : <TableLayout xmlns:android= idth= fill_parent android:layout_height= fill_parent > <TableRow>.. 設定元件.. </TableRow> <TableRow android:gravity= center >.. 設定元件.. </TableRow> </TableLayout>

4 TableLayout 版面配置 ( 續 ) 資料夾 [res/layout] 內的 activity_main.xml 添加內容, 如下 : 新增二個 TableRow 三個 TextView 二個 EditText

5 TableLayout 版面配置 ( 續 )

6 TableLayout 版面配置 ( 續 ) 修改 [valuse] strings.xml 文件內容新增 xml 語法, 如下所示 :

7 TableLayout 版面配置 ( 續 ) 模擬器測試結果此時只是單純的輸入資料, 並無任何的執行動作

8 TableLayout 版面配置 ( 續 ) 利用 Graphical 方式放置 TableLayout 時,TalbeRow 元件的預設屬性會有 android:layout_width 和 android:layout_height 兩項, 使用者可將其刪除, 更改成 android:gravity = center 元件的排列的屬性設定有兩種方式, 分別為 gravity 與 layout_gravity, 屬性值可設定成 left right center 等三種 gravity: 指元件內的文字靠向哪邊 layout_gravity: 指元件本身放置於父容器的哪邊

9 TableLayout 版面配置 ( 續 ) 設計成如圖的版面請先移除 RelativeLayout, 再重新拉 TableLayouut 共有四個 TableRow 元件, 每個 TableRow 元件各有三個 Button 元件, 並且當使用者點擊確認鍵後, 會顯示密碼是否正確的訊息

10 TableLayout 版面配置 ( 續 ) 資料夾 [res/layout] 內的 activity_main.xml 添加內容, 如下 : 新增四個 TableRow 十二個 Button 一個 TextView 一個 EditText

11 TableLayout 版面配置 ( 續 )

12 TableLayout 版面配置 ( 續 )

13 TableLayout 版面配置 ( 續 )

14 TableLayout 版面配置 ( 續 )

15 TableLayout 版面配置 ( 續 ) 修改 [valuse] strings.xml 文件內容新增 xml 語法, 如下所示 :

16 TableLayout 版面配置 ( 續 ) [src] MainActivity.java 完整程式碼如下先匯入類別元件

17 TableLayout 版面配置 ( 續 ) 取得介面元件 id

18 TableLayout 版面配置 ( 續 ) 利用前一堂課所教的 MultiButton 技巧實現功能

19 TableLayout 版面配置 ( 續 )

20 TableLayout 版面配置 ( 續 ) 建立取得元件內字串的方法

21 TableLayout 版面配置 ( 續 ) 模擬器測試結果當密碼輸入正確時, 會顯示結果告知使用者是否正確請同學試試看如何把輸入的密碼設定成隱藏顯示的方法, 如 : 輸入 ******

22 Toast 元件應用 Toast 是當程式在執行的過程中, 要顯示一個小訊息告訴使用者必要的資訊時, 此訊息必須在短時間內顯示後結束, 以免干擾到使用者 Toast 語法如下 : Toast 變數名稱 = Toast.makeText( 主程式類別.this,Text,Time); 變數名稱.show(); 主程式類別.this: Text: 要顯示的訊息字串 Time: 代表顯示的時間, 設定值分別為 Toast.LENGTH_LONG 和 Toast.LENGTH_SHORT 變數名稱.show(): 將 toast 內容顯示出來

23 Toast 元件應用 ( 續 ) 將 TableCheck App 中的 TextView 元件功能移除, 改成 Toast 方式顯示 : 您的密碼正確

24 Toast 元件應用 ( 續 ) 請照下圖內容, 修改 btnenter 程式碼內容

25 Toast 元件應用 ( 續 ) Toast 預設的顯示位置在畫面的正下方, 當然我們也是可以改變顯示的位置, 依照開發者的喜好設定位置變數名稱.setGravity(Gravity,xOffset,yOffset); Gravity: 常見的屬性值 Gravity.CENTER Gravity.CENTER_HORIZONTAL Gravity.CENTER_VERTICAL Gravity.TOP Gravity.BOTTOM xoffset:x 軸座標值, 例如 :50 yoffset:y 軸座標值, 例如 :95 同學自行設定 Toast 的顯示位置作練習

26 AlertDialog 元件應用 AlertDialog 元件可以想像成與 Toast 元件具有相同的功能, 兩者都可以顯現訊息差別在於, 前者可與使用者產生互動, 而後者只能單純顯示訊息後即結束工作當 AlertDialog 元件顯示訊息後並不會自動消失, 而開發者可製作按鈕功能與使用者互動, 直到使用者退出 AlertDialog 或點擊開發者設計的關閉按鈕動作才結束

27 AlertDialog 元件應用 ( 續 ) AlertDialog 基本形式設定值 settitle() seticon() setmessage() setitems() setpositivebutton() 意義設定 AlertDialog 的標題設定 AlertDialog 的圖示設定 AlertDialog 的內容設定 AlertDialog 的表 ( 項 ) 內容設定 AlertDialog 中加入 Yes 按鈕 setnegativebutton() 設定 AlertDialog 中加入 No 按鈕 setneutralbutton() 設定 AlertDialog 中加入 Ignore 按鈕

28 AlertDialog 元件應用 ( 續 ) AlertDialog 語法如下 : AlertDialog.Builder 變數名稱 =new AlertDialog.Builder( 主程式類別 ) 變數名稱.setTitle( 字串內容 ); 變數名稱.setIcon(R.drawable. 物件名稱 ); 變數名稱.setMessage( 字串內容 ); 變數名稱.show();

29 AlertDialog 元件應用 ( 續 ) 可將上述的語法簡化如下的作法 : new AlertDialog.Builder( 主程式類別 ).settitle( 字串內容 );.seticon(r.drawable. 物件名稱 );.setmessage( 字串內容 );.show(); 建立 AlertDialog 物件的名稱實際上是無意義的, 所以才有簡化的做法, 可以將其語法簡化, 使 AlertDialog 方便開發者使用簡化的語法又可稱為 : 匿名物件的作法

30 AlertDialog 元件應用 ( 續 ) 針對 TableCheck App 增加設計退出的按鈕, 並且當使用者點擊後, 跳出 AlertDialog 訊息來告知使用者是否退出程式, 若使用者欲退出, 則點擊 AlertDialog 上的確定的按鈕, 否的話點擊取消的按鈕, 其他則是設定成忽略的按鈕

31 AlertDialog 元件應用 ( 續 ) [res/layout] 內的 activity_main.xml 添加 Button 元件 : <Button android:id=@+id/btnleave android:layout_width= wrap_content android:layout_height= wrap_content android:text=@string/leave android:onclick=click /> [src] MainActivity.java 新增 Button 程式碼如下 :

32 課堂練習

33 String.xml <string name="num"> 請輸入密碼 </string> <string name="one">1</string> <string name="two">2</string> <string name="three">3</string> <string name="four">4</string> <string name="five">5</string> <string name="six">6</string> <string name="seven">7</string> <string name="eight">8</string> <string name="nine">9</string> <string name="clean"> 清除 </string> <string name="zero">0</string> <string name="check"> 確定 </string> <string name="leave"> 離開 </string>

34 Mainactivity.java import android.app.alertdialog; import android.content.dialoginterface; import android.preference.dialogpreference; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.view.menu; import android.view.menuitem; import android.widget.button; import android.widget.edittext; import android.view.view; import android.widget.toast; public class MainActivity extends AppCompatActivity { public Button btn1,btn2,btn3,btn4,btn5,btn6,btn7,btn8,btn9,btn0,btnclean,btncheck,btnleave; public EditText edit1; public String protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main);

35 edit1=(edittext)findviewbyid(r.id.edittext); btn1=(button)findviewbyid(r.id.button1); btn2=(button)findviewbyid(r.id.button2); btn3=(button)findviewbyid(r.id.button3); btn4=(button)findviewbyid(r.id.button4); btn5=(button)findviewbyid(r.id.button5); btn6=(button)findviewbyid(r.id.button6); btn7=(button)findviewbyid(r.id.button7); btn8=(button)findviewbyid(r.id.button8); btn9=(button)findviewbyid(r.id.button9); btnclean=(button)findviewbyid(r.id.buttonclean); btn0=(button)findviewbyid(r.id.button0); btncheck=(button)findviewbyid(r.id.buttoncheck); btnleave=(button)findviewbyid(r.id.buttonleave); btn1.setonclicklistener(mylistener); btn2.setonclicklistener(mylistener); btn3.setonclicklistener(mylistener); btn4.setonclicklistener(mylistener); btn5.setonclicklistener(mylistener); btn6.setonclicklistener(mylistener); btn7.setonclicklistener(mylistener); btn8.setonclicklistener(mylistener); btn9.setonclicklistener(mylistener); btnclean.setonclicklistener(mylistener); btn0.setonclicklistener(mylistener); btncheck.setonclicklistener(mylistener); btnleave.setonclicklistener(mylistener);

36 private Button.OnClickListener mylistener=new Button.OnClickListener(){ public void onclick(view v){ String str=edit1.gettext().tostring(); switch (v.getid()){ case R.id.button1:{ display(); pass+="1"; break; case R.id.button2:{ display(); pass+="2"; break; case R.id.button3:{ display(); pass+="3"; break; case R.id.button4:{ display(); pass+="4"; break; case R.id.button5:{ display(); pass+="5"; break; case R.id.button6:{ display(); pass+="6"; break;

37 case R.id.button7:{ display(); pass+="7"; break; case R.id.button8:{ display(); pass+="8"; break; case R.id.button9:{ display(); pass+="9"; break; case R.id.buttonclean:{ edit1.settext(""); pass=""; break; case R.id.button0:{ display(); pass+="0"; break; case R.id.buttoncheck:{ if(pass.equals("123456")) { Toast toast=toast.maketext(mainactivity.this," 密碼正確 ",Toast.LENGTH_LONG); toast.show(); else { Toast toast=toast.maketext(mainactivity.this," 密碼錯誤, 請重新輸入 ",Toast.LENGTH_LONG); toast.show(); break;

38 case R.id.buttonleave:{ new AlertDialog.Builder(MainActivity.this).setTitle(" 確認視窗 ").setmessage(" 你確定要關閉程式嗎?").setPositiveButton(" 確定 ", new DialogInterface.OnClickListener() public void onclick(dialoginterface dialog, int which) { finish(); ).setnegativebutton(" 取消 ", new DialogInterface.OnClickListener() public void onclick(dialoginterface dialog, int which) { ).setneutralbutton(" 忽略 ", new DialogInterface.OnClickListener() public void onclick(dialoginterface dialog, int which) { ).show(); break; public void display(){ String strr=edit1.gettext().tostring(); edit1.settext(strr+"*"); ;

39 END

主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new

ListView 自訂排版主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new int[]{r.drawable.dog1, R.drawable.dog2,