androidアプリの画面でよく見かけるのがこういう画面。

画面の下端に横一列に並ぶ、タブメニューボタン。

これは、背景となる元画像あって、その上から文字を重ねているわけですが、その元画像のサイズの縦横比を維持したままで、端末の横幅に合わせて拡大縮小させて並べる必要があります。

↑のキャプチャ画面は、NexusSでアプリを開いた場合の画面で、↓のキャプチャはNexus7で開いた場合です。

 

androidは画面の解像度が多種多様なため、端末対応が大変です。レイアウトxmlを上手いこと設定しないと、画面が崩れて残念なことになってしまいます。

ちなみに、元画像は↓こんな感じです。

これと

これです。

・レイアウトを画面下部に固定する

これは簡単です。


<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/layout_main"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >

<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:gravity="center_vertical"
 android:orientation="horizontal" >

<!-- メインで表示されるレイアウト -->

</LinearLayout>

<!-- 下メニュー -->
 <LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal" >

<!-- 画面下部に固定で表示されるレイアウト -->

</LinearLayout>

</LinearLayout>

2つのLinearLayoutの、上に設置される方のandroid:layout_weightを1に設定します。

これで、タブメニューの高さ以外の部分は、すべて上のLinearLayoutが占有してくれます。

上のLinearLayoutの中にお好きなレイアウトを入れて、下のLinearLayoutにタブメニューのボタンを配置していきましょう。

 

・Buttonクラスを使ってみる

とりあえず、真っ先に浮かんだのがこの方法。

android:backgroundにボタン画像を指定したButtonクラスを、左から順番に4つ並べて、上述したandroid:layout_weightの使い方と同じ感覚で値を設定したものです。

このソースだと、こう表示されます。

一見良さそうに見えますが、よく見ると縦幅がちょっと伸びています。元画像と見比べてみてください。

どうやらButtonクラスは背景に指定した画像の縦横サイズなどは反映してくれないようです。

あくまで「Button」なので、背景に設定した画像の情報を持ってきていないのでしょうか。どうやっても画像の縦横比を維持したままでの拡大縮小はできませんでした。

 

・ImageButtonクラスを使ってみる

ボタン画像の縦横比が問題なので、次にImageButtonを試してみました。

これはImage画像に対してandroid:scaleTypeやandroid:adjustViewBoundsが有効なので、正確な縦横比で表示してくれるはずです。

このソースを実行してみると、こうなりました。

あれっ? 文字が表示されないよ……。

表示したいのは画像だけなので、android:background=”@null”と設定しているのですが、どうやらテキストはその部分に引っ張られるみたいですね。

ボタンの上下左右ならテキストも表示できるみたいなんですがね、重ねるのは不可能らしいです。

・結論、これしかないっぽい

FrameLayoutでImageViewとTextViewを重ねて配置します。それを横一列に並べて、4つのFrameLayoutのandroid:layout_weightの値を1にするのです。

そう、つまり力技です。

ボタン1つ分のFrameLayoutは下記のようになります。これを4つコピペして、表示される文字とかクリックリスナーに送られるビューとかを編集します。


<FrameLayout
 android:layout_weight="1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="horizontal" >
 <ImageView
 android:src="@drawable/bt_tab_menu"
 android:adjustViewBounds="true"
 android:scaleType="fitXY"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:onClick="loadCalender" />
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center|center_vertical"
 android:clickable="false"
 android:textSize="12sp"
 android:textColor="#000000"
 android:text="@string/calender" />
 </FrameLayout>

これで念願のレイアウトが完成しました。

色々と試行錯誤してて検索している人たちのお役に立てればいいなあ。

Post Navigation