【Android】レイアウトを垂直方向にスクロールさせるには？ScrollViewの使い方を解説

垂直ScrollView（スクロールビュー）とは

実装例に入る前に、まず「垂直ScrollView」とは何かを理解しておきましょう。垂直ScrollViewは android.widget.ScrollView クラスによって提供されるUIコンポーネントで、子ビューを垂直方向（上下）にスクロールさせるために使用されます。画面に収まりきらないコンテンツを表示したい場合に非常に便利です。

本記事では、Android Studioを使って垂直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を配置しています。ScrollViewは子ビューを垂直方向にスクロールする役割を持つため、ScrollViewの直下には単一の子として LinearLayout（orientation="vertical"）を設定し、さらにその中に表示したい要素を並べています。今回はスクロール確認用として、5つの ImageView を縦に配置しました。

ステップ3：manifestやActivityは変更不要

AndroidManifest.xml やActivityクラスのコードを変更する必要はありません。

アプリの実行

それでは、アプリケーションを実行してみましょう。実際のAndroid端末がパソコンに接続されているものとして説明します。Android Studioからアプリを実行するには、プロジェクト内の任意のActivityファイルを開き、ツールバーの「Run」アイコンをクリックしてください。実行先のデバイスとして接続したモバイル端末を選択すると、端末の画面に以下のような初期画面が表示されます。

上の画像が起動直後の初期画面です。この状態から垂直方向にスワイプすると、次のようにコンテンツがスクロールしていきます。

このように、5つの ImageView が順番に垂直方向へスクロールされていきます。

最終的には、上の画像のように垂直ScrollViewの最下部まで到達します。これで、ScrollViewを使った垂直スクロールレイアウトの完成です。