페이지 슬라이딩

어떤 뷰가 숨어있다가 ‘스윽~’하고 나타나도록 하려면 두 가지 내용에 대한 이해가 필요합니다.

첫째는 숨겨두었다가 보여주기 위한 방법에 대해 이해해야 합니다.

프레임 레이아웃을 다룰 때 배운내용이죠.

둘째는 애니메이션에 대해 이해해야 합니다.

갑자기 보이게 되면 무언가 어색하지만 애니메이션 동작하면서 ‘스윽~’하고 보이면 훨씬 자연스럽게 보이게 됩니다.

페이지 슬라이딩은 일부 화면을 감춰두었다가 버튼 클릭과 같은 이벤트가 발생했을 때 보이도록 합니다.

여러분이 직접 기능을 만들 수 있으니 만들다 보면 애니메이션에 대해 훨씬 더 잘 이해할 수 있을 겁니다.

페이지 슬라이딩을 만드는 방법에 대해 알아봅시다.

페이지 슬라이딩

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

대표적인 예로, 앱의 [메뉴(MENU)] 버튼을 눌렀을 때 메뉴가 위쪽이나 아래쪽에서 올라오는 기능을 들 수 있습니다.

이렇게 겹쳐져 있는 여러 뷰를 하나씩 전환하면서 보여주기 위한 방법으로 프레임 레이아웃을 사용한다는 것은 이미 배운 내용입니다.

 

화면 레이아웃 만들기

화면을 위한 XML 레이아웃에서는 여러 개의 뷰를 중첩해 둡니다.

그리고 그중에 어떤 뷰는 보이지 않도록 visibility 속성의 값을 gone 또는 invisible로 설정합니다.

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff5555ff">
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Base Area"
        android:textColor="#ffffffff"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/page"
        android:orientation="vertical"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#ffffff66"
        android:visibility="gone">
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1"
        android:text="Area #1"
        android:textColor="#ff000000"/>
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1"
        android:text="Area #2"
        android:textColor="#ff000000"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:background="#00000000">
    <Button 
        android:id="@+id/button"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Open“
        android:onClick="onButton1Clicked"/>
    </LinearLayout>
</FrameLayout>

LinearLayout 중에서 id 속성의 값이 @+id/page인 것의 visibility 속성 값이 gone으로 되어 있습니다.

따라서 처음 화면을 띄웠을 때는 노란색 배경을 가진 이 LinearLayout 부분은 보이지 않게 됩니다.

화면을 위한 XML이 복잡해 보인다면 만들어진 화면을 보면 좀 더 쉽게 이해될 것입니다.

화면 전체를 채운 파란색 영역이 있고 그 위에 오른쪽 일부만 차지하는 화면이 있습니다.

그리고 그 위에는 버튼이 있죠. 이 버튼을 눌렀을 때 노란색 화면 부분이 보였다 안 보였다 하도록 만들면 됩니다.

 

애니메이션 액션 만들기

애니메이션 액션 정보는 res/anim 폴더 안에 만듭니다.

<?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="100%p" 
        android:toXDelta="0%p" 
        android:duration="500"
        android:repeatCount="0"
        android:fillAfter="true"/>
</set>

<set> 태그 안에 <translate> 태그가 들어 있습니다. <translate> 태그는 뷰가 위, 아래 또는 좌, 우로 이동하도록 만듭니다.

여기에서는 fromXDelta 속성과 toXDelta 속성이 사용되었으므로 X 방향 즉, 좌, 우로 이동하게 됩니다. 만약 위, 아래로 이동하도록 만들고 싶다면 fromYDelta 속성과 toYDelta 속성을 사용할 수 있습니다.

duration 속성은 애니메이션이 얼마나 지속될 지 시간을 지정하는 속성입니다. 500 밀리초로 되어 있으니 애니메이션은 0.5초 동안 지속될 것입니다.

repeatCount 속성은 애니메이션의 반복 횟수입니다. 여러 번 반복하도록 하고 싶다면 이 속성을 사용할 수 있습니다.

fillAfter 속성은 애니메이션 동작이 끝난 후에 원래의 모양대로 화면에 보여줄 것인지를 지정합니다.

종합하여 보면, 이 태그의 속성들을 이용해 0.5초 동안 뷰가 오른쪽에서 뷰의 원래 위치로 이동하도록 설정했습니다.

 

애니메이션 동작시키기

버튼을 누르면 노란색으로 보이는 부분의 뷰가 애니메이션 되도록 만듭니다.

public void onButton1Clicked(View v) {
    if (isPageOpen) {
        page.startAnimation(translateRightAnim); 
    } else {
        page.setVisibility(View.VISIBLE);
        page.startAnimation(translateLeftAnim);
    }
}

버튼을 누를 때마다 보였다 안 보였다를 반복해야 하므로 isPageOpen이라는 이름의 변수를 하나 만들어둡니다.

그런데 노란색 부분의 화면이 보인 상태에서는 화면이 사라진 후에 보이지 않도록 설정해야 합니다.

다시 말해 애니메이션이 끝나는 시점을 알아야 화면이 애니메이션으로 사라진 후에 보이지 않도록 설정할 수 있습니다.

애니메이션이 끝나는 시점은 AnimationListener 인터페이스를 구현한 리스너를 설정하면 알 수 있습니다.

onAnimationEnd 메소드는 애니메이션이 끝나면 자동으로 호출됩니다.

private class SlidingPageAnimationListener implements AnimationListener {
    public void onAnimationEnd(Animation animation) {
        if (isPageOpen) {
            page.setVisibility(View.INVISIBLE);
	
            button.setText("Open");
            isPageOpen = false;
        } else {
            button.setText("Close");
            isPageOpen = true;
        }
    }

애니메이션이 끝났을 때 노란색으로 보이는 뷰를 안 보이도록 만들고 버튼에 표시된 글자도 바꾸어줍니다.

노란색으로 보이는 뷰를 안보이도록 만드는 코드는 page.setVibility 메소드가 호출되는 네 번째 줄에 있으며, 버튼에 표시된 글자를 바꾸어줄 때는 button.setText 메소드를 호출합니다.