開始佈局

以前我們每個VC都有一個self.view，而Android也有個類似的東西☘️☘️☘️
所有的layout file一開始都會幫你預設一個ViewGroup，ViewGroup有很多種，而現在主要在推的ConstraintLayout就是其中一種。
不過它功能太多了，有點複雜，如果是簡單的畫面，用傳統的佈局方法也是很好用的。
如下簡介：

1. Linear Layout
   ☘️☘️☘️跟我們的StackView很像，但比較功能上比較單純(StackView我還是不大會用用不習慣)。
2. Relative Layout
   ☘️☘️☘️基本上概念也是跟AutoLayout 87%像，都是運用相對的概念，但也是比較陽春版。
3. Absolute Layout
   ☘️☘️☘️這就跟frame一樣，看XY～
4. Frame Layout
   ⚠️⚠️⚠️要注意喔，這並不是我們的frame(上面已經說過了，人家名花有主了)，Frame Layout可以用在View的重疊上，但這點別的Relative Layout也做得到，所以聽說它主要情境是用在Fragment上(尚未研究)。
5. Table Layout
   ⚠️⚠️⚠️這東西很有意思，就把它想成是我們一般Word或Web上常看到的二維表格～

實作如下：

1. 先用Linear Layout寫一個Lesson04Activity
   1. 一開始AS都會預設成Constraint Layout，我會切到Text，直接把androidx.constraintlayout.widget.ConstraintLayout改成LinearLayout，比較快。
   2. 跟StackView一樣有分垂直或水平，這是一個vertical的LinearLayout。
   3. Android元件的長寬都可以不給定數值，直接設定為match_parent或wrap_content，就是跟SuperView一樣(上面四顆按鈕)或根據內容決定(最後一顆按鈕)
   4. 像最後一顆按鈕，如果是寬度是wrap_content，就可以用layout_gravity屬性決定置左/中/右(gravity屬性則是決定textView的垂直對齊，不要搞混了～)。
   5. ViewGroup裡面可以再包ViewGroup，像黃綠紅就是一個horizontal的LinearLayout。
   6. layout_weight屬性可以決定元件間的比重，像黃綠紅三個textView我設比重都是1，這時就會無視layout_width的設定。
   7. 也可以寫java加入元件(用Code寫跟iOS一樣很囉唆=_=)

        LinearLayout linearLayout = findViewById(R.id.linear_layout);
        Button button = new Button(this);
        button.setText("new button by code");
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
        button.setLayoutParams(layoutParams);
        linearLayout.addView(button);

2. Relative Layout的樣子
   1. 概念跟以前一樣，跟上層View或同層View的上下左右距離。

<Button
        android:id="@+id/relative_layout_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
    
    //按鈕二在按鈕一的右邊
    <Button
        android:id="@+id/relative_layout_button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_toRightOf="@id/relative_layout_button"/>

    //按鈕三在按鈕二的下面，也在按鈕一的右邊
    //對齊父層下方
    <Button
        android:id="@+id/relative_layout_button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_below="@id/relative_layout_button2"
        android:layout_toRightOf="@id/relative_layout_button"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"/>

    //按鈕四在按鈕三的右邊，也在按鈕二的下面
    //對齊父層右方
    <Button
        android:id="@+id/relative_layout_button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_toRightOf="@id/relative_layout_button3"
        android:layout_below="@id/relative_layout_button2"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"/>

3. Absolute Layout是個失敗作品
   1. 其實是兩個Btn，不知道為什麼設了XY還是不會跑，算了反正官方都說不要用了，就先不研究。
4. Frame Layout重疊了～
5. Table Layout的Demo比較複雜
   1. Table Layout裡面必須用TableRow這東西去包，就想成是直的Linear包橫的Linear
   2. Table Layout有以下屬性
      1. android:shrinkColumns那一欄是否會自動換行，不加的話字太多可能會擠到別欄無法出現(如R2C1)
      2. android:collapseColumns可以把整欄都隱藏(如C2整欄不見)
      3. android:stretchColumns決定剛剛隱藏的空間給哪一欄
   3. 另外還有以下特性
      1. 同一欄會等寬
      2. R1C3是因為有設定屬性layout_span=2，代表佔了兩格
      3. 只有第三列是四欄，但這個表格就是3*4了

參考資料

Android 三大布局的通用属性和各自的特有属性
UI實作範例(1)：RelativeLayout, LinearLayout

今天的範例程式

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

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