Ch04 使用基本介面元件與編排模式 物件導向系統實務.

Presentation on theme: "Ch04 使用基本介面元件與編排模式 物件導向系統實務."— Presentation transcript:

1 Ch04 使用基本介面元件與編排模式 物件導向系統實務

2 大綱 介面元件的屬性 介面編排：LinerLayout、TableLayout、RelativeLayout

3 介面元件的屬性

4 常用的介面元件屬性 屬性名稱 設定值 使用說明 android:id 元件的名稱 設定該介面元件的名稱
android:layout_width android:layout_height fill_parent, match_parent, wrap_content 設定元件的寬和高，fill_parent是舊的屬性值 android:text 元件中的文字 顯示在元件中的文字 android:inputType Text, number, date, time, … 輸入的資料類型，textMultiLine是多行文字 android:background 顏色(6個16進位數字，例如FF0000) 儲存在drawable資料夾中的圖形 設定元件的底色或底圖，顏色以#開頭 android:textSize 數值和sp長度單位 設定文字大小 android:textColor 顏色 設定文字顏色，顏色以#開頭 android:password true, false 用暗碼顯示防止被他人窺視，新版的程式改成用inputType屬性控制 android:autoLink web, , phone, map, all 自動偵測字串中的超連結資料 android:hint 元件中的提示文字 當EditText元件中沒有輸入任何資料時所顯示的字串 android:layout_margin android:layout_marginXXX 數值和dp長度單位 設定元件四周的間隔距離 android:padding android:paddingXXX 設定元件內部的文字和邊的距離 android:gravity center_hotizontal, center_vertical, center 元件中的物件的對齊方式 android:layout_gravity 元件相對於外框的對齊方式

5 介面元件屬性使用的長度單位 Android SDK建議如果是設定介面元件的位置、大小、和邊界距離的相關屬性應該使用dp長度單位，如果是設定字體大小的相關屬性，則應該使用sp長度單位。

6 match_parent和wrap_content的差別
match_parent和fill_parent的效果是一樣的，二者都是填滿元件所在的外框，wrap_content則是依照元件中的文字長度或高度來決定元件的寬或高。 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="EditText1" /> android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="EditText2" />

7 android:inputType範例 用來限制輸入的字元種類，如果設定成text就能夠輸入任何字元，如果設定成number就只能輸入數字，當設定成date時可以輸入數字和斜線’/’字元，當設定成time時則可以輸入數字和分號’:’字元以及pam等3個英文字母 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="" android:inputType="text" /> android:inputType="number" /> android:inputType="date" /> android:inputType="time" />

8 控制文字大小、顏色和底色 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="預設的文字大小" /> android:text="10sp文字" android:textSize="10sp“ /> android:text="20sp綠色文字" android:textSize="20sp" android:textColor="#00FF00" /> android:text="30sp綠色文字，黑色底色" android:textSize="30sp" android:textColor="#00FF00" android:background="#000000" /> 使用android:textSize、android:textColor、android:background來改變文字的大小、顏色，以及元件的底色

9 控制元件四周的間隔距離以及元件內部的文字和邊的距離
使用margin相關屬性來增加元件和外框之間的距離，以及使用padding相關屬性來增加元件內的文字和元件邊框的距離 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="預設的間隔" /> android:text="設定padding=20dp" android:padding="20dp" /> android:text="再設定margin=20dp" android:padding="20dp" android:layout_margin="20dp" /> android:text="只設定左右margin=30dp" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" />

10 介面編排：LinerLayout、TableLayout、RelativeLayout

11 LinearLayout範例 LinearLayout標籤是一種介面元件的編排方式，顧名思義它 就是依照線性次序由上往下（或是由左而右）逐一排列介面 元件。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“matchl_parent“ > <TextView … android:text="姓名：" /> <EditText … android:text="輸入姓名" /> <Button … android:text="確定" /> </LinearLayout>

12 水平排列的LinearLayout <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_width=“match_parent" android:layout_height=“match_parent" > <TextView … android:layout_width="wrap_content" android:text="姓名：" /> <EditText … android:text="輸入姓名" /> <Button … android:text="確定" /> </LinearLayout>

13 二層LinearLayout <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" android:orientation="vertical" … > <LinearLayout android:orientation="horizontal“ android:background="#FFFFFF" … > <TextView … android:textColor="#000000" android:text="姓名：" /> <EditText… android:text="輸入姓名" /> </LinearLayout> <Button … android:text="確定" />

14 TableLayout範例 TableLayout就是把介面元件依照表格的方式排列，也就是由 上往下一列接著一列，而且前後每一個欄位依序對齊。<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="400dp" android:layout_height="match_parent" android:layout_gravity="center_horizontal" > <TableRow> <TextView android:text="姓名："/> <TextView android:text="性別："/> <TextView android:text="生日："/> </TableRow> <EditText android:text="輸入姓名"/> <EditText android:text="輸入性別"/> <EditText android:text="輸入生日"/> <Button android:text="確定"/> </TableLayout>

15 使用TableLayout的注意事項 1. 包裹在TableRow標籤中的介面元件它的 android:layout_width和 android:layout_height屬性都沒有作用，也就 是說不管把它們的值設定為” match_parent” 或是”wrap_content”，都一律使 用”wrap_content”模式，因此可以直接把這二 個屬性省略。

16 使用TableLayout的注意事項 2. 像是android:backgroud設定底色的屬性、 android:gravity設定對齊方式的屬性、和 android:layout_margin設定元件的距離等類似功能的屬 性都可以用於TableLayout和TableRow標籤中，例如可 以在上面範例的第一個TableRow標籤中加入 android:gravity=“center_horizontal”就可以將第一列 的介面元件做水平置中對齊。

17 使用TableLayout的注意事項 3. 如果TableLayout標籤中的介面元件沒有被包含 在TableRow標籤中，則該元件會自成一列如上 面範例的Button元件。

18 使用TableLayout的注意事項 如果要讓TableRow標籤中的元件依比例使用整個Table的寬度，可 以藉助android:layout_weight屬性，它會將同一列元件所有的 weight值加總後，再依照每一個元件的weight值的比例計算所佔的 寬度。 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="400dp" android:layout_height="match_parent" android:layout_gravity="center_horizontal" > <TableRow> <TextView android:text="姓名：" android:layout_weight="1"/> <TextView android:text="性別：" <TextView android:text="生日：" </TableRow> …

19 使用TableLayout的注意事項 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" … > <TableLayout … > <TableRow> <TextView android:text="姓名："/> … </TableRow> <EditText android:text="輸入姓名"/> </TableLayout> <Button android:text="確定"/> 如果希望TableLayout 標籤中的TableRow內元 件可以錯開如下的畫面， 可以在TableLayout標 籤中再增加一個 TableLayout標籤

20 RelativeLayout範例 RelativeLayout是靠指定介面元件之間的相對位置關係來決定它們的排列 方式，為了能夠辨識每一個元件，我們必須指定每一個元件的id名稱。 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout … > <TextView …/> <TextView … <EditText <EditText <Button </RelativeLayout>

21 RelativeLayout範例（加上align屬性）
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout … > <TextView …/> <TextView … <EditText <EditText <Button </RelativeLayout>

22 RelativeLayout相關屬性 屬性類別 屬性名稱 屬性值 說明 指定相對位置 layout_toLeftOf
“id/某一個介面元件id名稱” 將介面元件置於指定介面元件的左邊 layout_toRightOf 將介面元件置於指定介面元件的右邊 layout_above 將介面元件置於指定介面元件的上方 layout_below 將介面元件置於指定介面元件的下方 指定對齊方式 layout_alignLeft 將介面元件和指定介面元件的左邊對齊 layout_alignRight 將介面元件和指定介面元件的右邊對齊 layout_alignTop 將介面元件和指定介面元件的上緣對齊 layout_alignBottom 將介面元件和指定介面元件的下緣對齊 layout_alignBaseLine 將介面元件和指定介面元件的中心線對齊 layout_alignParentLeft “true”或”false” 將介面元件對齊它所在的外框左邊 layout_alignParentRight 將介面元件對齊它所在的外框右邊 layout_alignParentTop 將介面元件對齊它所在的外框上緣 layout_alignParentBottom 將介面元件對齊它所在的外框下緣

23 使用RelativeLayout的注意事項
最先宣告的介面元件會放在螢幕的左上方，如果後面宣告的介面元件指 定的位置是在第一個介面元件的左邊或是上方，那麼就會看不到這個介 面元件。例如以下範例將看不到edt1元件。 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout … > <TextView …/> … <EditText </RelativeLayout> 這個問題有二種解決方法，首先可以利用android:layout_center相關的 屬性把第一個宣告的元件往螢幕的右下方移動。第二個解決方法是調整 介面元件宣告的次序，例如把範例中的edt1元件放到前面宣告，然後指 定txt1元件置於edt1的下方。

24 RelativeLayout的成果 <?xml version="1.0" encoding="utf-8"?>
<TextView …/> <EditText … <EditText <TextView <Button </RelativeLayout>