• 佈局是什麼？
• 佈局有哪些？

Ｑ：佈局是什麼？

Ａ：佈局就是一個容器，可以裝一堆元件，也可以裝佈局

Ｑ：佈局有哪些？

Ａ：LinearLayout、RelativeLayout、ConstraintLayout等等 (今天先介紹這三種)

Ｑ：既然佈局都是裝元件的，那我要這麼多種佈局幹嘛？

Ａ：每一種佈局內部擁有的元件，排列、對齊方式都不一樣

下面我們用圖來看，會比較清楚

LinearLayout (線性佈局) ------ 第一種佈局

上圖這個APP畫面最外面 LinearLayout 包著 TextView，也包著另一個 LinearLayout。

從上圖可以知道 LinearLayout 這個佈局 ( 容器 )裡面的元件，有兩種對齊方式

• 垂直 -> 像是上圖最外層的 LinearLayout
• 水平 -> 像是內層下面那個 LinearLayout

我們以蝦皮APP為例子來分析一下

由於我們認識的元件還不多，這邊先大概理解就可以了！

上半部

• 最外層 ScrollView 這個元件可以讓內部的畫面滑動顯示

• 中間層 LinearLayout 當作畫面的佈局，意思是接下來內部的東西要垂直對齊

• 最內層 由前面解說發現，佈局其實也可以包住佈局，所以這裡四個不同區塊，可以是元件、也可以是佈局

下半部

• 水平的 LinearLayout 包進五個元件

這裡有一點要提醒大家：上面所說的都只是對這個畫面的分析，意味著這個畫面不一定是 100% 像我說的這樣製作出來，每位工程師的設計方式都會有些許差異，懂的工具多寡也會影響。

RelativeLayout (相對佈局) ------ 第二種佈局

假設我們最外層是 RelativeLayout 佈局，裡面有 A、B、C 三個元件

從左到右五張圖

• 第一張 -> 元件隨意擺放，尚未對齊

• 第二張

  • 將 A 元件對齊 RelativeLayout 的左邊
  • 將 A 元件對齊 RelativeLayout 的上面

• 第三張

  • 將 B 元件對齊 A 元件的底下
  • 將 B 元件對齊 RelativeLayout 的左邊

• 第四張

  • 將 C 元件的 Top 對齊 B 元件的 Top

• 第五章

  • 將 C 元件對齊 B 元件的右邊

結論：RelativeLayout 就是看你的元件想要在誰的附近，利用這種彼此相對的位子來對齊。當然也可以對齊外層包住自己的佈局

一樣讓我們找個畫面來分析看看

ConstraintLayout ------ 第三種佈局

ConstraintLayout 其實可以當作是 RelativeLayout 的升級版

除了相對關係的對齊方式以外，可以自己在畫面上加上一條隱形的線用以對齊

Ｑ：這條線有什麼用處呢？

Ａ：可以依照手機尺寸的比例，去設置你線的位置，再利用這條線的相對位置去對齊

• 優點1:你的 APP 在不同手機上，顯示不會差異太大
  • 不管手機的螢幕尺寸、密度、解析度
• 優點2:不用像 RelativeLayout 一樣，一定得對著某個東西對齊
  • 這條線是隱形的，意味著只有開發的你看的到，使用者不會看到他顯示在你的APP上。
• 優點3:也是最重要的一點，當畫面複雜時，ConstraintLayout 的效能會比 LinearLayout 和 RelativeLayout 好很多。
  • 這點我們後面再解釋，先知道這個東西很讚就對了！

ConstraintLayout 的範例我就不放了，基本上，上面的範例都可以藉由這種 隱形線＋相對位置 去對齊達到效果。

今天我們認識了三個重要的佈局，明天我們要認識一些基本的元件，熟悉之後，我們會再舉一些有名的 APP，去分析一下上面的效果分別是對應到哪個元件。