2011年3月1日火曜日

フリックを実現する - Coding a flick -

このエントリーをはてなブックマークに追加
フリックはGestureDetector.OnGestureListenerクラスを利用することで簡単に実現することができます。

A flick can be easily coded using a GestureDetector.OnGestureListener class.




GestureDetector.OnGestureListenerは次の動作が検出できます。

onDown (タップ)
onFling (タップしてから移動して指が離れるまで)
onLongPress (長時間のタップ)
onScroll (タップしてからの移動)
onShowPress (優しいタッチ)
onSingleTapUp (タップしてすぐに指が離れた)

フリックは、onFlingやonScrollなどを利用すれば実現できそうです。


プログラム
以前に紹介したTranslateAnimationを利用した移動アニメーションでは画面をタッチしたときに移動アニメーションを行うプログラムを作りました。今回は、フリックしたときに移動アニメーションを行うようにAnimationView.javaを変更しました。

フリックの実現にはonFlingを利用しました。onFlingのfloat型の引数velocityXは、タップしてから移動して指が離れるまでのx軸に対する速度(pixels per second)が入っているので、その速度が一定値(-300)を超えたら移動アニメーションを行うようにしました。速度の符号は、デフォルトでは左か右が正、右から左が負のようです。

/LayoutTest/src/org/example/layout/AnimationView.java
package org.example.layout;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;

public class AnimationView extends View{
     private int width;
     private int circleWidth;
     private int circleHeight;
     Paint circlePaint;
     GestureDetector gestureDetector;

     public AnimationView(Context context) {
          super(context);
          circlePaint = new Paint();
          circlePaint.setColor(0xffff0000);

          gestureDetector = new GestureDetector(context, new GestureDetector.OnGestureListener(){

               public boolean onDown(MotionEvent e) {
                    return false;
               }

               public boolean onFling(MotionEvent e1, MotionEvent e2,
                         float velocityX, float velocityY) {

                    if (velocityX < -300) {
                         TranslateAnimation translate = new TranslateAnimation(0, -width, 0, 0);
                         translate.setDuration(500);
                         startAnimation(translate);
                    }
                    return true;
               }

               public void onLongPress(MotionEvent e) {
               }

               public boolean onScroll(MotionEvent e1, MotionEvent e2,
                         float distanceX, float distanceY) {
                    return false;
               }

               public void onShowPress(MotionEvent e) {
               }

               public boolean onSingleTapUp(MotionEvent e) {
                    return false;
               }
          });
     }

     @Override
     protected void onDraw(Canvas canvas) {
          canvas.drawCircle(circleWidth, circleHeight, 90, circlePaint);
     }

     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
          width = w;
          circleWidth = w / 2;
          circleHeight = h / 2;
     }

     @Override
     public boolean onTouchEvent(MotionEvent event) {
          gestureDetector.onTouchEvent(event);
          return true;
     }
}

実行させたら、なかなかいい具合のフリックができました!

0 件のコメント:

コメントを投稿