RelativeLayout และ LinearLayout เบื้องต้น 1

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name : "
        />
    <EditText 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textNoSuggestions"
        android:hint="TYPE YOU NAME"
        />
</LinearLayout>

หน้าตาก็จะประมาณนี้
สังเกตว่าใน LinearLayout จะมี TextView และ EditText อยู่ภายใน ทีนี้แล้ว RelativeLayout กับ LinearLayout มันต่างกันยังไง? ในส่วนของ LinearLayout นั้นผมมองเหมือนกับการวางกล่องสี่เหลี่ยมวางไปเรื่อยขึ้นอยู่กับว่าเราจะกำหนดให้เรียงต่อไปด้าน horizontal หรือ vertical โดย LinearLayout จะมี attribute ชื่อ orientation ให้เราสามารถกำหนดแนวในการวางได้ โดยใน LinearLayout นั้นก็สามารถวาง LinearLayout ซ้อนลงไปได้

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView 
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:background="#FF0000"
            />
        <TextView 
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:background="#00FF00"
            />
        <TextView 
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:background="#0000ff"
            />
    </LinearLayout>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView 
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="1"
            android:background="#00FF00"
            />
        <TextView 
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="1"
            android:background="#0000ff"
            />
        <TextView 
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="1"
            android:background="#FF0000"
            />
        <TextView 
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="1"
            android:background="#00FF00"
            />
        
    </LinearLayout>    
 <LinearLayout 
     android:layout_width="match_parent"
     android:layout_height="80dp"
     android:orientation="vertical"
     >
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#000000"
            />
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ffffff"
            />
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#000000"
            />
              
     </LinearLayout>     
 </LinearLayout>    
</LinearLayout>

หน้าตาก็จะออกมาประมาณนี้แหละครับ อาจดูไม่ค่อยสวยเท่าไหร่นะครับ พอดีไม่ค่อยมีศิลป์ 555..
ใน xml ด้านบนจะเป็นการใช้ LinearLayout ซ้อนๆกันโดยชั้นในสุดก็จะมี TextView แสดงสีออกมา LinearLayout ที่กำหนด orientation เป็น horizontal ก็จะมีการเรียง view ภายในเป็นแนวนอนไปจนสุด แต่ถ้าเป็น vertical ก็จะเรียงแนวตั้ง มีการใช้ layout_weight โดย attribute นี้สามารถใช้ได้ใน LinearLayout เท่านั้น โดยจะเป็นการให้น้ำหนักแต่ละ view ยกตัวอย่างง่ายๆ มี TextView อยู่ 2 ตัว กำหนด layout_weight ให้ตัวละ 1 ทั้งสอง view ก็จะมีเนื้อที่เท่ากัน แต่ถ้ากำหนด ให้อันหนึ่งเป็น 2 ก็จะแบ่งหน้าจอออกเป็น 3 ส่วน โดย view ที่กำหนดเป็น 2 ก็จะได้ไป 2 ส่วน อีก view ก็ได้ไปหนึ่งส่วน โดย layout_weight สามารถใช้ได้ทั้ง width และ height โดยกำหนดค่าเป็น 0dp แล้วใส่ layout_weight
ข้อที่ต้องระวังในการใช้ layout_weight คือไม่ควรใช้ layout_weight ซ้อนกันหลายๆชัั้น เพราะจะมีปัญหาเรื่องประสิทธิภาพ
ส่วน RelativeLayout ขอยกไปอีกบทความแล้วกันครับ ง่วงนอนเริ่มพิมพ์ผิดๆถูกๆแล้ว