昨天講完三個主要會運用的佈局，也解釋了對齊方式，但理論讀再多，還不如實際用程式碼實作看看！

打開 .xml 檔案，並到程式碼製作畫面的地方 (忘記可以查看 Day 3)

LinearLayout 如何用程式碼對齊~~

第一步：我們先把畫面中的東西清空，只留下 LinearLayout

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    // 這個被頭尾包起來的地方，就是將元件放入該佈局的地方

</LinearLayout> 

第二步：設定該 LinearLayout 是 垂直 還是 水平

• 預設是水平，不過這裡我們還是加上去練習一下

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" // 加上 orientation 這個屬性
    tools:context=".MainActivity">  


</LinearLayout>

第三步：新增一個 Button 元件 ( 8~12行 )

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/Button_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="這是 Button-one"/>

</LinearLayout>

上面這個 Button 有些屬性我們比較陌生

• id -> 每個元件賦予的名稱 ( 方便我們辨識 )

  • 我們設定為 Button_one

• layout_width -> 寬度

  • 我們設定 match_parent ( 意思是寬度跟外層佈局一樣，外層多寬，我就多寬 )
  • 這裡學到 parent 這個名詞，代表的就是包住我的外層佈局

• layout_height -> 元件高度

  • 我們設定 wrap_content (意思是依照元件內容物決定高度，內容多高，我就多高)
  • 也就是文字多高，我的 Button 的就多高

• text -> 內容文字

  • 這裡我設定為 "這是 Button-one"

沒意外的話，你的畫面應該跟我一樣，大小寫我們先不管他

接下來我們再加兩個 Button

• 記得 id 跟內容要改
• 寬度必須改成 wrap_content
  • 如果有兩個元件寬度都為 match_parent，他會不知道空間到底該給誰

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/Button_one" 
        android:layout_width="wrap_content"  // 改為 wrap_content
        android:layout_height="wrap_content"
        android:text="這是 Button-one"/>

    <Button
        android:id="@+id/Button_two"
        android:layout_width="wrap_content"  // 改為 wrap_content
        android:layout_height="wrap_content"
        android:text="這是 Button-two"/>

    <Button
        android:id="@+id/Button_three"
        android:layout_width="wrap_content"  // 改為 wrap_content
        android:layout_height="wrap_content"
        android:text="這是 Button-three"/>


</LinearLayout>

結果畫面怪怪的

• 原因：前面兩個設定寬度為 wrap_content，因此他們的寬度會依照內容變化，導致剩下的空間，最後一個 Button 根本不夠用。

解決辦法：設定比例，我們將程式碼改成這樣

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/Button_one"
        android:layout_width="0dp" // 更改這行
        android:layout_height="wrap_content"
        android:layout_weight="1"  // 加上這行
        android:text="這是 Button-one" />

    <Button
        android:id="@+id/Button_two"
        android:layout_width="0dp" // 更改這行
        android:layout_height="wrap_content"
        android:layout_weight="1"  // 加上這行
        android:text="這是 Button-two" />

    <Button
        android:id="@+id/Button_three"
        android:layout_width="0dp" // 更改這行
        android:layout_height="wrap_content"
        android:layout_weight="1"  // 加上這行
        android:text="這是 Button-three" />


</LinearLayout>

• layout_weight -> 空間分配的比例 ( 比重 )

• layout_width -> 由於調整成比例空間，實際寬度就不在乎是多少了！

目前設定三個元件各為 1:1:1 在分配寬度空間

看起來舒服多了！ (文字換行的狀況我們先不管他)

利用以上的觀念，我出個畫面讓大家練習看看！

• 只利用 LinearLayout 嘗試做出下面的畫面

.

.

答案往下~~

.

.

• 最外層 -> LinearLayout ( vertical )

• 第一層 -> 一個 Button 元件，寬度設為 match_parent

• 第二層 -> LinearLayout ( horizontal )

  • 包含三個 Button 元件，layout_weight 都設為 1

• 第三層 -> 一個 Button 元件，寬度設為 wrap_content

• 第四層 -> LinearLayout ( horizontal )

  • 包含三個元件 Button TextView Button
  • layout_weight 都設為 1
  • 中間的 TextView 不寫任何內容，空白狀態可以用於分隔元件

今天認識了

• LinearLayout 的對齊方式
  • vertical horizontal
• 元件的 id
  • 元件的名子
• match_parent
  • 寬或高 跟 parent 一樣
• wrap_content
  • 寬或高 跟我的內容一樣
• 設置 layout_weight 的比重
• 利用 TextView 當作空白區塊

避免版面過於雜亂，也避免一個文章塞太多東西

明天我們再繼續了解 RelativeLayout 和 ConstraintLayout 的程式碼是怎麼實現對齊的