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

Androidで画面の内容を上下にスクロールさせたいときに活躍するのがandroid.widget.ScrollViewクラスです。ScrollViewは、子ビュー（Child Views）を垂直方向にスクロールさせるためのウィジェットで、画面に収まりきらない長いコンテンツを表示する際に欠かせない存在です。

この記事では、垂直スクロールビュー（Vertical ScrollView）の基本的な仕組みと、実際にレイアウトを垂直方向にスクロールさせる手順を、サンプルコードとともにわかりやすく解説します。

Step 1：Android Studioで新規プロジェクトを作成する

まず、Android Studioを起動し、メニューから「File」→「New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成しましょう。

Step 2：res/layout/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を設置し、さらにその中にスクロールさせたい要素を並べています。

今回のサンプルでは、高さ300dpのImageViewを5つ縦に並べ、余白（marginTop）を30dpずつ空けて配置しています。これにより、画面からはみ出した分がスクロール可能になります。

Step 3：マニフェストやアクティビティの変更は不要

今回はレイアウトだけで完結するシンプルな例なので、manifest.xml や Activityファイルを変更する必要はありません。そのまま次のステップへ進みましょう。

アプリを実行して動作を確認する

それでは、アプリを実際に実行してみましょう。実機のAndroidスマートフォンがパソコンに接続されていることを前提に説明します。Android Studioでプロジェクト内の任意のActivityファイルを開き、ツールバーにある「Run」アイコン をクリックしてください。

表示された選択肢から自分のモバイルデバイスを選択すると、接続した端末にアプリが起動し、初期画面が表示されます。

上記がアプリ起動直後の初期画面です。この状態から画面を上下にフリック（スワイプ）すると、以下のようにImageViewが垂直方向にスクロールしていきます。

このように、ScrollViewのおかげで、画面に収まらない5枚の画像を指一本で滑らかに縦方向へスクロールできます。

最後までスクロールすると、上図のように垂直スクロールビューの最下部に到達します。

まとめ

垂直方向のスクロールを実装したい場合は、ScrollViewを使うのが基本です。ポイントは以下の通りです。

• ScrollViewは垂直方向専用のスクロールウィジェットである
• ScrollViewの直接の子として配置できるビューは1つだけなので、LinearLayoutなどをコンテナとして使う
• 横方向にスクロールしたい場合はHorizontalScrollViewを使用する

リスト形式のデータを大量に表示する場合はRecyclerViewの利用も検討するとよいでしょう。まずは今回のようなシンプルな例でScrollViewの挙動をつかんでおくと、より複雑なレイアウトにも応用しやすくなります。