안드로이드 레이아웃 세로 스크롤 구현 방법 – ScrollView 사용법 총정리

세로 스크롤뷰(Vertical ScrollView)란?

예제를 시작하기 전에 세로 스크롤뷰가 무엇인지 먼저 알아보겠습니다. 안드로이드에서 세로 스크롤은 android.widget.ScrollView 클래스를 통해 제공됩니다. ScrollView는 화면에 한 번에 다 담지 못하는 자식 뷰(child views)들을 수직 방향으로 스크롤하여 볼 수 있게 해주는 컨테이너 위젯입니다.

이번 예제에서는 세로 스크롤뷰를 실제로 어떻게 활용하는지 단계별로 살펴보겠습니다.

1단계: 새 프로젝트 생성

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

2단계: activity_main.xml 레이아웃 작성

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(세로 스크롤뷰)를 추가했습니다. ScrollView는 자식 뷰를 수직 방향으로 스크롤해 주기 때문에, ScrollView의 직접적인 자식으로 orientation이 vertical로 설정된 LinearLayout을 배치하고, 그 안에 여러 개의 자식 뷰를 넣었습니다.

여기서는 스크롤 효과를 확인할 수 있도록 총 5개의 ImageView를 자식 뷰로 추가했으며, 각 이미지 사이에는 30dp의 상단 마진을 두어 시각적으로 구분되게 했습니다.

3단계: 매니페스트 및 액티비티 수정 불필요

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

앱 실행 및 결과 확인

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

위 화면은 앱 실행 시 처음 보이는 초기 화면입니다. 이제 화면을 위아래로 드래그(스크롤)하면 아래 이미지처럼 뷰들이 수직 방향으로 움직입니다.

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

계속해서 스크롤하면 마지막에는 위 이미지와 같이 ScrollView의 가장 마지막 위치, 즉 다섯 번째 이미지까지 도달하게 됩니다.

마무리 정리

이번 예제를 통해 안드로이드에서 ScrollView를 활용해 레이아웃을 세로로 스크롤하는 방법을 알아보았습니다. 핵심 포인트를 정리하면 다음과 같습니다.

• 세로 스크롤은 android.widget.ScrollView 클래스로 구현한다.
• ScrollView는 직접 자식으로 하나의 뷰만 가질 수 있으므로, LinearLayout 등의 컨테이너로 감싸야 한다.
• 내부 컨테이너의 orientation을 vertical로 설정해야 자식 뷰들이 세로로 배치된다.

리스트 형태의 많은 데이터를 표시해야 한다면 ScrollView 대신 성능 최적화가 되어 있는 RecyclerView나 ListView를 사용하는 것이 좋습니다. ScrollView는 로그인 폼, 설정 화면처럼 고정된 소수의 뷰를 스크롤할 때 적합합니다.