5. Page Sliding

 앞서 소개해 드린 Tween Animation 기능을 사용해서

 뷰를 사용자에게 좀 더 다이나믹하게 보여줄 수 있습니다.

그래서 이번에는 Tween Animation을 사용하여 

현재 많이 쓰이는 Page Sliding을 

소개하도록 해보겠습니다.

==================================================

Page Sliding

1. Page Sliding 어떻게 구현할까?

 요즘 거의 모든 앱은 밑 사진과 같이 버튼을 누르면 현재 액티비티 위에 다른 뷰가 보여지고 다시 버튼을 누르면 뷰가 사라지도록 구성되어 있습니다.

 

[출처] Do it! 안드로이드 앱 프로그래밍

아래쪽 뷰에서 위쪽 뷰를 여는 방식으로 겹쳐져 있는 여러 뷰를 하나씩 전환하면서 보여주기 위한 프레임 레이아웃을 사용하여

위쪽 뷰를 보이게 하는 Animation 객체와 다시 사라지게 하는 Animation 객체를 생성하여 버튼을 눌렀을 시 각각의 Animation이 동작하도록

설계하면 됩니다.

하지만 여기서 생각해 봐야 할 것이 버튼이 두 개라면 상관없지만 버튼이 하나일 경우 상황별로 다른 Animation을 작동시켜야 한다는 점입니다.

이 문제를 해결하기 위해 앞서 말한 AnimationListener 클래스가 필요한 것입니다.

2. Page Sliding 구현해보자!

ⓛ 먼저 페이지를 열기 위한 xml과 닫기 위한 xml을 정의해야 합니다.

 

<translat_left.xml> : 열기 위한 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="1500"/>
</set>

 <translat_right.xml> : 닫기 위한 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>

② 이제 애니메이션을 적용할 레이아웃을 디자인해야 합니다. 

<?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"
        android:visibility="visible">


        <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:layout_gravity="right"
        android:background="#ffffff66"
        android:visibility="gone"
        android:orientation="vertical"
        >

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

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

</FrameLayout>

프레임 레이아웃을 사용하여 뷰를 보였다 안 보였다 하기 위해 프레임 레이아웃 안에 리니어 레이아웃을 2개로 구성하였습니다.

두 번째 리니어 레이아웃이 사용자가 버튼으로 애니메이션 효과를 줄 뷰이기 때문에 id 값을 설정해주고 처음에는 보이지 않도록 설정하기 위해서 visibility를 gone이나 invisible로 설정해 주시면 됩니다.

③ 생성한 xml로 Animation 객체를 생성하여 주면 됩니다. 여기서 이전과 다른 점이 AnimationListener를 사용했다는 것입니다.

Animation translat_left;
Animation translat_right;
LinearLayout page;
Button button;
boolean isOpenPage = false;

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

    translat_left = (Animation) AnimationUtils.loadAnimation(this, R.anim.translat_left);
    translat_right = (Animation) AnimationUtils.loadAnimation(this, R.anim.translat_right);

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

    SlidingAnimationListener listener = new SlidingAnimationListener();
    translat_right.setAnimationListener(listener);
    translat_left.setAnimationListener(listener);

    button = (Button) findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(isOpenPage){
                page.startAnimation(translat_right);
            }else{
                page.setVisibility(View.VISIBLE);
                page.startAnimation(translat_left);

            }
        }
    });
}

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

    }

    @Override
    public void onAnimationEnd(Animation animation) {
        if(isOpenPage){
            page.setVisibility(View.INVISIBLE);
            button.setText("열기");
            isOpenPage=false;
        }else{
            page.setVisibility(View.VISIBLE);
            button.setText("닫기");
            isOpenPage=true;
        }
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
}

다른 부분은 이전 Tween Animation 부분과 같이 구현하면 됩니다. 

translat_lef : 왼쪽으로 이동하는 Animation 객체

translat_right : 오른쪽으로 이동하는 Animation 객체

page : 열고 닫을 뷰를 조정하기 위한 변수

isOpenPage : 페이지가 상태를 체크하여 상태에 따른 애니메이션 객체를 호출하기 위한 변수

listener : isOpenPage에 값에 따라 뷰에 사용될 애니메이션 객체가 달라야 하므로 애니메이션이 끝날 때마다 isOpenPage, button Text, page의 visibility 조정

여기서는 listener를 주목하시면 되겠습니다.

listener는 animation이 시작될 떄, 끝날 때 자동으로 호출되는 메소드가 호출되어 있습니다.

그러므로 만약 뷰가 닫혀있던 상태에서 열린다면 열리고 나서 isOpenPage 변수를 false로 만들어 다음 호출 시에는 닫는 애니메이션 객체를 사용하도록 설정할 수 있습니다.

이렇게 완성하시면 열고 닫고를 할 수 있는 하나의 뷰가 완성됩니다 ㅎㅎ^^

(위 코드에 translat 오타인데 못바꿨네요...)