วิธีทำให้ Layout เลื่อนแนวตั้ง (Vertical Scroll) ใน Android

บทนำ

ScrollView (android.widget.ScrollView) เป็น ViewGroup ที่ทำให้ Child View เลื่อนได้ในแนวตั้ง (Vertical) ใช้เมื่อเนื้อหายาวกว่าหน้าจอ ต้องใส่ Child แค่ 1 ตัว (มักเป็น LinearLayout แนวตั้ง)

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

เปิด Android Studio เลือก File → New Project กรอกข้อมูลที่จำเป็น

ขั้นตอนที่ 2: ออกแบบ Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/layout"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="#c1c1c1"
                android:src="@drawable/a"
                android:scaleType="centerCrop"
                android:contentDescription="Image A" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="#c1c1c1"
                android:layout_marginTop="30dp"
                android:src="@drawable/b"
                android:scaleType="centerCrop"
                android:contentDescription="Image B" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="#c1c1c1"
                android:layout_marginTop="30dp"
                android:src="@drawable/c"
                android:scaleType="centerCrop"
                android:contentDescription="Image C" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="#c1c1c1"
                android:layout_marginTop="30dp"
                android:src="@drawable/d"
                android:scaleType="centerCrop"
                android:contentDescription="Image D" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="#c1c1c1"
                android:layout_marginTop="30dp"
                android:src="@drawable/e"
                android:scaleType="centerCrop"
                android:contentDescription="Image E" />

        </LinearLayout>

    </ScrollView>

</LinearLayout>

จุดสำคัญของ ScrollView

• ต้องมี Child **เพียง 1 ตัว** (ที่นี่คือ LinearLayout แนวตั้ง)
• Child ต้องมี layout_height="wrap_content" เพื่อให้สูงตามเนื้อหา
• android:fillViewport="true" ทำให้ ScrollView ขยายเต็มหน้าจอแม้เนื้อหาน้อย
• ไม่ควรใส่ ScrollView ซ้อน ScrollView หรือ RecyclerView ใน ScrollView

ขั้นตอนที่ 3: ไม่ต้องแก้ไข Java/Kotlin และ Manifest

ScrollView ทำงานอัตโนมัติจาก XML ไม่ต้องเขียนโค้ดเพิ่ม

การทดสอบแอปพลิเคชัน

รันแอปบนอุปกรณ์จริง

หน้าจอเริ่มต้น

เลื่อนลงไปกลาง

เลื่อนถึงท้ายสุด

HorizontalScrollView (เลื่อนแนวนอน)

หากต้องการเลื่อนแนวนอน ใช้ HorizontalScrollView แทน (Child ต้องเป็น LinearLayout แนวนอน)

แทนที่ด้วย NestedScrollView (แนะนำ)

สำหรับ API 21+ ควรใช้ androidx.core.widget.NestedScrollView รองรับ Nested Scrolling ดีกว่า

สรุป

ห่อ Content ด้วย ScrollView → LinearLayout (vertical) → เนื้อหา จะได้การเลื่อนแนวตั้งอัตโนมัติเมื่อเนื้อหายาวกว่าจอ