안드로이드에서 레이아웃을 세로로 스크롤하는 방법 (ScrollView 완벽 가이드)

세로 스크롤뷰(ScrollView)란?

본격적인 예제에 들어가기 전에 세로 스크롤뷰(Vertical ScrollView)가 무엇인지 먼저 알아보겠습니다. 안드로이드의 세로 스크롤뷰는 android.widget.ScrollView 클래스를 통해 제공되며, 한 화면에 다 담지 못하는 자식 뷰들을 세로 방향으로 스크롤해서 볼 수 있도록 도와주는 컨테이너 뷰입니다.

이번 예제에서는 세로 스크롤뷰를 실제로 구현하고 사용하는 방법을 단계별로 살펴보겠습니다.

1단계: 새 프로젝트 생성

Android Studio를 실행한 후 File → New Project 메뉴로 이동하고, 새 프로젝트 생성에 필요한 모든 정보를 입력해 새 프로젝트를 만듭니다.

2단계: 레이아웃 파일 작성

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">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:background="#c1c1c1"
                android:layout_height="300dp"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="match_parent"
                android:background="#c1c1c1"
                android:layout_height="300dp"
                android:layout_marginTop="30dp"
                android:src="@drawable/b"/>
            <ImageView
                android:layout_width="match_parent"
                android:background="#c1c1c1"
                android:layout_height="300dp"
                android:layout_marginTop="30dp"
                android:src="@drawable/c"/>
            <ImageView
                android:layout_width="match_parent"
                android:background="#c1c1c1"
                android:layout_height="300dp"
                android:layout_marginTop="30dp"
                android:src="@drawable/d"/>
            <ImageView
                android:layout_width="match_parent"
                android:background="#c1c1c1"
                android:layout_height="300dp"
                android:layout_marginTop="30dp"
                android:src="@drawable/e"/>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

위 코드에서는 LinearLayout을 부모 레이아웃으로 선언하고 그 안에 세로 스크롤뷰(ScrollView)를 배치했습니다. 세로 스크롤뷰는 자식 뷰들을 세로 방향으로 스크롤하기 때문에, 내부에 orientation이 vertical로 설정된 LinearLayout을 하나 두고 그 안에 스크롤할 자식 뷰들을 넣어주는 구조입니다.

여기서는 총 5개의 ImageView를 자식으로 추가했으며, 각 이미지는 높이 300dp와 상단 마진 30dp를 적용해 스크롤 효과가 잘 드러나도록 했습니다.

참고: ScrollView는 직접적인 자식 뷰를 오직 하나만 가질 수 있습니다. 여러 개의 뷰를 스크롤하려면 위 예제처럼 LinearLayout 등의 레이아웃으로 감싸야 합니다.

3단계: 매니페스트 및 액티비티 설정

이 예제는 레이아웃만으로 동작을 확인할 수 있으므로, manifest.xml과 액티비티 파일은 별도로 수정할 필요가 없습니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정하고 진행합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘 을 클릭하세요. 실행 옵션 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 초기 화면이 표시됩니다.

위 화면은 앱 실행 시 처음 보이는 초기 화면입니다. 여기서 손가락으로 화면을 위로 밀어 세로로 스크롤하면 아래 이미지처럼 뷰들이 스크롤됩니다.

위 결과에서 볼 수 있듯이, ImageView들이 세로 방향으로 부드럽게 스크롤되는 것을 확인할 수 있습니다.

스크롤을 계속하면 결국 세로 스크롤뷰의 마지막 위치에 도달하게 되며, 위 이미지처럼 마지막 ImageView까지 표시됩니다.