RelativeLaoyut และ LinearLayout เบื้องต้น 2

ต่อเนื่องจากบทความที่แล้วนะครับ ผมได้พูดเกี่ยวกับเรื่องของ LinearLayout ไปแล้ว คราวนี้จะพูดถึงเรื่องของ RelativeLayout กันบ้าง เราได้รู้แล้วว่า LinearLayout นั้นการจัดวาง view ภายในจะเหมือนกับการวางกล่องเรียงไปตามแนวที่เรากำหนด ส่วน RelativeLayout นั้นจะเป็นการวางโดยอ้างอิงจาก View อื่นหรือ อ้างอิงจากตัว RelativeLayout เอง ยกตัวอย่างเช่นมี ImageView อยู่หนึ่งเราอยากวางไว้กึ่งกลางของหน้าจอแล้ววางคำอธิบายไว้ด้านล่างของรูปก็จะสามารถทำได้ดังนี้

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 >
 <ImageView 
     android:id="@+id/img"
     android:layout_centerInParent="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/ic_launcher"
     />
 <TextView 
     android:layout_below="@+id/img"
     android:layout_centerHorizontal="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="This view is under image"
     />
</RelativeLayout>

หน้าตาก็จะประมาณนี้
สังเกตจาก xml ด้านบน มีการใช้ attribute layout_centerInParent, layout_centerHorizontal, layout_below โดย attribute เหล่านี้จะไม่มีใน LinearLayout โดย ImageView img กำหนดให้ layout_centerInParent = true คือกำหนดให้อยู่กึ่งกลางของ RelativeLayout ซึ่งในตัวอย่างนั้น RelativeLayout มีขนาดเต็มหน้าจอ TextView กำหนด layout_below ="@+id/img" คือกำหนดให้ View นี้อยู่ใต้ view ที่มี id img ซึ่งในตัวอย่างก็คือ ImageView นั่นเอง จากนั้นกำหนด layout_centerHorizontal=true คือกำหนดให้อยู่กึ่งกลางในแนว horizontal ถ้าเป็นแนวตั้งใช้ layout_centerVertical

ส่วนใหญ่ที่ผมจะใช้บ่อยๆก็

• layout_toRightOf="id view ที่จะอ้างอิง" วาง view ไว้ด้านขวาของ view ที่อ้างอิง
• layout_toLeftOf="id view ที่จะอ้างอิง" เหมือนกับตัวบนแต่ไว้ด้านซ้าย
• layout_above="id" จะวางไว้ด้านบน view ที่จะอ้างอิง
• layout_below="id" วางไว้ด้านบน view ที่อ้างอิง
• layout_alignParentLeft, layout_alignParentRight, layout_alignParentBottom, layout_alignParentTop สี่ตัวนี้จะอ้างอิงจากตัว parent หรือ ตัว RelativeLayout เอง โดยจะวางชิดขอบซ้าย ขวา ด้านล่าง ด้านบน ตามลำดับ
• layout_centerHorizontal วางกึ่งกลางในแนวนอนอิงจาก parent
• layout_centerVertical วางกึ่งกลางในแนวตั้งอิงจาก parent
• layout_centerInParent อันนี้จะวางกึ่งกลางทั้งแนวตั้งและนอน อิงจาก parent

นอกจากนี้ยังมีอีกหลายอันนะครับแต่ผมไม่เคยใช้ ลองไปใช้กันดูก็ได้ครับ ได้ผลยังไงอย่ามาลืมบอกกันมั่งนะครับ
สุดท้ายนี้ก็ทิ้งไปด้วยอีกตัวอย่างครับ

ตัวอย่างนี้มี Button อยู่ 9 ตัวครับโดยวางอิงจาก parent และจาก ต้ว button อื่น สังเกตว่าเราไม่จำเป็นต้องวาง view ตามลำดับก็ได้

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 >
 <Button 
     android:id="@+id/btnTopLeft"
     android:layout_alignParentTop="true"
     android:layout_alignParentLeft="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="TopLeft"     
     />
 <Button 
     android:id="@+id/btnTopCenter"
     android:layout_alignParentTop="true"
     android:layout_centerHorizontal="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="TopCenter"     
     /> 
 <Button 
     android:id="@+id/btnTopRight"
     android:layout_alignParentTop="true"
     android:layout_alignParentRight="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="TopRight"
     />
 <Button 
     android:id="@+id/btnBottomLeft"
     android:layout_alignParentBottom="true"
     android:layout_alignParentLeft="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="BotLeft"
     />
 <Button 
     android:id="@+id/btnBottomCenter"
     android:layout_alignParentBottom="true"
     android:layout_centerHorizontal="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="BotCenter"
     />
 <Button 
     android:id="@+id/btnBottomRight"
     android:layout_alignParentBottom="true"
     android:layout_alignParentRight="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="BotRight"
     />
 
 <Button 
     android:id="@+id/btnCenterLeft"
     android:layout_centerVertical="true"
     android:layout_toLeftOf="@+id/btnCenterCenter"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="CLeft"
     />
 <Button 
     android:id="@+id/btnCenterCenter"
     android:layout_centerInParent="true"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="CCenter"
     />
 <Button 
     android:id="@+id/btnCenterRight"
     android:layout_centerVertical="true"
     android:layout_toRightOf="@+id/btnCenterCenter"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="CRight"
     /> 
 
</RelativeLayout>