[Android] 独自のボタンスタイルを定義する


Androidアプリの開発において、きめ細かなUIを提供するためには独自のルックアンドフィールを持つUI部品の提供は欠かせません。もちろん、OSが提供する標準部品を活用することは前提ですが、Androidではあまり幅広い要件をカバーできるようなUI部品の提供が行われていないのも現実です。

今回はボタン(android.widget.Button)の見た目をカスタマイズする方法をメモします。

準備するもの

  • 通常、フォーカス、クリック時の画像
  • 画像のセレクタ (res/drawable/hoge_selector.xml)
  • ボタンのスタイル (res/values/styles.xml など)
  • そしてスタイルを適用するボタン自身
順に見ていきます。
通常、フォーカス、クリック時の画像。9patchを使用して伸縮しても見た目が悪くならないよう調整しておきます。フォーカス時の画像は、フォーカスが当たっている間表示されますので、それなりに見やすい色になるよう配慮します。クリック時の画像はタップしたときの一瞬しか表示されないので派手めにしたほうが分かりやすいでしょう。
画像のセレクタは、ボタンの各状態ごとに使用する画像を定義します。以下のように作成します。
[res/drawable/flat_button_selector.xml]

ボタンのスタイルは、スタイルを適用するボタンのstyleプロパティで参照します。スタイルは以下のように作成します。

[res/values/styles.xml]

ここまで準備できたら、実際のレイアウトファイルに適用してみます。貼りつけたボタンのプロパティ”style”を設定するとプレビューの見た目も変わります。

そして、実行。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">