[Android] 페이지 슬라이딩

페이지 슬라이딩

페이지 슬라이딩은 버튼 등을 눌렀을 때 보이지 않던 뷰가 슬라이딩 방식으로 보이는 것으로, 여러 뷰를 하나씩 전환하면서 보여주는 방식에 애니메이션을 결합한 것이다.

삼성페이처럼 밑에 숨어있던 카드를 스윽 위로 빼거나, 옆에서 숨겨져있던 화면을 나타나도록 해주는 애니메이션도 위와 같은 방식과 비슷한것 같다.

이와 같은 애니메이션은 라이브러리로도 많이 구현되어있지만, 직접 액션을 구성해 애니메이션을 보여줄 수 있다.

그래서 이번에는 옆에서 새로운 화면이 스윽 나오는 간단한 애니메이션을 보여주는 예제를 구현해볼 것이다.

화면 레이아웃 만들기

먼저 여러개의 뷰를 중첩해서 보여줄 수 있는 프레임 레이아웃 위에 기본적으로 깔려있는 배경 화면, 옆에서 슬라이드 해서 빼낼 화면을 구성한다.

버튼을 누르면 숨겨져있던 화면이 나올 수 있도록 애니메이션을 보여줄 것이다.

visibility 속성을 이용해 꺼낼 화면은 숨겨 놓는다. (gone 또는 invisible)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff5555ff"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Base Area"
            android:textColor="#ffffff"
            android:textSize="30dp"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/page"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_gravity="right"
        android:background="#ffffff66"
        android:visibility="invisible"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp">

        <TextView
            android:text="Sliding Area"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="열기"
        android:layout_gravity="center_vertical|right"/>
</FrameLayout>

애니메이션 액션 만들기

애니메이션 액션 정보는 res/anim 폴더 안에 생성한다.

<translate> 태그는 뷰가 위, 아래 또는 좌, 우로 이동하도록 만든다.

fromXDelta, toXDelta 속성을 사용하면 X 방향, 즉 좌우로 애니메이션이 동작하며, 위아래로 동작하도록 하고싶다면 fomYDelta, toYDelta 속성을 사용하면 된다.

왼쪽에서 나오는 애니메이션, 오른쪽으로 들어가는 애니메이션의 액션을 만들어주었다.

<translate_left.xml>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="1500"/>
</set>

<translate_right.xml>

<?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="1500"/>
</set>

100%p : 오른쪽 끝

0%p : 왼쪽 끝

추가적으로 애니메이션의 반복 횟수를 설정할 수 있는 repeatCount 속성과, 애니메이션이 끝난 후 원래 모양대로 화면에 보여줄 것인지 설정할 수 있는 fillAfter 속성도 있다.

애니메이션 동작시키기

버튼을 누르면 노란색으로 보이는 부분의 뷰(숨겨져있던 뷰)가 보여지도록 동작하게 만든다.

button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if (isPageOpen) {
            page.startAnimation(translateRight);
        } else {
            page.setVisibility(View.VISIBLE);
            page.startAnimation(translateLeft);
        }
    }
});

버튼을 누를 때마다 보였다, 안보였다를 반복해야 하므로 switch 변수를 하나 두고 상태를 관찰한다.

애니메이션이 끝나는 시점에 화면을 갱신하고 싶다면(다시 숨겨지는 애니메이션이 동작할 때 "닫기" 라는 텍스트를 "열기" 라는 텍스트로 바꿔주고 싶다면) AnimationListener 인터페이스를 구현하여 Animation 에 등록해주면 된다. 이너클래스로 작성하였다.

class SlidingAnimationListener implements Animation.AnimationListener {
    @Override
    public void onAnimationStart(Animation animation) {
        
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // 애니메이션이 끝나는 시점에 동작
        if (isPageOpen) {
            page.setVisibility(View.INVISIBLE);
            button.setText("열기");
            isPageOpen = false;
        } else {
            button.setText("닫기");
            isPageOpen = true;
        }
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
}

다음과 같이 리스너를 등록해주면 된다.

translateLeft = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_left);
translateRight = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_right);

SlidingAnimationListener listener = new SlidingAnimationListener();
translateLeft.setAnimationListener(listener);
translateRight.setAnimationListener(listener);

- 출처 : 부스트코스 강의