Wednesday, August 27, 2014

自動でボタンを押した感をだすボタンの作成

Android-Lだとボタンに画像を貼ってそのままでボタンをおしたときのセレクターが自動で実装されてる感じなので、これいいなとおもっていたのですが、しばらくAndroid-LのSDKが下位レベルでサポートされない可能性を考えると自前で実装したほうがよさそうです。

基本的にAndroidのボタンは、なにもしていない状態、押した時の状態と画像を別々に準備し、それをselectorという画像切替用のXMLファイルを別途定義する必要があります。
これが地味に面倒くさい。
Photoshopであらかじめ彩度をおとしたりした画像を準備していました。

IOSだとこの辺りが自動だから楽なのでAndorid面倒くさいなぁとおもわれる点でもあるのですが、ちょっとこれも工夫をすると少しは楽になります。

public class AutoEffectImageButton extends ImageButton implements View.OnTouchListener{
    private ColorFilter mFilter;
    public AutoEffectImageButton(Context context) {
        super(context);
        setup();
    }

    public AutoEffectImageButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        setup();
    }

    public AutoEffectImageButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setup();
    }

    private void setup(){
        mFilter = new PorterDuffColorFilter(0x64FFFFFF, PorterDuff.Mode.DARKEN);
        setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                getDrawable().setColorFilter(mFilter);
                v.invalidate();
                break;
            }
            case MotionEvent.ACTION_UP: {
                getDrawable().clearColorFilter();
                v.invalidate();
                break;
            }
        }
        return false;
    }
}

上記のクラスのように押したときに、ボタンの色を変更する処理を実装するとプログラムでボタンをおしたときに彩度を落としてボタンを押した感じに表現することができます。
フィルターにはいろいろあるのでアプリに合うエフェクトを使うといいでしょう。
ちなみに、下記のサイトにPorterの違いを一覧にしてくれているサイトがあったので重宝しました。

http://d.hatena.ne.jp/gae+eyo/20111123/1322026548


No comments:

Post a Comment