RelativeLayout 用程式碼對齊~~

還記得我們說過 RelativeLayout 是依照彼此的相對位子來對齊

我們先講一下元件對齊的屬性要怎麼打

android:layout_alignParentLeft="true" // 貼齊 parent 的左邊
android:layout_alignParentRight="true" // 貼齊 parent 的右邊
android:layout_alignParentTop="true" // 貼齊 parent 的上面
android:layout_alignParentBottom="true" // 貼齊 parent 的下面
android:layout_centerInParent="true" // 放在 parent 正中心

android:layout_toLeftOf="B" // 自己 去 B 的左邊
android:layout_toRightOf="B" // 自己 去 B 的右邊
android:layout_above="B" // 自己 去 B 的上面
android:layout_below="B" // 自己 去 B 的下面

android:layout_alignLeft="B" // 自己的左邊 貼齊 B 的左邊
android:layout_alignRight="B" // 自己的右邊 貼齊 B 的右邊
android:layout_alignTop="B" // 自己的上面 貼齊 B 的上面
android:layout_alignBottom="B" // 自己的下面 貼齊 B 的下面

第一步：清空程式碼，留下 RelativeLayout

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

<RelativeLayout 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">


</RelativeLayout>

加上五個 Button

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

<RelativeLayout 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">

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

    <Button
        android:id="@+id/Button_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="two" />

    <Button
        android:id="@+id/Button_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="three" />

    <Button
        android:id="@+id/Button_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="four" />
        
    <Button
        android:id="@+id/Button_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="five" />

</RelativeLayout>

利用上面教的語法對齊看看

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

<RelativeLayout 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">


    <Button
        android:id="@+id/Button_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" // 對齊 parent 左邊
        android:layout_alignParentTop="true"  // 對齊 parent 上面
        android:text="one" />

    <Button
        android:id="@+id/Button_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"  // 對齊 parent 上面
        android:layout_toRightOf="@id/Button_one" // 放在 one 的右邊
        android:text="two" />

    <Button
        android:id="@+id/Button_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"    // 對齊 parent 左邊
        android:layout_alignParentBottom="true"  // 對齊 parent 下面
        android:text="three" />

    <Button
        android:id="@+id/Button_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"   // 對齊 parent 右邊
        android:layout_alignParentBottom="true"  // 對齊 parent 下面
        android:text="four" />

    <Button
        android:id="@+id/Button_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"  // 放在 parent 正中心
        android:text="five" />

</RelativeLayout>

效果

出個畫面讓大家練習看看

若有任何問題，都歡迎留言詢問哦！！

ConstraintLayout 用程式碼對齊~~

第一步：一樣清空程式碼，只留下 ConstraintLayout

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

<androidx.constraintlayout.widget.ConstraintLayout 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">


</androidx.constraintlayout.widget.ConstraintLayout>

第二步：讓我們加上隱形的線 ( Guideline )

• 方法一 : 從這裡選擇 水平 或 垂直的 線( Guildline )

• 方法二 : 從程式碼

<androidx.constraintlayout.widget.ConstraintLayout 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">


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_50" // id 設為 guildline_50 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"  // 設定水平 或 垂直 的線
        app:layout_constraintGuide_percent="0.5"/> // 螢幕比例  


</androidx.constraintlayout.widget.ConstraintLayout>

設定一條【水平線】比例為【50%】

效果

接著我們創一個 Button 並讓他對齊這條線的上方

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

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_50"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <Button
        android:id="@+id/button_one"  // id 設為 button_one
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one"
        
        // 元件左側對齊 parent 左側
        app:layout_constraintLeft_toLeftOf="parent"  
        
        // 元件右側對齊 parent 右側
        app:layout_constraintRight_toRightOf="parent" 
        
        // 元件底部對齊線的上方
        app:layout_constraintBottom_toTopOf="@id/guideline_50"/> 
    

</androidx.constraintlayout.widget.ConstraintLayout>

• 這裡有一個很重要的重點

  • 我們發現上面的 Button 同時對齊 parent 的左邊和右邊，結果是對齊在正中間。
  • 可以理解成，編譯器不確定你到底是希望左邊還是右邊，乾脆各給你一半的感覺！

將上述 Left Right Top Bottom 調換成你要的相關位置就可以了！

出個畫面讓大家做做看

嘗試製作看看，若有任何問題歡迎在下面留言。

今天我們介紹了 RelativeLayout 和 ConstraintLayout 的對齊方式，三個佈局到這裡應該都有初步的了解。

接下來我們要了解常用的元件