วิธีกำหนด Layout แยกสำหรับ Portrait และ Landscape ใน Android

บทความนี้สาธิตวิธีสร้าง Layout แยกต่างหาก สำหรับโหมดแนวตั้ง (Portrait) และแนวนอน (Landscape) ใน Android โดยใช้ Resource Qualifiers

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → File → New Project

ขั้นตอนที่ 2: Layout สำหรับ Portrait (Default)

ไฟล์ res/layout/activity_main.xml (ใช้เมื่อแนวตั้ง):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f6f4"
    android:padding="10dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Show Orientation mode" />

    <TextView
        android:id="@+id/tvLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button"
        android:layout_centerInParent="true"
        android:layout_marginTop="16sp"
        android:text="Portrait Mode"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>

ขั้นตอนที่ 3: สร้าง Layout สำหรับ Landscape

วิธีสร้างใน Android Studio:

1. คลิกขวาที่โฟลเดอร์ res → New → Android Resource Directory
2. Resource type: layout
3. Available qualifiers: เลือก Orientation → Click >>
4. เลือก Landscape → OK
5. จะได้โฟลเดอร์ res/layout-land/
6. สร้างไฟล์ activity_main.xml ใหม่ในโฟลเดอร์นี้

เนื้อหา res/layout-land/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="128dp"
        android:text="Show Orientation mode" />

    <TextView
        android:id="@+id/tvLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="64dp"
        android:layout_toEndOf="@id/button"
        android:text="Landscape Mode"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>

ขั้นตอนที่ 4: เขียนโค้ด MainActivity (Kotlin)

import android.content.res.Configuration
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var textView: TextView
    lateinit var button: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"

        textView = findViewById(R.id.tvLayout)
        button = findViewById(R.id.button)

        button.setOnClickListener {
            val orientation = resources.configuration.orientation
            if (orientation == Configuration.ORIENTATION_PORTRAIT) {
                Toast.makeText(this@MainActivity, "We are in portrait mode", Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this@MainActivity, "We are in Landscape mode", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

Resource Qualifiers อื่นๆ ที่น่าสนใจ

การจัดการ Configuration Changes

โดยค่าเริ่มต้น Android จะ ทำลายและสร้าง Activity ใหม่ เมื่อหมุนหน้าจอ หากต้องการจัดการเอง:

// ใน AndroidManifest.xml
<activity
    android:name=".MainActivity"
    android:configChanges="orientation|screenSize|screenLayout" />

// ใน Activity
@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    // จัดการเอง ไม่ recreate
}

แนะนำ: ให้ Android จัดการเอง (recreate) และใช้ ViewModel + LiveData เพื่อเก็บข้อมูลไว้