PR

Android Studioサンプルアプリ解説集 - ボタンの状態によって画像を変えるButtonState

2015年7月13日(月)
羽山 博(はやま ひろし)
イラストでよくわかるAndroidアプリのつくり方—Android Studio対応版
Amazon詳細ページへ
この記事では、書籍『イラストでよくわかるAndroidアプリのつくり方—Android Studio対応版』の解説内容をもとに、本書で説明しきれなかったサンプルアプリを解説しています。

ButtonウィジェットやImageButtonウィジェットでは、ボタンを押したときや離したときに表示される画像を変えることができます。XMLの記述だけでできるので、とても簡単です。Javaのコードを書く必要はありません。

アプリケーションの実行結果から見てみましょう。画面にはボタンが1つ配置されているだけです。ボタンを押したとき、フォーカスがあるとき、ボタンが押されていないとき(通常の状態)で、表示が変わります。「フォーカスがある」というのは、入力などの操作ができる状態を意味します。

ButtonStateの実行例

押されたとき

押されたとき

フォーカスがあるとき

フォーカスがあるとき

通常

通常

アプリは以下のような設定で作成します。表にない項目については、設定を変更しません。

項目名設定する内容
Application NameButtonState
Company Domainsample.example.com

まず、ボタンに表示される画像をdrawableフォルダーにコピーします。ボタンには、押された状態、フォーカスがある状態、通常の状態という3つの状態があるので、画像も3つ必要になります。ここでは以下3つの画像ファイルをコピーしたものとします。

  • 押された状態:droidkun1.png
  • フォーカスがある状態:droidkun2.png
  • 通常の状態:droidkun3.png

3つの状態と画像を対応させるには、というタグを使います。の中にというタグを書き、状態と画像の対応を指定します。ただし、この記述は新しいXMLファイルの中に書いておく必要があります。以下の手順でXMLファイルを作成し、記述を追加してください。

  1. res/drawableを右クリックする
  2. [New]-[File]を選択する
  3. ファイル名に「bgimage.xml」と入力する
  4. [OK]をクリックする

作成されたbgimage.xmlファイルに以下のような内容を入力します。

xml > res/drawable/bgimage.xml

 1: <?xml version="1.0" encoding="utf-8"?>
 2: <selector xmlns:android="http://schemas.android.com/apk/res/android">
 3:     <item android:state_pressed="true" android:drawable="@drawable/droidkun1" />
 4:     <item android:state_focused="true" android:drawable="@drawable/droidkun2" />
 5:     <item android:drawable="@drawable/droidkun3" />
 6: </selector>

selectorは「選択肢」といった意味です。itemタグには選択肢のそれぞれの項目を書きます。書き方は以下のようになっています。

  • state_pressed:「押された状態」のこと。state_focusedならフォーカスのある状態を表す
  • @drawable/:その状態のときに表示する画像ファイルのリソースIDを指定

通常の状態を表す場合には、state_pressedやstate_focusdは指定せずに画像ファイルのリソースIDだけを指定します。なお、これらのタグはリストに示したのと同じ順序で記述する必要があります。

最後に、Buttonウィジェットのbackgroundプロパティに「@drawable/bgimage」を指定するだけです。これは、上で作ったbgimage.xmlのリソースIDです。リソースIDはXMLファイルのファイル名から拡張子(.xml)を取り除いたものになっています。

なお、ButtonではなくImageButtonを使う場合には、backgroundプロパティの代わりにsrcプロパティに”@drawable/bgimage”を指定します。

今回解説したのは書籍のサポートページにある「さらに高度なアプリ」の中の「ButtonState」というサンプルです。本書で扱っている他のアプリもぜひ遊んでみてください。
http://book.impress.co.jp/books/1114101120_4

この記事のもとになった書籍はこちら!
イラストでよくわかるAndroidアプリのつくり方—Android Studio対応版

羽山 博/めじろまち 著
価格:2,200円+税
発売日:2015年6月5日発売
ISBN:978-4-8443-3813-0
発行:インプレス

イラストでよくわかるAndroidアプリのつくり方—Android Studio対応版

プログラミング未経験でも大丈夫! Android Studio対応のAndroidアプリ開発入門、決定版。好評だった前作『イラストでよくわかるAndroidアプリのつくり方』に改訂版が登場。親しみやすいイラストやステップバイステップでの丁寧な解説といった基本コンセプトを踏襲しつつ、最新版のSDKや、Androidの新しい開発環境である「Android Studio」に対応させました! Androidのプログラムを作りながら、自然にJavaというプログラム言語の知識が身につくようになっています。

Amazon詳細ページへImpress詳細ページへ

著者
羽山 博(はやま ひろし)

京都大学文学部哲学科(心理学専攻)卒業後、NECでユーザー教育や社内SE教育を担当したのち、ライターとして独立。ソフトウェアの基本からプログラミング、認知科学、統計学まで幅広く執筆。読者の側に立った分かりやすい表現を心がけている。2006年に東京大学大学院学際情報学府博士課程を単位取得後退学。現在、有限会社ローグ・インターナショナル代表取締役、日本大学、青山学院大学、お茶の水女子大学講師。 最近の趣味は書道、絵画、ウクレレ、ジャグリング、献血。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています