2013年2月1日金曜日

Androidでテキストとアイコンがあるボタンを作るには?

Androidでテキストとアイコンがあるボタンを作るにはどうしたらいいだろう?

<Button
  android:id="@+id/btnKeyReissue"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/btn_blue"
  android:drawableLeft="@drawable/key_reissue"
  android:onClick="onClickKeyReissue"
  android:padding="8sp"
  android:text="再発行"
  android:textColor="#FFFFFF"
  android:textSize="18sp"
  android:textStyle="bold"
  android:typeface="sans" />

drawableLeftにアイコンの画像をセットすればいい。しかし、この方法ではlayout_widthが伸びた時に問題が出てくる。


アイコンがボタンの左端の方に寄ってしまうのだ。文字列のすぐ左横にアイコンを表示して全体としてセンタリングされるのが望む表示なのだけど。。。

何とかなりそうなプロパティーとしてdrawableStart(API Level 17以上)があるのだけど、これに画像をセットしても表示されなかった。

TextView | Android Developers

まあ、これで表示されたとしてもAPI Level 17以上では使いようがないのだけど。さて、どうしたものか。

Androidでは表示オブジェクトをクリッカブルにするのに、必ずしもButtonを使う必要はない。LinearLayoutだってクリッカブルにはできる。そこで、こうした。

<LinearLayout
  android:id="@+id/btnKeyReissue"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/btn_blue"
  android:clickable="true"
  android:gravity="center"
  android:onClick="onClickKeyReissue"
  android:padding="8dp" >

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/key_reissue" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="再発行"
    android:textColor="#FFFFFF"
    android:textSize="18sp"
    android:textStyle="bold"
    android:typeface="sans" />
</LinearLayout>

つまり、LinearLayoutのclickableをtrueにすれば立派にボタンとして動作する。

UP状態。


DOWN状態。


この方法で問題ない場合は多いとは思う。しかし、他にもっと簡単な方法はないのだろうか・・・