การจัดกลุ่มข้อมูลด้วย View group

สหรับการจัดกลุ่ม ข้อความ รูปภาพ และป่มคำสั่ง ให้รวมกันในหน้าจอเดียว สามารถทำไดเโดยอาศัยการเขียนคำสั่ง XML ที่เรียกว่า View group
ซึ่งจะพบว่ามีศัพท์แสงทางเทคนิคที่น่าสนใจในการเขียนแอพ ได้แก่

• ViewGroups 
• Root View
• Parent
• Child
• Sibling

View group จะเป็นรูปร่างแบบ 4 เหลี่ยมผืนผ้า มีด้านกว้าง x ยาว แสดงบนหน้าจอ จะเรียกว่า เป็นกล่องใส่ของหรือบรรจุของก้ได้ 

บางครั้งเราเรียกว่า Parents หรือพ่อแม่ 

ส่วนข้อความ หรือภาพ ที่บรรจุอยู่บน Parents เราเรียกว่าลูก หรือ Child

ส่วนความสัมพันธ์ของ Child ที่มีต่อกันเราเรียกว่า Sibling 

ในการเขียนแอพ Parent ก็สามารถที่จะกำหนดตำแหน่งที่อยู่ของลูกๆ ได้ เช่น ตรงกลาง ด้านข้าง หรือด้านบน เป็นต้น 

การจัดตำแหน่งด้วย  View group   จะสามารถแบ่งออกได้ 2 ลักษณะ คือ

LinearLayout
RelativeLayout

ทำความรู้จักกับการจัดกลุ่มข้อมูลแบบ  LinearLayout

ตัวอย่างโค้ด
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

            android:text="Guest List"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

            android:text="Kunal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

            android:text="Sutee"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

 android:orientation="vertical"
เป็นแถวที่บังคับมุมมองแบบแนวดิ่ง
กลับกันถ้าต้องการแนวราบ ก้เปลี่ยนเป็น horizontal
จัดเพิ่ม 1ตัว match_parent
สำหรับการบังคับให้ ขนาดของ child หรือตัวลูกปรับขนาดตามขนาด กว้าง x สูง ของตัวแม่

เพิ่มอีก 2 ตัวคือ เกี่ยวกับการแสดงผลบนหน้าจอแบบ แนวตั้ง กับแนวราบ
portrait mode แนวดิ่ง
กับ
Landscape mode แนวราบ
ดูเพิ่มเติม การจัดตำแหน่งของวัตถุบนหน้าจออุปกรณ์
https://developer.android.com/guide/topics/ui/layout/linear.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics

รูปแบบหนึ่งที่สามารถกำหนดโค้ด การจัดตำแหน่งของ ลูกๆ ในแต่ละจุดบนพ่อแม่ได้ ก็คือ การแบ่งพื้นที่ว่างๆ เท่ากันหรือ evenly
มีหลักการเขียน ได้แก่
android:layout_weight

ใส่ค่าตัวเลขเป็น 0 หรือ 1 เป็นต้น 

ตัวอย่างโค้ด 

        android:src="@drawable/ocean"

        android:layout_width="match_paent"       

        android:layout_height="0dp"

        android:layout_weight="1"

        android:scaleType="centerCrop" />

ลองดูอีกแบบคือการจัดตำแหน่งของลูกๆ โดยใช้การการจัดแบบ อ้างอิง Parent
ตัวอย่าง

android:text="I’m in this corner"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />

คำสั่งที่ใช้คือ android:layout_alignParentLeft="true

สามารถจัดให้อยู่มุมบน ขวา ซ้าง และเช่นกัน ล่าง ซ้าย หรือ ขวา เป็นต้น

การจัดตำแหน่งโดยอาศัยอ้างอิงตัวลูก หรือ Relative Layout View
การจัดตำแหน่งแบบนี้จะต้องมีการกำหนด id ให้กับแต่ละคน หรือกล่องข้อความหรือรูปภาพ เพื่อใช้อ้างอิง โดยคำสั่งที่ใช้กันก็คือ
ตัวอย่างโค้ด

            android:id="@+id/ben_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="24sp"
        android:text="Ben" />

ตัวอย่างโค้ด
         android:id="@+id/photo"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ocean" />

            android:id="@+id/Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/photo"
        android:text="Pebble Beach"
        android:textAppearance="?android:textAppearanceMedium" />

ตั้งชื่ออ้างอิง ภาพเป็น photo

และอีกอันตั้ง id เป็น Name
การทดสอบเขียนโปรแกรม ให้ข้อความ id=Name อยู่ด้านขวาของรูปภาพหรือ Photo