Android Studio介面設計 建國科技大學資管系 饒瑞佶 2016/3 V1.

Presentation on theme: "Android Studio介面設計 建國科技大學資管系 饒瑞佶 2016/3 V1."— Presentation transcript:

1 Android Studio介面設計 建國科技大學資管系 饒瑞佶 2016/3 V1

2 Android介面設計 是整個Android程式設計中最難的部分 使用XML格式進行設計與儲存 位置在res/layout內
透過一層(Layout)包一層(Layout或View或物件)的方式設計

3 XML格式 非HTML的進化 用來定義資料 與HTML相同，都是用中括號<>來表示意義，也就是標籤
需要有頭<標籤名稱>有尾</標籤名稱> <標籤名稱 屬性=“屬性值”> <其他標籤> <標籤名稱/>

4 介面XML格式規定 Xml格式宣告 根標籤 根標籤一定要有的屬性

5 Android用的XML標籤規範 標籤名稱不可亂用，有關鍵字
屬性名稱多以android:開頭，:後面才加上名稱，例如android:width定義寬度 多半可以自動完成

6 幾個重要的Android介面XML標籤 android:id >> 用來定義物件名稱，後面程式會用到
android:layout_width >> 用來定義寬度 android:layout_height >> 用來定義高度 android:text >> 用來定義文字 android:src >> 用來定義圖檔等資源

7 使用圖形編輯模式 可用元件 預覽區 結構層級檢視 編輯模式切換 屬性設定

8 Android介面設計架構 透過一層(ViewGroup)包一層(ViewGroup或View或物件)的方式設計
層多半指的是排版樣式，常用的有直線型(LinearLayout)、相對型(RelativeLayout)、表格型(TableLayout)、框架式(FrameLayout) 層裡面可以再包層或是物件(view)

9 View Hierarchy

10 排版樣式 直線型(LinearLayout)：物件以直線方式排列
水平方向：horizontal 垂直方向：vertical 相對型(RelativeLayout)：物件間以相對位置排列，Android Studio預設的root Layout 表格型(TableLayout)：物件以表格方式排列 框架式(FrameLayout)：物件可以同時放置於區塊內，但一次只會看到一個 綁定型(Constraint Layout)：Relative Layout的改良版 ….

11 設計Android樣板的重點 先決定最外層排版樣式 對版面進行區塊切割，將每個切割出來的區塊再對應到一個排版樣式
不可分割的區塊內放入需要的物件 不同Layout之間是可以混用的

12 設計一個登入畫面 需要有 兩個提示文字 兩個輸入框 一個確定按鈕 帳號： 密碼： 確定

13 先決定最外層排版樣式 帳號： LinearLayout 垂直型 密碼： 確定

14 進行區塊切割 LinearLayout 水平型

15 所以是 LinearLayout 水平型 x 2 物件 物件 LinearLayout 垂直型 x 1 物件 物件 物件

16 建立方式

17 Layout名稱，需要全部小寫，不可以數字開頭
最外層排版樣式

18 建立後畫面是預覽模式 空白畫面 先切換到原始碼模式，確認最外層樣式

19 原始碼模式 最外層排版樣式 少了到底是水平還是垂直

20 自己補上垂直 android:orientation="vertical"

21 再回到預覽模式 拉兩個進來

22 原始碼

23 拉入button

24 原始碼

25 拉入textview與edittext 到第一個水平排列內

26 調整屬性

27 再依序加入密碼與輸入框

28 小練習

29 Android Studio預設root layout
RelativeLayout Android Studio預設root layout

30 相對型排版 以物件之間的相對位置關係來進行排版 用於有版面旋轉考量或物件需要置頂或最末時使用

31 範例 置頂 在文字下方 在按鈕上面 最末

32 新增一個layout

33 切割版面 LinearLayout 水平

34 設定物件置頂

35 設定輸入框在文字下方

36 設定物件最末

37 設定三張圖片在按鈕上方

38 怎麼把RelativeLayout中間填滿？
透過 LinearLayout android:layout_weight

39 android:layout_weight
用來分配物件佔螢幕大小的比重 如果沒有設定，就依照layout_width與layout_height設定大小 如果有設定layout_weight，則用數字加總的比例方式計算其大小

40

41 TableLayout

42 TableLayout 使用表格方式來排列物件 需要搭配TableRow來進行，每個TableRow就是一列
TableRow要包含在TableLayout下 TableRow中有幾個物件就代表有幾欄

43 TableLayout 很像是垂直直線排列 TableRow代表的是水平垂直排列
排在TableRow外，TableLayout內的代表的是垂直的排列 只是使用TableLayout，可以更工整的對齊

44 範例 TableRow TableRow TableRow

45 建立TableLayout

46 加入TableRow

47

48 Constraint Layout 扁平化層級

49 首先加入dependency compile 'com.android.support.constraint:constraint-layout:1.0.2'

50 New Layout use ConstraintLayout
選擇android.support.constraint.ConstraintLayout類別

51 myconstraint.xml

52 第一個物件 當作其他物件基準，類似RelativeLayout 第一個物件以Layout當作基準

53

54 Constraint物件外觀 上下左右四個原點是對齊的參考點與被參考點

55 加入一個輸入框 目的：放在第一個物件TextView的右邊
以前要做到這樣需要水平式LinearLayout或是RelativeLayout (也就是要多加一個層級) 一開始可以隨便放

56 接著利用原點對齊 對齊一定要2個參考點(Alignment Constraint) 第2個點 第1個點

57 結果 上方對齊 輸入框左邊對齊TextView右邊 兩者間距離可以再調整

58 How？

59 置中 上下左右四個原點直接拉至邊界就可以(Parent Constraint)

60 guideline 水平與垂直 在UI上建立除了四個邊框的對齊線 點這裡可以切換單位

61 透過guideline建立兩個中央對齊的按鈕

62 字對齊 滑鼠移到基線上，等待約3秒基線會閃爍，就可以拖動(baseline alignment constraint)

63 Other AutoConnect(針對目前加入的View建立最近的constraint)
Infer Constraint(針對目前UI上的所有view建立constraint)