androidでボタンがタッチされたときに画像を変更する

androidアプリでandroid.widget.ButtonのBackgroundプロパティに画像を設定したり、android.widget.ImageButtonのSrcプロパティに画像を設定したりすることはよくあると思います。

iOSでは、これだけでボタンがタッチされたら自動的に画像の明度を落としたようにハイライトしてくれるので、それに甘えているのが常なんですが、androidでも同様かと思いきやandroidでは何もしてくれません。

やはり、ボタンが押されているということを視覚的に表現したいと思いますよね。

まず、私が試したのは、通常の画像（仮にnormal.pngとします）と押された状態の画像（仮にpressed.pngとします）の二種類の画像を用意します。

そして、OnTouchListenerを使用して下のようにイベントリスナーで処理します。

((Button)findViewById(R.id.button2)).setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_DOWN){
            ((Button)v).setBackgroundResource(R.drawable.pressed);
        }else if(event.getAction() == MotionEvent.ACTION_CANCEL ||
          event.getAction() == MotionEvent.ACTION_OUTSIDE ||
          event.getAction() == MotionEvent.ACTION_UP){
            ((Button)v).setBackgroundResource(R.drawable.normal);
        }
        return false;
    }
});

注）このときfalseを返さないとOnClickListenerに処理が回ってきません。

ただ、このようにしてもボタンを押したまま指がボタンを外れても画像が戻ってくれませんでした。しかもこのMotionEventの定数は非常に多岐に渡っていて、きちんとやろうと思えばいろいろなケースに対応する必要があり正直面倒そうです。

で、見つけたのがselectorを使うという方法です。drawableの中にselectorというタイプのXMLファイルを作成します。ファイル名が@drawable/...に指定するリソース名になります。

以下のように記述します。

これで、ちゃんと押したまま指がボタンを外れても元の画像に戻ってくれます。

androidでは、いろんな場面でXMLが活躍するみたいですね。とりあえずはここを極めないといけないかもしれませんね。