重新學習Android —— （一）重新認識佈局編輯器
前言
最近在開發一款虛擬打擊墊應用。
雖然它以經可以正常使用了，但是那都是使用我初高中時代所學的那一套Android開發技術，在我學習了當今更加先進的前後端框架的先進思想後（比如Flutter、Vue），我總是覺得那套技術已經不能再老舊了。
我知道這幾年Android世界已經發生了天翻地覆的變化，Kotlin、ConstraintLayout、Jetpack以及Compose......懶惰和懦弱導致我一直沒有學習這些新技術，頂多也就是使用Kotlin，畢竟從中專開始我就沒怎麼再編寫過Android程式了，並且我也不打算走Android方向。但是......幾年後帶著積攢的一身程式碼潔癖的我再次編寫Android程式時，再也無法忍受那些臃腫、難以維護的程式碼了，我必須要學習這些新技術了。
問題出現了，我不知道該從何學起，Android的官方文件晦澀難懂，國內大部分文章都是一知半解，偶爾有一些好文章就要收昂貴的費用，作為學生的我是無法負擔得起。所以我在這裡，我嘗試著自己去啃這些新的技術。我願意把一路上都經驗總結成文章分享出來，即便是浪費掉我學生時代的最後一個假期......
Layout Editor
在早先的Android開發中，大家都是直接手擼xml程式碼，很少有人使用佈局編輯器，因為它雞肋的一批。直到現在，我都不知道那玩意兒該咋用。但是當ConstraintLayout出現時，Google開始推薦大家使用佈局編輯器（Layout Editor）進行佈局的設計，並宣稱——“使用 ConstraintLayout 構建佈局時，佈局編輯器的功能尤其強大”
這個Design就是佈局編輯器，它允許我們使用拖拽的方式來進行佈局的設計，而xml程式碼就由佈局編輯器來生成。
我們先把根ViewGroup改成LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> </LinearLayout>
Attributes
都知道LinearLayout最重要的設定就是orientation，它決定了線性佈局以哪個軸方向來排布子View。
選中LinearLayout，在右邊的Attributes面板中，可以設定選中控制元件的屬性。
這裡設定成vertical
下面是針對TextView的ID和文字樣式進行調節的示例
Palette
Palette的意思是調色盤，在佈局編輯器中它可不是調色盤，它是控制元件面板，佈局編輯器允許從Palette中拖動控制元件到檢視上。
Component Tree
Component Tree顯示了當前佈局的元件樹。
它還有個用處就是，當我們的滑鼠焦點不好在檢視區域選中某個View時（一般出現在多個專案堆疊的情況下），可以通過點選Component Tree中的對應專案來選中這個View。
使用String Resource
當我們修改TextView的文字時，我們會收到如下警告
我們把文字硬編碼在了佈局中，Google建議我們使用String Resource來儲存檔案，這樣我們可能很方便的建立多國語言的String Resource檔案來輕鬆的實現國際化功能。
在佈局編輯器中，當需要引用一個Resource時，直接點選右面的按鈕即可，我不知道我的按鈕經歷了什麼變成了這樣。
然後我們就可以在彈出的視窗中選擇或新建一個resource。
這裡我新建一個，它會幫你在你的strings.xml中自動建立並在當前xml佈局檔案中自動引用。
dimension、color等也能像類似的方式建立並引用。
設計佈局
選中剛剛新增的TextView，在Attributes中搜索padding，為它新增padding
修改它的paddingTop為8dp，這裡我們也不使用硬編碼，也是放在dimen檔案中。
佈局編輯器會自動建立dimen檔案，不用我們事先建立。
使用同樣的方法設定margin。
小Tip：當設定左右邊距或填充時，使用start、end代替left、right有一些好處，因為有一些語言的國家的閱讀習慣是從右到左，也就是使用RTL flow，當在RTL上，start就等於右邊，end等於左邊。
搜尋fontFamily，這裡可以直接通過More fonts來聯網下載需要的字型，牛批。這些字型都是開源的，無版權糾紛。
提取Style
當我們對一個設計滿意時，可以通過在Component Tree中右鍵，然後選擇Refactor，Extract Style將它的樣式提取出來。
我們可以去掉一些屬性，並給該屬性一個名字
然後這些屬性會從佈局檔案中被提取到styles.xml中
新增ImageView
當你拖動一個ImageView到檢視區，資源管理器就會開啟，你可以在這裡選一個資源。
- 在Attributes面板裡給它新增contentDescription
- 在Attributes面板裡給它新增marginTop，為
@dimen/layout_margin
ScrollView
拖動一個ScrollView到佈局上或者到Component Tree上，讓它在星星的下面。
我們想要達到的最終效果是在ScrollView中包含一個文字，這個文字可以在螢幕大小不足時可滾動。
我們都知道ScrollView中只能包含一個子控制元件，如果要包含多個子控制元件的話，那麼就在其中巢狀一個佈局就好了。所以佈局生成器給我們生成了這樣的程式碼
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
這不是我們需要的，我們的ScrollView中由於只包含一個文字，所以不用再巢狀一層LinearLayout。我們可以在程式碼中，也可以在Component Tree中刪除它，新增一個TextView。
接下來搜尋style屬性，給這個textView應用剛剛的NameStyle。
隨便給它新增一些文字。
新增lineSpace
新增padding
最終效果
總結
以前一直輕視了這個Layout Editor，因為我覺得它始終沒有手擼快。現在感覺它快速建立並引用資原始檔以及可以通過warning的形式來約束我們，告訴我們哪裡寫的不合乎規範的這些功能非常好用。