[ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -3-

    지난 글에서 display 하는 것은 모두 완료 됐습니다.
   
    이제 볼 것은 뭘까요?
    아까 ViewFlipper에 touch 리스너를 달았습니다.
   

    그러면 ViewFlipper에 어떤 touch 이벤트가 발생했을 때 다른 동작을 할 수 있도록 코딩을 할 수 있는데요.
    바로 그 코딩을 하는 onTouch() 메소드를 분석해 봐야 할 차례입니다.
   

        public boolean onTouch(View v, MotionEvent event) {
        if(v != flipper) return false;

        if(event.getAction() == MotionEvent.ACTION_DOWN) {
            downX = event.getX();
        }
        else if(event.getAction() == MotionEvent.ACTION_UP){
            upX = event.getX();

            if( upX < downX ) {  // in case of right direction
 
                flipper.setInAnimation(AnimationUtils.loadAnimation(getContext(),
                        R.anim.wallpaper_open_enter));
                flipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(),
                        R.anim.wallpaper_open_exit));

                if (currentIndex < (countIndexes-1)) {
                    flipper.showNext();

                    // update index buttons
                    currentIndex++;
                    updateIndexes();
                }
            } else if (upX > downX){ // in case of left direction

                flipper.setInAnimation(AnimationUtils.loadAnimation(getContext(),
                        R.anim.push_right_in));
                flipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(),
                        R.anim.push_right_out));

                if (currentIndex > 0) {
                    flipper.showPrevious();

                    // update index buttons
                    currentIndex--;
                    updateIndexes();
                }
            }
        }
        return true;
    }
   

    이 메소드는 View 와 MotionEvent를 파라미터로 받습니다.
    첫번째 줄에는 전달 받은 View 가 flipper 가 아니면 false를 return 하라고 돼 있네요.
    여기서 다루는 view 는 flipper 이니까 이 라인은 건너 뛰고 다음 라인이 실행 될 겁니다.
   
    다음 if 문을 보면 해당 Action 이 Down 일 경우 downX에 touch 점의 x 좌표를 대입합니다.
    다음 else if 문은 action 이 up 인 경우 입니다.
   
    우선 upX에 현재의 x 좌표를 대입시키구요.
    upX 가 downX 보다 작으면 그러니까 사용자가 오른쪽으로 손가락을 slide 할 경우가 되겠네요.
    그런 경우 flipper에 세팅하는 애니메이션을 wallPaper_open_enter 를 선택합니다.
    이 애니메이션은 res 폴더 밑의 anim 폴더 밑에 xml 형태로 저장돼 있습니다. 그 내용은 아래와 같습니다.
   

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@anim/decelerate_interpolator"
        android:detachWallpaper="true">
    <scale android:fromXScale="2.0" android:toXScale="1.0"
           android:fromYScale="2.0" android:toYScale="1.0"
           android:pivotX="50%p" android:pivotY="50%p"
           android:duration="@android:integer/config_mediumAnimTime" />
    </set>

    일단 Scale이 2.0에서 1.0 바뀌네요. X,Y 모두 다요.
    그 다음엔 pivotX와 pivotY 가 각각 50%p 의 값을 가집니다.
    그리고 duration은 android의 config.xml에 정의 된 config_mediumAnimTime 를 가져옵니다.
    그 값은 400 이구요. 주석을 보면 medium-length animation을 위한 값(milliseconds)라고 돼 있네요.
    pivot은 회전축이라는 뜻으로 애니메이션 효과에 사용됩니다. 여기서는 flip 효과에 사용되나 보네요.
   
    다시 자바로 돌아가면 그 다음에는 wallpaper_open_exit 애니메이션이 실행되네요.
   

    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@anim/decelerate_interpolator"
        android:zAdjustment="top">
    <scale android:fromXScale="1.0" android:toXScale=".5"
           android:fromYScale="1.0" android:toYScale=".5"
           android:pivotX="50%p" android:pivotY="50%p"
           android:duration="@android:integer/config_mediumAnimTime" />
    <alpha android:fromAlpha="1.0" android:toAlpha="0"
            android:duration="@android:integer/config_mediumAnimTime"/>
    </set>

    여기엔 alpha 값도 설정이 됐군요. 선명한 상태에서 완전 투명해 져서 안보이는 상태로 갑니다.
   
    그리고 나서 currnetIndex 가 currentIndexes-1 보다 적을 경우 는 flipper에 있는 next 를 보여 줍니다.
    그리고 currntIndex 에 1을 더해주고 updateIndexes()를 호출 합니다.
   
    그럼 updateIndexes() 를 보죠.
   

    private void updateIndexes() {
        for(int i = 0; i < countIndexes; i++) {
            if (i == currentIndex) {
                indexButtons[i].setImageResource(R.drawable.green);
            } else {
                indexButtons[i].setImageResource(R.drawable.white);
            }
        }
    }

    countIdexes (3) 만큼 for 문을 돌리구요. i 가 currentIndex 일 경우 indexButtons 의 리소스 이미지를 바꿔 줍니다.
    즉 현재 내용이 몇번째인지 그것을 알아내서 해당 버튼 이미지도 녹색으로 바꾸고 나머지는 흰색으로 보여지게 하는 부분 입니다.
   
    다시 onTouch() 메소드의 다음 부분을 이어서 보면요.
   
    else if (upX > downX) 일 경우 이 경우는 왼쪽방향일 경우라고 주석에 쓰여져 있네요.
    이럴 경우 애니메이션으로 push_right_in.xml와 push_right_out 을 실행 하라고 돼 있습니다.
   
    push_right_in.xml
   

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0%p" android:duration="300"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>

    push_right_out
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="300"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>

    그리고 currentIndex가 0 보다 크면 flipper의 이전 내용을 보여 줍니다.
    currentIndex에는 -1을 해 주고요.
    그 다음에 updateIndexes() 메소드를 실행해서 이미지 버튼의 색을 바꿔주고요.
   
   
    여기까지가 viewFlipper 예제에 대한 분석이었습니다.