Android入門【第4回：ImageSwitcherを使ってみる】
前回は設定画面を作成しましたが、設定できる内容が凄く寂しいので、画像を切り替えてみたいと思います。
Android入門【第3回：設定画面を作る】PreferenceActivity | Techfirm Android Lab
画像がずらっと並んでそこから選択する・・・だけでは面白くないので、何かないかとApiDemosのサンプルコードを色々とみていたのですが、今回はImageSwitcherを使ってみたいと思います。
サンプルコードもあるし、コピーして終わりか！と思ったのですが・・・
１．まずは動くところまで
とりあえず動かすだけなら簡単です。
クラスを一つ追加してサンプルコードを貼り付けて、他に必要な以下のものも追加。
ちなみにサンプルソースは以下をコピペ参考に。
http://d.android.com/guide/samples/ApiDemos/src/com/example/android/apis/view/ImageSwitcher1.html
このコードをImgSwitcher.javaというファイル名で追加。
その他には、ImageSwitcher用のレイアウトxml
/res/layout/switcher.xml
そして表示させる画像ファイルを以下に配置。
/res/drawable/
ここでは、表示用の画像と、選択用の小さな画像の2種類が必要です。
なのでファイル名はxxx.pngと、xxx_min.pngのようにしました。
（画像IDを格納している配列の要素はこれに合わせて変更しています）
サンプルソースの以下の部分で設定していますね。
この部分をこのように変更しています↓
各画像をそれぞれ2回設定しているのは、画像が少ないと表示が寂しい為です・・
２．実行
メイン画面であるBusStop側にも少し修正が必要です。
まずはmenu.xmlにボタンを一つ追加。
BusStop.javaにも以下の修正を実施。
これでメニューが増えました。（右下）
とりあえず実行。
それっぽく表示されました！
画面下部にある小さな画像をスライドさせると、大きな画像も合わせて切り替わります。
ですが、画像を選択しようが画面をタップしようがそれ以上何も起きない・・
画像選択時のイベントも無いし、呼び出し元にも何も手を加えていないので当然の結果でした。
という訳で、今回はここからが本番です（多分）
３．とりあえず戻れるようにする
サンプルから持ってきたコードをカスタマイズします。
まずはOnClickListener実装した以下のクラスを追加して、画像選択時のイベントを拾えるようにします。
画像をタップしたら元のActivity（BusStop）に戻るようにします。
makeView()内でリスナーをセットします。
これで、switcher画面で画像をタップすると、元のBusStop画面に戻りはしましたが・・・停車ボタンの画像は切り替わりません（当然）
４．選択した画像情報を元のActivityに戻す
さて、次は選択した画像の情報を戻して、メイン画面で表示する画像を差し替えます。
まずはonItemSelected内で現在の表示位置を保持。
先ほど実装したImageViewOnClickの中で、画像をタップした時にIDを以下の要領でIntentにセットします。
これで画像を選択した時に、Intentに必要な情報がセットされます。
“test”はintentを使用して値を受け渡す際のキーとなります。
受け取る側も同じキーでどういったデータが渡されたかを判別します。
なので、受け取る側も修正が必要です。
今度はBusStop.javaを修正します。
起動(onCreate)時にIntentの有無を確認し、値を取得します。
これで、完成です！
デフォルトではバス停車ボタンですが・・
画像を選択すると・・
ちゃんと選択した画像が反映されました。
ちょっと分り辛いですが、ちゃんと切り替わっているのです！
本当です！
しかし、画像が固定されたパターンのみなので、次回はもう少し柔軟に画像を切り替えられるようにしたいと思います。
カメラで撮った画像を選択して・・とか！
できるのか！俺！
