พื้นฐาน Android - RelativeLayout vs LinearLayout

ตัวอย่าง example เป้าหมายท้ายบทความ

" RelativeLayout คือรูปแบบ Layout ที่ใช้การกำหนดตำแหน่งของแต่ View ที่อยู่ในตัวมันเอง
สามารถสัมพันธ์กับ Element ตัวอื่นๆ (sibling elements) หรือสัมพันธ์กับ (Parent element) "


เริ่มต้นก็มาวาง TextView ตู่กันก่อนเลย

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout       
xmlns:android="http://schemas.android.com/apk/res/android"     
android:layout_width="match_parent"     
android:layout_height="match_parent"     
android:gravity="center">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"         
android:text="ตู่มาแว้ว"         
android:textSize="30sp"/>

<TextView         
android:id="@+id/textView2"         
android:layout_width="wrap_content"         
android:layout_height="wrap_content"         
android:text="ตู่ไปแว้ว"         
android:textSize="30sp"/>
</RelativeLayout>

แล้วเราก็จะเห็นว่า ตู่มาแว้ว กับ ตู่ไปแว้ว มันจะซ้อนกันอยู่ตรงกลางทั้งคู่
ก็เพราะเราไปกำหนด android:gravity="center" ให้มัน

งั้นลองใส่ android:layout_below ให้ tv_1 ซิ
ความหมายของมันก็ตามชื่อเลยครับ จะได้ tv_2 อยู่ใต้ tv_1

ต่อมาลองเปลี่ยนเป็น ImageView แบบกำหนด android:layout_toEndOf ให้จะออกมาประมาณแบบนี้

[CODE]

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

<RelativeLayout 

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:gravity="center"

        android:orientation="vertical">

<TextView android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:background="#2fa3b8"

        android:padding="30dp"

        android:text="Top \n\nLeft"

        android:textColor="#fff" />

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:background="#2fa3b8"

        android:padding="30dp"

        android:text="Top \n\nRight"

        android:textColor="#fff" />

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:background="#ff5b00"

        android:padding="30dp"

        android:text="Top \n\nMiddle"

        android:textColor="#fff" />

<TextView

        android:id="@+id/centerTextView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:background="#2fa3b8"

        android:padding="30dp"

        android:text="Center"

        android:textColor="#fff" />

<TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@+id/centerTextView"

        android:layout_marginTop="10dp"

        android:background="#ff5b00"

        android:padding="30dp"

        android:text="Left"

        android:textColor="#fff" />

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_below="@+id/centerTextView"

        android:layout_marginTop="10dp"

        android:background="#ff5b00"

        android:padding="30dp"

        android:text="Right"

        android:textColor="#fff" />

<TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_marginTop="10dp"

        android:background="#2fa3b8"

        android:gravity="center"

        android:padding="30dp"

        android:text="Bottom of Screen"

        android:textColor="#fff" />

    

</RelativeLayout>

ลิสออกมาก็จะได้

android:layout_alignParentLeft="true"  

ทำให้ขอบซ้ายของ view ตัวนี้ตรงกับขอบด้านซ้ายของ parent

android:layout_alignParentRight="true"

ทำให้ขอบขวาของ view ตัวนี้ตรงกับขอบด้านขวาของ parent

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

สองตัวนี้รวมกันก็คือ กลางของหน้าจอแนวนอน + กลางของของหน้าจอแนวตั้ง = กลางจอ

android:layout_below="@+id/centerTextView"

วางตำแหน่งขอบด้านบนของ View ตัวนี้ไว้ด้านล่างของ anchor view ID 

ก็จะคือ (centerTextView) ที่อยู่กลางจอ

android:layout_alignParentBottom="true"

ทำให้ขอบด้านล่างของ view ตัวนี้ตรงกับขอบด้านล่างของ parent

.

.

.

.

ยังไม่จบ....เลื่อนขึ้นไปดู บรรทัดแรกก่อน
.
.
" RelativeLayout คือรูปแบบ Layout ที่ใช้การกำหนดตำแหน่งของแต่ View ที่อยู่ในตัวมันเอง
สามารถสัมพันธ์กับ Element ตัวอื่นๆ (sibling elements) หรือสัมพันธ์กับ (Parent element)"
อ๋ออออ...นี่เราเพิ่งเรียนจบกันแค่ 1 กระบวนท่าของ Relative Layout
.
เราจะมาลองแบบ สัมพันธ์กับ Element ตัวอื่นๆ (sibling elements)
เพราะในบทความนี้เราเพิ่งได้เห็นแค่ android:layout_below="@+id/centerTextView"
ทีนี้ง่ายเลยเพราะเรามีเป้าหมายละ แล้วก็มีตัวอย่างจากสิ่งที่เคยทำมา
.
โจทย์ต่อไปคือเรามาลองสร้าง TextView 4 ตัว
ให้อยู่ติดกับ CenterTextview ทั้งด้าน บน , ล่าง , ซ้าย , ขวา
เพิ่ม TextView กันเข้าไปเลย

    <TextView
            android:layout_centerInParent="true"
            android:layout_toRightOf="@+id/centerTextView"
            android:text="tv_right_centerTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/right_of_centerTextView"/>


    <TextView
            android:layout_centerInParent="true"
            android:layout_toLeftOf="@+id/centerTextView"
            android:text="tv_left_centerTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/left_of_centerTextView"/>

    <TextView
        android:layout_centerInParent="true"
        android:layout_above="@+id/centerTextView"
        android:text="tv_above_centerTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/above_of_centerTextView"/>

    <TextView
            android:layout_centerInParent="true"
            android:layout_below="@+id/centerTextView"
            android:text="tv_below_centerTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/below_of_centerTextView"/>

ผลลัพธ์ที่ออกมา

จำแบบง่ายๆคือจะมี

layout_centerInParent="true"

คู่กับอะไรซักอย่างเช่น

android:layout_toRightOf ="@+id/textView"
android:layout_toLeftOf ="@+id/textView"
android:layout_above="@+id/textView"
android:layout_below="@+id/textView"

แค่นี้เราก็พร้อมที่จะรับมือกับ RelativeLayout  กันแล้ว ^_^



จำเป็นต้องรู้มั้ย ?

( ในงานเก่าๆเผื่อใครแจ็คพ็อทแตกเจอแบบนี้ขึ้นมา )
หากไม่ใช่งานแก้ของเก่าที่เป็น Relative layout อยู่แต่เดิม
ศึกษาลองใช้ Constraint Layout ต่อครับแล้วจะมีชีวิตที่สบายขึ้น
อาจจะลืม RelativeLayout ไปเลยก็ว่าได้ ....