[PageSliding] SamplePageSliding 소스 파일 분석하기

오늘도 Do it 안드로이드 프로그래밍에서 제공하는 예제로 공부를 했습니다.

예제소스는 http://android-town.org/ 로 가면 무료로 제공하고 있으니 필요하신 분들은 받으셔서 보셔도 됩니다.

동영상강좌는 http://www.youtube.com/user/easyspub 에서 제공되고 있습니다.

책을 직접 구입하셔서 보시면 훨씬 더 도움이 될 것 같네요.

이 예제 중 book3 에 있는 SamplePageSliding 을 공부했는데요.

지금 하고 있는 일과 관련해서 화면을 하나 만들어야 되서 이 예제를 바탕으로 좀 수정을 했습니다.

이 예제는 Android 의 Animation 기능을 이용해서 버튼을 누르면 오른쪽에 메뉴화면이 뜨고 또 버튼을 누르면 이 메뉴화면이 부드럽게 사라지는 효과를 주었습니다.

저는 이 메뉴를 오른쪽으로 옮기고 버튼을 없애는 대신 두 손가락으로 sliding을 할 경우 왼쪽에서 메뉴가 부드럽게 나타났다고 다시 두 손가락으로 sliding 하면 부드럽게 사라지는 기능을 만들었습니다.

우선 Layout xml 을 볼께요.

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#ffffffff">
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="26px"
            android:text="AAA Bank Check - 9513   Available balance $2,354.32"
            android:textColor="#000000"
            android:layout_marginLeft="350dp"
            android:layout_marginTop="100dp"
            />
    </LinearLayout>
   
    <LinearLayout
        android:id="@+id/slidingPage01"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_gravity="left"
        android:background="#ff888888"
        android:visibility="gone">
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="20px"
            android:text="Direct banking  $642.77 "
            android:textColor="#ff000000"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            />
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="20px"
            android:text="Money Market - 3670"
            android:textColor="#ff000000"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"           
            />
                                       
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="right|center_vertical"
        android:background="#00000000">
        <Button 
            android:id="@+id/openBtn01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Open"
            android:visibility="invisible"
            />
    </LinearLayout>

</FrameLayout>

전체 화면은 FrameLayout 을 사용했습니다. Animation 기능을 구현해야 하기 때문에 이 FrameLayout 을 사용했을 겁니다.

FrameLayout 의 특징이 화면에 여러 뷰나 레이아웃을 겹쳐 놓고 한순간에 하나의 레이아웃을 보이도록 할 수 있습니다. 계속 이 레이아웃을 바꾸면 애니메이션 효과가 나올 수 있겠죠.

그 다음엔 LinearLayout 이 있고 orientation은 vertical 로 돼 있습니다.

이 LinearLayout 안에 있는 view들은 위에서 아래로 정렬이 될 겁니다.

그 아래 보니까 그냥 TextView 하나만 있네요.

일단 화면에 이 TextView가 표시 될 겁니다.

다음에 보니까 다시 LinearLayout 이 나왔습니다.

이것도 orientation이 vertical 이네요. view들이 위에서 아래로 배치가 될겁니다.

그런데 그 다음에 layout_gravity 가 left로 돼 있습니다. 이것은 기준이 왼쪽이 된다는 겁니다.

원래 소스에는 이것이 right로 돼 있었습니다.

그런데 저는 메뉴가 왼쪽에서 나오도록 하기 위해 이것을 right으로 바꿨습니다.

다음에는 TextView가 두개가 나오는데요.

이 두개는 아래 위로 배치될 겁니다.

이 두번째 LinearLayout 에 animation 효과가 적용되서 좌우로 sliding 될 겁니다.

이 LinearLayout 의 id 가 slidingPage01 이라는 것을 잘 봐 두세요.

그 다음에 LinearLayout 이 또 나오네요.

orientation은 vertical 이고 gravity 가 right|center_vertical 이네요.

이 의미는 가로로는 오른쪽으로 배치를 하는데 세로로는 가운데에 정렬한다는 뜻입니다.

이 Linear Layout 에는 Button 만 하나 있네요.

그런데 저는 이 버튼을 사용하지 않을거기 때문에 그냥 android:visibility="invisible" 로 해서 화면에서 없앴습니다.

이제 Java 파일을 볼까요?

MainActivity.java

public class MainActivity extends Activity {

    boolean isPageOpen = false;

    Animation translateLeftAnim;
    Animation translateRightAnim;

    LinearLayout slidingPage01;

    Button openBtn01;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        slidingPage01 = (LinearLayout) findViewById(R.id.slidingPage01);

        translateLeftAnim = AnimationUtils.loadAnimation(this, R.anim.translate_left);
        translateRightAnim = AnimationUtils.loadAnimation(this, R.anim.translate_right);

        SlidingPageAnimationListener animListener = new SlidingPageAnimationListener();
        translateLeftAnim.setAnimationListener(animListener);
        translateRightAnim.setAnimationListener(animListener);

        openBtn01 = (Button) findViewById(R.id.openBtn01);
        openBtn01.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                if (isPageOpen) {
                    slidingPage01.startAnimation(translateRightAnim);
                } else {
                    slidingPage01.setVisibility(View.VISIBLE);
                    slidingPage01.startAnimation(translateLeftAnim);
                }
            }
        });

    }

    private class SlidingPageAnimationListener implements AnimationListener {
        public void onAnimationEnd(Animation animation) {
            if (isPageOpen) {
                slidingPage01.setVisibility(View.INVISIBLE);

                openBtn01.setText("Open");
                isPageOpen = false;
            } else {
                openBtn01.setText("Close");
                isPageOpen = true;
            }
        }

        public void onAnimationRepeat(Animation animation) {
        }

        public void onAnimationStart(Animation animation) {
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
   
    public boolean onTouchEvent(MotionEvent event) {
        if(event.getPointerCount() > 2) {
            return false;
        }
        else if (event.getPointerCount() == 2) {
        int action = event.getAction();
        float downX = 0;
        float upX = 0;

       
        int pureaction = action & MotionEvent.ACTION_MASK;
        if (isPageOpen) {
            slidingPage01.startAnimation(translateRightAnim);
        } else {
            slidingPage01.setVisibility(View.VISIBLE);
            slidingPage01.startAnimation(translateLeftAnim);
        }
      }
      return true;
    }
}

우선 onCreate() 메소드 부터 보겠습니다.

layout xml 로 activity_main 을 세팅했죠.

그 다음에 한 것이 sliding 효과를 줄 LinearLayout 객체에 넣은 겁니다.

아까 봤던 두번째 LinearLayout 인 slidingPage01 을요.

다음엔 animation 효과를 객체에 담은 건데요.

translate_left와 translate_right는 res의 amin 이라는 폴더안에 xml 형태로 있습니다.

translate_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    >
    <translate
        android:fromXDelta="-20%p"
        android:toXDelta="0%p"
        android:duration="500"
        android:repeatCount="0"
        android:fillAfter="true"
        />
</set>

translate_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    >
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="-20%p"
        android:duration="500"
        android:repeatCount="0"
        android:fillAfter="false"
        />
</set>

저는 메뉴가 좌측에서 나오도록 하기 위해서 from, toXDelta 값들을 바꿨습니다.

애니메이션의 시작점과 끝점을 가리키는 겁니다.

그 다음에는 SlidingPageAnimationListener 의 객체를 만들어서 방금 만들었던 Animation에 이 리스너를 set 해 넣습니다.

그리고 Button 을 만들어서 이 버튼을 클릭하면 좌측 화면이 사라졌다가 나타났다가 하는 동작을 하도록 코딩을 해 줍니다.

사실 이 부분은 원본 소스에서 사용되는 부분이구요.

저는 버튼클릭은 없애고 대신 두손가락으로 sliding 하는 이벤트를 Listening 하다가 그에 반응하는 기능을 넣고 싶었거든요.

그래서 onTouchEvent() 메소드를 구현한 겁니다.

이 메소드를 보죠.

public boolean onTouchEvent(MotionEvent event) {
        if(event.getPointerCount() > 2) {
            return false;
        }
        else if (event.getPointerCount() == 2) {
        int action = event.getAction();
        float downX = 0;
        float upX = 0;

       
        int pureaction = action & MotionEvent.ACTION_MASK;
        if (isPageOpen) {
            slidingPage01.startAnimation(translateRightAnim);
        } else {
            slidingPage01.setVisibility(View.VISIBLE);
            slidingPage01.startAnimation(translateLeftAnim);
        }
      }
      return true;
    }

화면에서 일어나는 이벤트를 감지해서 어떤 동작을 하고 싶으면 이 메소드를 구현하면 됩니다.

getPointerCount()는 화면에 닿은 손가락 갯수를 받는 거구요.

화면에 2개의 손가락이 닿았을 공우 isPageOpen 이 true 이면 translateRightAmin 이 실행되고 false 이면 translateLeftAnim 이 실행 되도록 만든 겁니다.

원본 샘플 파일을 받아서 실행해 보시고 위에서 제가 바꾼 것들을 따라서 바꿔가면서 결과를 단계별로 확인하시면 쉽게 이해하실 수 있을 겁니다.

그리고 이 두 소스를 기반으로 본인이 구현하고 싶은 기능을 나름대로 생각해서 구현하면 공부하는데 훨씬 도움이 될 겁니다.