画面下にある横スクロールするメニューの実装方法について

Android

今回は、Androidアプリでよく見かける、画面下にある横スクロールするメニューの実装方法を、ご紹介します。

こんなのです。

結論から言うと、画面レイアウトを定義するXMLファイルで横スクロールさせたいメニューのボタンを「HorizontalScrollView」タグで囲みます。

「ScrollView」が縦スクロールを行えるのに対し、「HorizontalScrollView」は横スクロールが行えます。

ただ、下のコードの様に複数のボタンを「HorizontalScrollView」で囲むと、実行時にエラーで強制終了となります。

<HorizontalScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="あいうえお" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="かきくけこ" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="さしすせそ" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="たちすてと" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="なにぬねの" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="はひふへほ" />

</HorizontalScrollView>

エラーの内容は「HorizontalScrollView can host only one direct child」です。
つまり、「HorizontalScrollViewは直接的には一人の子供しか面倒を見れません」と言われてしまいます。
なので、複数のボタンを「LinearLayout」で囲んでやればうまくいきます。

<HorizontalScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="あいうえお" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="かきくけこ" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="さしすせそ" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="たちすてと" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="なにぬねの" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="はひふへほ" />

    </LinearLayout>

</HorizontalScrollView>

ここまでで、「横スクロールするメニュー」を作成することができました。
あとは、「画面下」に配置してやれば、「画面下にある横スクロールするメニュー」の完成です。

その方法は、画面レイアウトを定義するXMLのルートを「RelativeLayout」にし、
「HorizontalScrollView」に「android:layout_alignParentBottom="true"」を指定すれば実現できます。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/relTop" >

<LinearLayout
    	android:layout_below="@id/relTop"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="本文" />

</LinearLayout>

<HorizontalScrollView
    android:layout_alignParentBottom="true"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="あいうえお" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="かきくけこ" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="さしすせそ" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="たちすてと" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="なにぬねの" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="はひふへほ" />

    </LinearLayout>

</HorizontalScrollView>

</RelativeLayout>

執筆者：中の人A