kojiko-android’s blog

開発中にハマった時の解決策や、忘れがちなことを残しておきます。

Viewを指に追従させる方法

ボタン等のViewをタッチし、そのまま指をスライドさせたときに、
指にくっついて来るようにViewを動かす方法です。

サンプルでは横移動のみに制限し、指を離すとゴムのように元の位置に戻る動きをします。
iOSの”スライドでロック解除”のイメージ)

Viewのタッチリスナーに以下のように記述します。

movableButton.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        v.setTag(event.getX());
                        break;
                    case MotionEvent.ACTION_MOVE:
                        float f = event.getRawX();
                        v.setTranslationX(f - (float)v.getTag());
                        break;
                    case MotionEvent.ACTION_UP:
                        ObjectAnimator.ofFloat(v, "translationX", v.getTranslationX(), 0f)
                                .setDuration(100l)
                                .start();

                }
                
                return false;
            }

        });


getRawX()では、スマホの画面に対する絶対位置を取得できます。
getX()は、Viewに対する相対的な位置を取得するので、
指を動かしたときにViewを移動させると、その都度、相対位置が変わってしまいます。


アクションダウンで、移動開始時のX値を取得しておきます。
フィールドを使わずシンプルにするため、Viewのタグを利用しました。
v.setTag(event.getX());


アクションムーブで移動量を求め、
その値の分だけViewを移動します。

float f = event.getRawX();
v.setTranslationX(f - (float)v.getTag());


指を離したときに、元の位置に戻るアニメーションです。
移動後の現在位置から元々設置されていた位置まで戻る動きをします。