iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
0
Mobile Development

菜雞 Android APP 從安裝 Android Studio 到上架 Google Play系列 第 4

Day4-Android APP 佈局

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

Q:佈局是什麼?

A:佈局就是一個容器,可以裝一堆元件,也可以裝佈局


Q:佈局有哪些?

A:LinearLayout、RelativeLayout、ConstraintLayout等等 (今天先介紹這三種)


Q:既然佈局都是裝元件的,那我要這麼多種佈局幹嘛?

A:每一種佈局內部擁有的元件,排列對齊方式都不一樣


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

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 的升級版

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

Q:這條線有什麼用處呢?

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

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

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


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


上一篇
Day3-Android APP 設計畫面的地方
下一篇
Day5 - Android LinearLayout 佈局使用
系列文
菜雞 Android APP 從安裝 Android Studio 到上架 Google Play30

尚未有邦友留言

立即登入留言