【Android】GalleryのようなHorizontalScrollView（横スクロールビュー）を実装する方法

HorizontalScrollViewとは？

例に入る前に、HorizontalScrollViewについて簡単に確認しておきましょう。HorizontalScrollViewはandroid.widget.HorizontalScrollViewクラスとして提供されるウィジェットで、子ビューを水平方向（横方向）にスクロールさせるためのコンテナです。かつて標準だった「Gallery」のような横スライド型のUIも、この仕組みをベースに簡単に実装できます。

この記事では、HorizontalScrollViewを使って複数の画像を横方向にスクロール表示する方法を、実際のコード例とともに解説します。

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

コードのポイント

上記のコードでは、ルートにLinearLayoutを配置し、その中にHorizontalScrollViewを追加しています。HorizontalScrollViewは直接の子として単一のビューしか持てないため、子としてLinearLayoutを設定し、さらにその中にスクロールさせたいImageViewを5つ並べています。各ImageViewは幅300dpで統一し、2つ目以降には30dpの左マージンを指定することで、画像同士の間に適度な余白を作っています。

手順3：manifest.xmlとActivityの変更

AndroidManifest.xmlやMainActivityなどのアクティビティファイルには、特別な変更を加える必要はありません。

アプリを実行してみる

それでは、アプリを実際に実行してみましょう。ここでは、実際のAndroid端末をPCに接続しているものとします。Android Studioでプロジェクト内の任意のアクティビティファイルを開き、ツールバーの実行アイコン をクリックしてください。プルダウンから接続した端末を選択すると、端末に以下のような初期画面が表示されます。

この初期画面の状態から、指で横方向にスワイプすると、次のように画像がスライドしていきます。

複数のImageViewが水平方向にスクロールされていることが確認できます。

最後までスクロールすると、上の画像のようにHorizontalScrollViewの末尾にある画像の位置で停止します。

まとめ

HorizontalScrollViewを利用すれば、RecyclerViewなどを用意しなくても、少ないコード量でギャラリー風の横スクロールUIを実装できます。画像が少数の場合には非常に手軽な選択肢です。一方で、アイテム数が多い場合や無限スクロール・再利用が必要なケースでは、RecyclerView＋LinearLayoutManager（horizontal指定）の活用も検討するとよいでしょう。