【Android】画面下側からTabっぽいものを表示させてみる
こんにちわ、pencoです。
今回は、Tabを画面下から出す方法についてです。
実際には ActionBar のTabを使うのではなく、似たようなUIを作成します。
「Actionbar tab 下」などで調べるとTabHost を使用した方法がでてくると思いますが、TabHost は3.x 以降では非推奨になっています。そのため、RadioButton を使用してTabっぽいものを作ってみたいと思います。
完成イメージはこんな感じです。

画像リソースの準備
まずはリソースの準備から。
必要なのは、タブの表示するアイコン画像です。
タブ選択時と非選択時の2種類を、タブの分だけ作成します。
後で9Patch にするので、高さだけ気にすれば横幅は多少余白がある程度で大丈夫です。
今回はActionBar の高さに揃えたいと思います。
ActionBar に使用するアイコンサイズは
- hdpi … 48px
- xhdpi … 64px
- xxhdpi … 96px
なので、使用する端末に合わせてサイズを変更して下さい。
アイコン画像の高さを、上記サイズにします。
次にこの画像を9Patch にします。
9Patch にする方法については、こちらのサイト様が分かりやすいと思います。
[android-sdk]NinePatchを使って簡単に吹き出しを作る
左右がバランスよく伸びてくれなかったり、色々試行錯誤した結果、コンテンツ領域の1px 外側の左右に1px ずつ拡大可能領域を設定すると、キレイに伸びてくれました。
あくまで、参考程度に。
selectorで切り替える
次に、作成した画像をselector を使って切り替えられるようにしたいと思います。
selector_tab_bar.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 選択時 --> <item android:state_checked="true" android:drawable="@drawable/growing_active"> </item> <!-- 非選択時 --> <item android:drawable="@drawable/growing_normal"> </item> </selector>
RadioButton を使うので、選択時は state_checked=”true” にしておいて下さい。
レイアウト設定
最後に、layout.xml の設定です。
<LinearLayout android:id="@+id/footerlayout2" android:layout_width="match_parent" android:layout_height="48dp" android:layout_alignParentBottom="true" android:background="@color/actionbar_bg" > <RadioGroup android:id="@+id/radioGroup2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <RadioButton android:id="@+id/radio_conclusion" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/selector_tab_conclusion" android:button="@null" android:checked="true" /> <RadioButton android:id="@+id/radio_bar" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/selector_tab_bar" android:button="@null" /> <RadioButton android:id="@+id/radio_chart" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/selector_tab_chart" android:button="@null" /> </RadioGroup> </LinearLayout>
RadioButton を3つ均等になるようにlayout_weight を設定し、background に先程作成したselector のxml を指定しています。また、RadioButton のチェックする画像部分を消すためにandroid:button=”@null” を設定しています。
あとはこれを好きな位置に配置すればOKなので、layout_alignParentBottom=”true” で画面下側に設定しました。
これにて完成。
コメントをどうぞ