Androidアプリ製作のいろいろ

役に立ったり面白かったり楽しかったり いろんなAndroidアプリケーションを作れるように いろいろ調べたり集めたり

2012年4月17日火曜日

画像ボタンをタップしている間、別の画像に差し替えるには

画面上のボタンをタップして何かの処理を行うときに、
画像を使ったボタンを使用することがあると思います。
このとき、ユーザがボタンを押していることを視覚的に理解しやすいように、
タップしている間はボタンがハイライトしているように見せることが有効です。
実装では、通常の画像とタップしている画像の2つを用意し、
タップしている間は画像を差し替える処理を行います。


まずは画面レイアウト
(main.xml)
==============================================================


    
==============================================================
注)ここではImageButtonクラスではなく、Buttonクラスを使用しています。

画面レイアウトについては、特別な記述は不要です。
Buttonクラスの背景に android:background=" " で画像を定義します。
定義する画像は
通常時に表示する画像=ボタンを押していない時に表示する画像」を設定します。


次にActivityを実装します。
(ButtonTapDemoActivity)
==============================================================
public class ButtonTapDemoActivity extends Activity {

 private Button bt_start;
 private Button bt_stop;

 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        bt_start   = (Button) findViewById(R.id.bt_start);
        bt_stop    = (Button) findViewById(R.id.bt_stop);

  bt_start.setOnTouchListener(new View.OnTouchListener() {
   @Override
   public boolean onTouch(View arg0, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
     bt_start.setBackgroundResource(R.drawable.bt_start_tap);
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
     bt_start.setBackgroundResource(R.drawable.bt_start_);
    }
    return false;
   }
  });

  bt_stop.setOnTouchListener(new View.OnTouchListener() {
   @Override
   public boolean onTouch(View arg0, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
     bt_stop.setBackgroundResource(R.drawable.bt_stop_tap);
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
     bt_stop.setBackgroundResource(R.drawable.bt_stop_);
    }
    return false;
   }
  });
    }
}
==============================================================

Buttonクラスのインスタンスを生成します。
画面レイアウトのidと関連付けし、タッチリスナーを登録します。
onTouchイベントで、
ACTION_DOWN時にハイライト画像をセット、
ACTION_UP時に通常時の画像に戻すよう記述します。
そうすると、ボタンをタップしている間の画像が切り替わります。

「測定開始」ボタンを押すと



このように画像が切り替わります。





参考)ボタンに使用した画像

bt_start_


bt_start_tap


bt_stop_


bt_stop_tap

0 件のコメント:

コメントを投稿