今天來跟各位介紹一下前端(廣義的)最重要的部分，也就是UI，俗稱的刻畫面。
也就是我們工程師如何在設計師的刁難要求之下，完成想要呈現給User的樣子。
其中最大的工具，不管是iOS的AutoLayout、ReactNative的Flexbox或是等等要介紹的Android，都有各自的layout系統。
透過layout，我們就可以讓每個東西照我們的意思出現在我們想要它們出現的地方。(好饒口的一句話)
相關的內容會分成兩部分，先做一些基本的介紹，然後會有傳統的五大佈局範例，至於大家可能聽過Android抄襲借鏡我們的ConstraintLayout..........今天不會講到。

概述

其實畫面這塊，在以前iOS一直是一個引戰的好材料。
不論是coding layout > xib > storyboard的鄙視鏈，或是frame vs Autoresize vs AutoLayout的孰優孰劣。相互的分析與討論總是沒停過。
這種情況，在Android似乎有一統天下的味道。(當然我這麼菜，說的不一定準，不過至少我沒聽過Android有人是用純code的)
好！前面的廢話到此為止，以下開始正式介紹：
Android的畫面，也跟iOS一樣可以選擇使用視覺化的方式，或是寫code的方式。
在我們要新建一個Activity的時候，AS就會問我們是否要一併產生畫面檔：
這點跟新建ViewController時，Xcode問我們要不要產生xib是一樣的。☘️☘️☘️
若我們產生了畫面檔後，AS會很貼心的幫我們放到固定的目錄下面：

這點就跟Xcode有出入了⚠️⚠️⚠️，通常如果有勾要xib的話，會跟程式碼放在同一個目錄下。這樣在找的時候會很好找，透過上方的路徑列就可以快速切換了。但AS把它們分家的話就無法用這招了。
還好AS有想到這點，在程式檔的部分會有一個按鈕可以快速連結到對應的畫面檔：

甚至如果有顏色的話，AS的行號旁邊也會顯示(Xcode的話要Swift才會顯示)，AS得一分～

操作介面

打開畫面檔後，我們可以看到如下的版面配置：

基本上跟Xcode差不多，左上元件區、左下元件樹、右邊屬性區，中間就是畫布(可以設定是否顯示右邊的藍圖)。
但是有個很大不一樣的是⚠️⚠️⚠️，左下角落綠色區塊可以切換Design模式或是Text模式，如果切到Text會看到：

滿滿的XML code。
雖然平平都是XML，但人家AS的XML是給人類看的啊(AS再得十分)
這就是為什麼Android畫面流派比較不會被抗議的原因(大概)，因為這樣的XML不管是獨立開發的版本比較，或是多人開發的merge衝突，以前在Xcode為人詬病的原因都消失了。
而且點了右邊綠色的Preview，又可以一邊打code一邊WYSIWYG；在Design模式拉的畫面也會自動產生XML，這不就是我們今年SwiftUI才能抄襲做到的事嗎。(趕快balance一下XD)

畫面與程式的連結

1. 在每個有畫面檔的onCreate裡面都會都下面這句，代表這個Activity是讀哪個layout file

setContentView(R.layout.activity_lesson04);

2. ⚠️⚠️⚠️以前如果畫面是用拉的，那麼畫面跟程式的連結也要用拉的(IBOutlet)，而Android則是所有的元件都可以給予id，接著在code裡面

buttonR = findViewById(R.id.lesson04_btn_relative);//R就是Resouce的意思

就可以得到你在畫面裡拉的東西了。
(如果是kotlin的話好像比較厲害，不用findViewById就可以找到了，但具體原理沒有去研究)

好的～今天就粗略地介紹到這了，明天會跟大家講何謂Android的layout

今天的範例程式

可以去 https://github.com/mark33699/IDLA 看一下順便給顆⭐️

如果你喜歡我的影片別忘了按讚分享加訂閱，開啟紅色的小鈴鐺，我們明天見～