Microsoft PowerPoint - 05.Android 介面元件-RelativeLayout、Button、TextVeiw、EditText

計劃名稱 : 104 年度教育部資通訊軟體創新人才推升推廣計畫跨校資源中心 : 雲端運算 ( 國立中山大學 ) 課程名稱 : 網路及平台服務 Part1- 課程教材 教材名稱 :Android 介面元件 -RelativeLayout Button TextVeiw EditText 國立高雄大學資訊工程學系張保榮教授

大綱 RelativeLayout 版面配置 Button 版面配置 TextView 版面配置 EditText 版面配置

RelativelLayout 版面配置 AndroidHello 專案的 [res/layout.xml] activity_main.xml

RelativelLayout 版面配置 ( 續 ) RelativeLayout 代表著配置的 ( 父 ) 容器, 在 RelativeLayout 版面配置中可以加入多個 ( 子 ) 元件的配置 ( 如 : 多個 Button TextView 等等 ) 而所有的( 子 ) 元件的位置都是相對於 ( 父 ) 容器或其兄弟元件來決定 RelativeLayout 語法如下 : <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android>.. 內容.. </RelativeLayout> 父容器 ( 即手機螢幕 ) 子元件

RelativelLayout 版面配置 ( 續 ) RelativeLayout 的版面配置設定為 true 或 false 的屬性, 如下所式 : 屬性名稱 android:layout_centerhorizontal android:layout_centervertical android:layout_centerinparent android:layout_alignparentbotton android:layout_alignparentleft android:layout_alignparentright android:layout_alignparenttop 定義子元件對其父容器橫向中間位置子元件對其父容器縱向中間位置子元件對其父容器中央位置子元件和父容器底部對齊子元件和父容器左側對齊子元件和父容器右側對齊子元件和父容器上緣對齊

RelativelLayout 版面配置 ( 續 ) 除了上述的基本配置設定外, 還有其他設定, 如下圖內容 : Layout_width Layout_height 代表物件的邊長與高度的設定 ( 之後將會說明內容語用法 ) 語法 padding 代表內邊距, 而 margin 代表著外邊距 定義上,padding 指的是子元件的內容與父容器內緣的距離 (padding 與 margin 的比較, 這部份會在下一章節 LinearLayout 再詳細說明 )

RelativelLayout 版面配置 ( 續 ) 元件的 id 設定與屬性配置 屬性名稱 android:id android:layout_ width android:layout_ height android:text 定義 辨識元件的 id, 並自動在 R.java 中建立索引, 再透過此 id 辨識這此元件 設定元件的文字寬度, 單位 :dp 另有 fill_parent match_parent wrap_content, 三種參數用法 設定元件的文字高度, 單位 :dp 另有 fill_parent match_parent wrap_content, 三種參數用法 設定元件顯示的文字名稱 fill_parent match_parent: 填滿整個外框 wrap_content: 依照文字的高度來自動調整高度

RelativelLayout 版面配置 ( 續 ) 元件的四周邊界 屬性名稱 定義 android:layout_marginleft( 單位 dp) 設定元件左側的邊界 android:layout_marginright( 單位 dp) 設定元件右側的邊界 android:layout_margintop( 單位 dp) 設定元件上方的邊界 android:layout_marginbottom( 單位 dp) 設定元件下方的邊界 用法 android:layout_marginleft= 100dp margin 代表著元件到外邊的外邊距

TextView 元件應用 圖形設計介面功能

TextView 元件應用 ( 續 ) TextView 語法用法有兩種 : <TextView>.( 內容 ). </TextView> <TextView>.( 內容 ). /> Ex: <TextView> android:id= @+id/( 元件名稱 ) android: 元件屬性 ( 名稱 )= 屬性值 / 內容 /> 例如 : android:text= Hello World 元件屬性 ( 名稱 ) text 屬性值 / 內容 Hello World

TextView 元件應用 ( 續 )

TextView 元件應用 ( 續 ) TextView 常用的屬性設定 屬性名稱對應的程式碼 (XML) 意義 height android:layout_height 設定元件的文字高度, 單位 :dp 另有 fill_parent match_parent wrap_content, 三種參數用法 width android:layout_width 設定元件的文字寬度, 單位 :dp 另有 fill_parent match_parent wrap_content, 三種參數用法 text android:text 設定欲顯示的文字內容 id android:id 設定元件的名稱 text color android:textcolor 設定元件的文字顏色, 單位 :#RGB 格式 ( 十六進位 制 ) 表示 如 :#FF0000, 代表紅色 text size android:textsize 設定文字的大小, 單位 :sp

TextView 元件應用 ( 續 ) 新增一個 TextView 設定 TextView 屬性 :id textcolor textsize text 等內容

TextView 元件應用 ( 續 ) 修改 [valuse] strings.xml 文件內容 新增一筆 xml 語法, 如下所示 :

TextView 元件應用 ( 續 ) TextView 的衍伸元件 :LargeText MediumText SamllText XML 語法如下 : LargeText:TextAppearance=?android:attr/terxtAppearance Large MediumText:TextAppearance=?android:attr/terxtAppearan cemedium SamllText:TextAppearance=?android:attr/terxtAppearance Small 分別為顯示大 中 小三種字體的用法

EditText 元件應用 設定 LargeText MediumText SamllText 的屬性 :id text textcolor, 如下圖所示 : 設定元件內容 字體顏色與大小

EditText 元件應用 ( 續 ) EditText 語法用法 : <EditText>.( 內容 ). /> Ex: <EditText> android:id= @+id/( 元件名稱 ) android: 元件屬性 ( 名稱 )= 屬性值 / 內容 /> 例如 : android:inputtype= text 元件屬性 ( 名稱 ) inputtype 屬性值 / 內容 text, 目的是讓使用者自行輸入字串 <requestfocus></ requestfocus >, 加入此行在 EditText 語法的內容位置, 功能在於程式執行時, 輸入線直接移至 ( 固定 )EditText 元件上

EditText 元件應用 ( 續 ) EditText 元件常用的屬性 : 屬性名稱對應的程式碼 (XML) 意義 lines android:line 設定最多可以顯示的列數 ems android:ems 設定每一烈的字元數, 此用法必須搭配屬 性 :width 的設定為 wrap_content, 一同使用 editable android:editable 設定 EditText 是否可輸入文字 enabled android:enabled 設定 EditText 是否可被使用 password android:password 設定輸入文字後, 將文字以密碼文 (*) 方式顯 示於畫面 single line android:singleline 設定 EditText 可輸入的列數,true: 只能一 列 ;false: 可以多列 hint android:hint 設定 EditTex 欄位值為空時, 顯示出提示訊 息

EditText 元件應用 ( 續 ) 新增三個 EditText 設定 hint inputtype

EditText 元件應用 ( 續 )

Button 元件應用 建立 DemoButton App 程式名稱 專案名稱 類別名稱自訂 最小的 SDK 請選擇 Android 2.3.3 以上版本 Complie With 請選 android 4.0.3 版本的 Google APIs 15 Activity Name Layout Name 名稱自訂

Button 元件應用 ( 續 ) Button 語法用法 : <Button>.( 內容 ). /> Ex: <Button> android:id= @+id/( 元件名稱 ) android: 元件屬性 ( 名稱 )= 屬性值 / 內容 /> 例如 : android:text= 按一下 元件屬性 ( 名稱 ) text 屬性值 / 內容 按一下

Button 元件應用 ( 續 ) 新增一個 TextView 與 Button 設定屬性 :id text 等內容

Button 元件應用 ( 續 ) 點擊 Button 元件時, 應該有發現並沒有發生任何變化, 這是因為我們尚未賦予 Button 啟動功能的程式碼 接下來要實作出, 當我們點擊 Button 後, 改變 TextView 的內容 實作 Button 的運作可分成兩種作法 : 傳統式與改良式, 傳統式方法是在 oncreate 中加入 setonclicklistener() 的方法先取得 Button 元件後再來監督按鈕的執行 ; 而改良式的方法是直接實作在 Button 功能上, 換個方式說, 當手機用戶按下按鈕時, 便會直接呼叫該按鈕的方法, 並執行方法裡頭的程式運算動作

Button 元件應用 ( 續 ) 傳統式作法 : 匯入要使用的元件 宣告使用的元件變數名稱 使用監聽方式實現作法

Button 元件應用 ( 續 ) 改良式作法 : 加入 onclick 屬性

Button 元件應用 ( 續 ) 改良式作法 : 名稱為 onclick 設定的名稱

執行結果 :

Button 元件應用 ( 續 ) 傳統式與改良式的執行結果雖然都是相同的, 但改良式的作法除了程式簡潔明瞭之外, 執行的速度上也會比較快 而傳統式的作法, 在程式執行到 oncreate 步驟時, 加入了監聽的方法 setonclicklistener(), 此時 Button 每次都要回報系統 ( 監聽 ), 成功後才執行功能

Share Multi Button 應用 設計播打電話的按鈕介面, 需要下列元件與設定值 : TextView id:textview1 text: hint: @string/txt1 Button * 9 id:btnzero~btnnine txt: @string/btn0 ~ @string/btn9 onclick:button0~button9 Button * 2 id:btntest1( 符號代表 :*)~btntext2( 符號代表 :#) txt: @string/btn10 ~ @string/btn11 onclick:button10~button11

Share Multi Button 應用 ( 續 ) 使用 setonclicklistener() 資料夾 [res/values] 內的 strings.xml 添加內容, 如下 : <string name="txt1"> 電話號碼 :</string> <string name="btn0">0</string> <string name="btn1">1</string> <string name="btn2">2</string> <string name="btn3">3</string> <string name="btn4">4</string> <string name="btn5">5</string> <string name="btn6">6</string> <string name="btn7">7</string> <string name="btn8">8</string> <string name="btn9">9</string> <string name="btn10">*</string> <string name="btn11">#</string>

Share Multi Button 應用 ( 續 ) 資料夾 [res/layout] 內的 activity_main.xml 添加內容, 如下 : <TextView android:id="@+id/textview1" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="@string/txt1" android:textcolor="#ffffff" android:textsize="24sp"/> <Button android:id="@+id/btnone" android:layout_width="90dp" android:layout_height="80dp" android:layout_alignbottom="@+id/btntwo" android:layout_toleftof="@+id/btntwo" android:layout_marginright="10dp" android:text="@string/btn1" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn" />

Share Multi Button 應用 ( 續 ) <Button android:id="@+id/btntwo" android:layout_width="90dp" android:layout_height="80dp" android:layout_below="@+id/textview1" android:layout_centerhorizontal="true" android:layout_margintop="20dp" android:text="@string/btn2" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn" /> <Button android:id="@+id/btnthree" android:layout_width="90dp" android:layout_height="80dp" android:layout_marginleft="10dp" android:layout_alignbottom="@+id/btntwo" android:layout_torightof="@+id/btntwo" android:text="@string/btn3" android:textcolor="#ffffff" android:textsize="24sp" <Button android:id="@+id/btnfour" android:layout_width="90dp" android:layout_height="80dp" android:layout_alignbottom="@+id/btnfive" android:layout_toleftof="@+id/btnfive" android:layout_marginright="10dp" android:text="@string/btn4" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/> <Button android:id="@+id/btnfive" android:layout_width="90dp" android:layout_height="80dp" android:layout_below="@+id/btntwo" android:layout_centerhorizontal="true" android:layout_margintop="10dp" android:text="@string/btn5" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/>

Share Multi Button 應用 ( 續 ) <Button android:id="@+id/btnsix" android:layout_width="90dp" android:layout_height="80dp" android:layout_marginleft="10dp" android:layout_alignbottom="@+id/btnfive" android:layout_torightof="@+id/btnfive" android:text="@string/btn6" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/> <Button android:id="@+id/btnseven" android:layout_width="90dp" android:layout_height="80dp" android:layout_alignbottom="@+id/btneight" android:layout_toleftof="@+id/btneight" android:layout_marginright="10dp" android:text="@string/btn7" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/> <Button android:id="@+id/btneight" android:layout_width="90dp" android:layout_height="80dp" android:layout_below="@+id/btnfive" android:layout_centerhorizontal="true" android:layout_margintop="10dp" android:text="@string/btn8" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/> <Button android:id="@+id/btnnine" android:layout_width="90dp" android:layout_height="80dp" android:layout_marginleft="10dp" android:layout_alignbottom="@+id/btneight" android:layout_torightof="@+id/btneight" android:text="@string/btn9" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/>

Share Multi Button 應用 ( 續 ) <Button android:id="@+id/btnstar" android:layout_width="90dp" android:layout_height="80dp" android:layout_alignbottom="@+id/btnzero" android:layout_toleftof="@+id/btnzero" android:layout_marginright="10dp" android:text="@string/btn10" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/> <Button android:id="@+id/btnzero" android:layout_width="90dp" android:layout_height="80dp" android:layout_below="@+id/btneight" android:layout_centerhorizontal="true" android:layout_margintop="10dp" android:text="@string/btn0" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/> <Button android:id="@+id/btnhash" android:layout_width="90dp" android:layout_height="80dp" android:layout_marginleft="10dp" android:layout_alignbottom="@+id/btnzero" android:layout_torightof="@+id/btnzero" android:text="@string/btn11" android:textcolor="#ffffff" android:textsize="24sp" android:onclick="btn"/>

Share Multi Button 應用 ( 續 ) 資料夾 [src] 內的 MainActivity.java 添加內容, 如下 : 匯入使用的元件 import android.view.view; import android.widget.button; import android.widget.textview; 宣告元件變數名稱 private TextView txtshow; private Button btnzero,btnone,btntwo,btnthree,btnfour; private Button btnfive,btnsix,btnseven,btneight,btnnine;

Share Multi Button 應用 ( 續 ) oncreate() 主體位置內添加內容 : // 取得資源類別檔中的介面元件 txtshow=(textview)findviewbyid(r.id.txtshow); btnzero=(button)findviewbyid(r.id.btnzero); btnone=(button)findviewbyid(r.id.btnone); btntwo=(button)findviewbyid(r.id.btntwo); btnthree=(button)findviewbyid(r.id.btnthree); btnfour=(button)findviewbyid(r.id.btnfour); btnfive=(button)findviewbyid(r.id.btnfive); btnsix=(button)findviewbyid(r.id.btnsix); btnseven=(button)findviewbyid(r.id.btnseven); btneight=(button)findviewbyid(r.id.btneight); btnnine=(button)findviewbyid(r.id.btnnine);

Share Multi Button 應用 ( 續 ) oncreate() 位置添加內容 : // 設定 button 元件 Click 事件共用 mylistner btnzero.setonclicklistener(mylistner); btnone.setonclicklistener(mylistner); btntwo.setonclicklistener(mylistner); btnthree.setonclicklistener(mylistner); btnfour.setonclicklistener(mylistner); btnfive.setonclicklistener(mylistner); btnsix.setonclicklistener(mylistner); btnseven.setonclicklistener(mylistner); btneight.setonclicklistener(mylistner); btnnine.setonclicklistener(mylistner);

Share Multi Button 應用 ( 續 ) 實作出 setonclicklistener(mylistner) // 定義 onclick() 方法 private Button.OnClickListener mylistner = new Button.OnClickListener(){ @Override public void onclick(view v){ String s=txtshow.gettext().tostring(); switch (v.getid()){ case R.id.btnZero:{ txtshow.settext(s + "0"); break; } case R.id.btnOne:{ txtshow.settext(s + "1"); break; } case R.id.btnTwo:{ txtshow.settext(s + "2"); break; } case R.id.btnThree:{ txtshow.settext(s + "3"); break;

Share Multi Button 應用 ( 續 ) }; } } case R.id.btnFour:{ txtshow.settext(s + "4"); break; } case R.id.btnFive:{ txtshow.settext(s + "5"); break; } case R.id.btnSix:{ txtshow.settext(s + "6"); break; } case R.id.btnSeven:{ txtshow.settext(s + "7"); break; } case R.id.btnEight:{ txtshow.settext(s + "8"); break; } case R.id.btnNine:{ txtshow.settext(s + "9"); break; }

Share Multi Button 應用 ( 續 ) 設計播打電話的按鈕介面, 需要下列元件與設定值 : TextView id:textview1 text: hint: @string/txt1 Button * 9 id:btnzero~btnnine txt: @string/btn0 ~ @string/btn9 onclick:button0~button9 Button * 2 id:btntest1( 符號代表 :*)~btntext2( 符號代表 :#) txt: @string/btn10 ~ @string/btn11 onclick:button10~button11

模擬器執行結果 :

END