Android 좌우 드래그(drag)해서 화면 전환 기능 만들기

안녕하세요.

좌우 Drag를 해서 Fragment 화면 전환을 하는 기능을 알아봅시다.

Drag 이벤트를 감지하기 위해 View.setOnTouchListener 를 사용하였고, 화면 전환 시 애니메이션 동작도 추가하였습니다.

 

좌우 드래그 화면 전환 코드 작성

준비물로는 화면 전환을 위해 Fragment 화면 2개 이상이 필요하니 이 부분은 미리 만들어 둡시다.

그럼 코드를 봅시다.

float touchPoint = 0; //전역변수

...

LinearLayout main_drag = (LinearLayout) v.findViewById(R.id.main_drag);

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

        FragmentTransaction transaction = getActivity().getSupportFragmentManager().beginTransaction();
        Fragment ff;

        switch(event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 화면을 처음 터치한 x좌표값 저장
                touchPoint = event.getX();

                break;

            case MotionEvent.ACTION_UP:
                // 손가락이 화면에서 떨어졌을때 x좌표와의 거리 비교
                // 해당 거리가 100이 되지 않으면 리턴.
                touchPoint = touchPoint - event.getX();
                if (Math.abs(touchPoint) < 100) { return false; }

                if ( touchPoint > 0 ) {
                    // 손가락을 우->좌로 움직였을때 오른쪽 화면 생성
                    ff = new Setting_Fragment();
                    transaction.setCustomAnimations(R.anim.to_right, R.anim.from_right);

                } else {
                    // 손가락을 좌->우로 움직였을때 왼쪽 화면 생성
                    ff = new History_Fragment();
                    transaction.setCustomAnimations(R.anim.to_left, R.anim.from_left);
                }

                // 손가락을 왼쪽으로 움직였으면 오른쪽 화면이 나타나야 한다.
                transaction.replace(R.id.fragment_container, ff);
                transaction.commit();

                break;
        }
        return true;
    }
});

 

좌우 드래그 화면 전환 코드 설명

주석의 내용만봐도 알 수 있듯이 굉장히 간단합니다.

View.setOnTouchListener를

Drag의 움직임을 파악합니다.

 

main_drag 변수는 Fragment 화면 전체를 감싸고 있는 LinearLayout입니다.그리고 Fragment 전환 시 setCustomAnimations() 애니메이션 효과를 사용하고 있는데 화면이 바로 생성되는 좌/우, 우/좌 로 자연스럽게 넘겨지는 애니메이션을 사용하였습니다.

 

애니메이션 적용 방법은 아래 링크를 참고하세요.

2022.09.04 - [IT/Android] - Android Fragment 전환 애니메이션 효과 적용하기

Android Fragment 전환 애니메이션 효과 적용하기