技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
第 12 屆 iThome 鐵人賽
DAY
4
0
Mobile Development
菜雞 Android APP 從安裝 Android Studio 到上架 Google Play
系列 第
4
篇
Day4-Android APP 佈局
kotlin
android app
linrear layout
relative layout
constraintlayout
Deron
團隊
甘阿餒
2020-09-17 13:27:19
2553 瀏覽
分享至
佈局是什麼?
佈局有哪些?
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 Play
共
30
篇
目錄
RSS系列文
訂閱系列文
19
人訂閱
26
Day26 - 設定路由器防火牆開通HTTP、80與HTTPS 443 Port
27
Day27 - Google Play Console
28
Day28 - Build APK & 發佈審核
29
Day29 - 回顧這個月做的事情
30
Day30 - Android APP 最後一天
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
10102
篇
完賽人數
98
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
17th鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
windows server
linux
css
react
熱門問題
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
【求助】顯卡/主板 支援 PCIe4.0 為何 Host to Device (H2D) 只剩 Gen1 速度 (0.5 GB/s) ?
請問今天鐵人賽的發文系統是否故障?
Windows GPO Bitlocker
HP iLo Advanced trial license
在線求大神,千奧軟體主機怎麼安裝
Docker Compose 建立 GitLab 容器,執行器 Runner 運行流水線問題
windows server無法使用gpedit.msc
Java證照題目(main() method)
因為網路磁碟的關係造成系統自動重新開機
熱門回答
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
Windows GPO Bitlocker
【求助】顯卡/主板 支援 PCIe4.0 為何 Host to Device (H2D) 只剩 Gen1 速度 (0.5 GB/s) ?
windows server無法使用gpedit.msc
因為網路磁碟的關係造成系統自動重新開機
熱門文章
[為你自己學 Gemini CLI ... 的原始碼] 第 2 天,主程式裡的 Hello Kitty!
第30天,完賽心得 / 葉家藥燉排骨 在地排隊美食(新北板橋)| 30天滷肉飯
[為你自己學 n8n] 第 3 天,打開控制台,認識你的自動化駕駛艙!
第4天,數位憑證的產生 / 中崙張記藥膳排骨 排骨讚(台北松山)| 30天滷肉飯
第4天,Cloudflare Public DNS 與 WARP / 滷小小 美味的滷味 | 30天板橋湳雅夜市
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}