Android 모바일 개발 - 제스처로 페이지 넘기기

Android 모바일 개발 - 제스처로 페이지 넘기기
이 프로그램의 제스처 감지 사고방식은Activity의 터치 이벤트를 Gesture Detector에 맡기는 것입니다. 이 프로그램은 ViewFlipper 구성 요소를 사용하고 ViewFlipper는 애니메이션으로 여러 구성 요소 간의 전환 효과를 제어할 수 있습니다.이 실례 프로그램은 GestureDetector를 통해 사용자의 제스처 동작을 감지하고 제스처 동작에 따라 ViewFlipper에 포함된 View 구성 요소의 전환을 제어하여 페이지 넘기는 효과를 실현한다.
activity_main.xml 레이아웃 인터페이스 코드:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
LinearLayout>

MainActivity.java 논리 코드:

package com.fukaimei.gestureflip;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener {

    // ViewFlipper  
    ViewFlipper flipper;
    //         
    GestureDetector detector;
    //         ，   ViewFlipper        
    Animation[] animations = new Animation[4];
    //                
    final int FLIP_DISTANCE = 50;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //        
        detector = new GestureDetector(this, this);
        //   ViewFlipper  
        flipper = (ViewFlipper) this.findViewById(R.id.flipper);
        //  ViewFlipper  8 ImageView  
        flipper.addView(addImageView(R.drawable.img01));
        flipper.addView(addImageView(R.drawable.img02));
        flipper.addView(addImageView(R.drawable.img03));
        flipper.addView(addImageView(R.drawable.img04));
        flipper.addView(addImageView(R.drawable.img05));
        flipper.addView(addImageView(R.drawable.img06));
        flipper.addView(addImageView(R.drawable.img07));
        flipper.addView(addImageView(R.drawable.img08));
        //    Animation  
        animations[0] = AnimationUtils.loadAnimation(this, R.anim.left_in);
        animations[1] = AnimationUtils.loadAnimation(this, R.anim.left_out);
        animations[2] = AnimationUtils.loadAnimation(this, R.anim.right_in);
        animations[3] = AnimationUtils.loadAnimation(this, R.anim.right_out);
    }

    //     ImageView     
    private View addImageView(int resId) {
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(resId);
        imageView.setScaleType(ImageView.ScaleType.CENTER);
        return imageView;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //   Activity        GestureDetector  
        return detector.onTouchEvent(event);
    }

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

    @Override
    public void onShowPress(MotionEvent e) {

    }

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

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

    @Override
    public void onLongPress(MotionEvent e) {

    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        //           X            X    FLIP_DISTANCE
        //           
        if (e1.getX() - e2.getX() > FLIP_DISTANCE) {
            //  flipper         
            flipper.setInAnimation(animations[0]);
            flipper.setOutAnimation(animations[1]);
            flipper.showPrevious();
            return true;
        }
        //           X            X    FLIP_DISTANCE
        //           
        else if (e2.getX() - e1.getX() > FLIP_DISTANCE) {
            //  flipper         
            flipper.setInAnimation(animations[2]);
            flipper.setOutAnimation(animations[3]);
            flipper.showNext();
            return true;
        }
        return false;
    }
}

anim/left_in.xml 코드:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
set>   

anim/left_out.xml 코드:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
set> 

anim/right_in.xml 코드:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
set>

anim/right_out.xml 코드:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%p" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
set> 

위의 MainActivity.java 논리 코드는 Gesture Detector를 실현했을 뿐입니다.Gesture Listener의 onFling () 방법은 위의 프로그램의 코드가 책임지고 실현합니다: e1.getX() - e2.getX()의 거리가 특정 거리보다 크면 사용자의 제스처가 오른쪽에서 왼쪽으로 미끄러지는 것을 판단할 수 있습니다. 이때 ViewFlipper를 설정하면 애니메이션 방식으로 이전 View로 전환합니다.되다getX() - e2.getX () 의 거리가 특정 거리보다 크면 사용자의 제스처가 왼쪽에서 오른쪽으로 미끄러지는 것을 판단할 수 있습니다. 이때 ViewFlipper를 설정하면 애니메이션 방식으로 다음 View로 전환합니다. 이른바 '페이지 넘기기' 효과를 실현할 수 있습니다.