画面下にある横スクロールするメニューの実装方法について
今回は、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