3月 30
今日はボタンのカスタマイズの話しです。

Android で用意されているボタン類はカスタマイズで見栄えを変えることができます。ここでは Button, CheckBox, RadioButton, ToggleButton で見栄えをチューンしてみました。左がチューン前、右がチューン後です。(チューン後に見栄えが良くなっているかどうかは微妙ですが、、)

device-1.png device-2.png

ボタンのクラス階層

よく使うボタン部品には Button, CheckBox, ToggleButton, RadioButton, ImageButton などがありますが、これらの部品のクラス階層は以下のようになっています。

java.lang.Object
  android.view.View
    android.widget.TextView
      android.widget.Button
        android.widget.CompoundButton
          android.widget.CheckBox
          android.widget.ToggleButton
          android.widget.RadioButton

ちなみに ImageButton のクラス階層はこうです。

java.lang.Object
  android.view.View
    android.widget.ImageView
      android.widget.ImageButton

ボタンの使い方

次にいろいろあるボタンの使い道について考えてみました。私の主観なのでそうではないかもしれませんがだいたいこんな感じでしょう。

Button

いわゆるボタン用の部品。押すと何かアクションを発生させたいときに使用します。ステートは保持しません。

Button は background パラメータに drawable 要素を指定することで見栄えを変更することができます。実は Button の実体は TextView を継承しただけのクラスで機能に代わりはありません。スタイル定義で background のスタイルを変更しているだけに過ぎません。つまり background を変更してしまう場合は Button をベースにしても TextView をベースにしても同じことが実現できます。もっと言うとボタンに text が必要ない場合(画像を指定する場合など)は View をベースとしても同じことでできます。

ImageButton

Button と機能は同じです。ImageView を継承しており ImageView の機能が使用できます。Button と ImageButton の関係は TextView と ImageView のボタンの関係と同じです。

CompoundButton

OFF/ON のステートを持ったボタンの共通機能を具備した抽象クラスです。抽象クラスなのでこれ自体をそのまま部品として使うことはできません。ステート(OFF/ON)を持ち、背景とは別にその状態を示す表現を button パラメータで指定できます。この button パラメータに @null を指定することで状態を示す部分を無くすることも可能です。(この button に @null を指定する方法はサンプルアプリの RadioButton の2つ目の例として紹介しています。)

CheckBox

OFF/ON の状態を表現するボタンで ToggleButton と同じ機能を持ちます。CheckBox はどちらかというと文章メインで長い文字列を指定する場合はこちらを使うと良いでしょう。この実体は CompoundButton そのままで、そのデザインがスタイルで定義されているだけです。(TextView と Button の関係と同じです。)

ToggleButton

OFF/ON の状態を表現するボタンで CheckBox と同じ機能を持ちます。ToggleButton は CheckBox とは逆でイメージがメインで指定する文字も長いものは適していません。いわゆるスイッチを作る場合に重宝する部品だと思います。なお、ステートが OFF/ON のときのテキストを textOff/textOn パラメータで指定することができます。

RadioButton

複数の中からひとつを選択する場合に用いるボタン。RadioGroup と複数の RadioButton を組み合わせて用いる。単体としては CompoundButton ほぼそのままであるが、1点 ON 状態の場合にボタンが押されても OFF にならないように toggle() メソッドがオーバーライドされている。サンプルアプリでは button パラメータを活かしたチューンと、button パラメータに @null を指定し機能を殺したチューンの2通りを紹介しています。

ステートリスト

background パラメータや button パラメータでは状態によって drawable を変化できるステートリストを指定するのが一般的です。ステートリストのフォーマットは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]
    android:dither=["true" | "false"]
    android:variablePadding=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

この方法を使って各種状態の drawable を指定すればいいのですが、どこまで指定すれば良いか迷ってしまいますよね。ちなみに私は次のような基準で使っています。(サンプルコードはこの方針で作成しています。)

Button

「無効」「通常」「押された状態」の3種類。

CheckBox, ToggleButton, RadioButton

「無効」「OFF状態」「ON状態」の3種類。

サンプルコード

いつものようにサンプルアプリのソースコードは Google Code で公開しています。完全なサンプルコードを参照したい場合はそちらをどうぞ。



Posted by sak+

Comments are closed.

preload preload preload