[안드로이드] 페이지 슬라이딩 애니메이션 사용하기 - AnimationListener, Animation, Animation

 

 

 

 

 

 

 

버튼을 누르면 숨겨져 있던 레이아웃이 이동하면서 보이고, 사라지는 애니메이션을 만들어보겠습니다.

 

 

1. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

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

        <TextView
            android:textColor="#ffffffff"
            android:textSize="20sp"
            android:text="기본 페이지"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/page"
        android:orientation="vertical"
        android:background="#4CAF50"
        android:visibility="gone"
        android:layout_width="200dp"
        android:layout_height="match_parent">

        <TextView
            android:textColor="#FFFFFF"
            android:text="숨겨진 페이지"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:background="#00000000"
        android:layout_gravity="right|center_vertical"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

    </LinearLayout>

</FrameLayout>

 

id를 지정해준 레이아웃이 애니메이션을 적용할 페이지입니다.

 

 

 

2. anim 폴더 생성

res -> new -> Directory -> 'anim' 입력

 

 

 

 

 

 

 

 

OK 누르시면 anim 폴더가 보이실거에요

 

 

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

</set>

오른쪽에서 왼쪽으로 이동하게 되는 애니메이션에 대한 xml 코드라고 생각하시면 됩니다.

 

android:fromXDelta="100%p" - 애니메이션이 시작되는 x좌표의 위치, 몇 퍼센트부터 시작할 것인지 나타냅니다.

 

android:toXDelta="0%p" - 애니메이션이 종료되는 x좌표의 위치입니다.

 

android:duration="500" - 애니메이션의 지속 시간입니다. 저의 경우 0.5초 동안 애니메이션이 진행되도록 지정해준 것입니다.

 

android:repeatCount="0" - 애니메이션의 반복 횟수입니다.

 

android:fillAfter="true" - 애니메이션이 종료된 후에도 위치(상태)를 유지시킬 것인지 지정해줍니다.

true는 유지, false는 원래 위치로 다시 이동하게 됩니다.

 

 

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

 

왼쪽에서 오른쪽으로 이동하는 애니메이션입니다.

 

 

5. MainActivity.java

package org.techtown.sliding;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    //숨겨진 페이지가 열렸는지 확인하는 변수
    boolean isPageOpen = false;

    Animation tranlateLeftAnim;
    Animation tranlateRightAnim;

    LinearLayout page;
    Button button;

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

        page = findViewById(R.id.page);

        //anim 폴더의 애니메이션을 가져와서 준비
        tranlateLeftAnim = AnimationUtils.loadAnimation(this,R.anim.translate_left);
        tranlateRightAnim = AnimationUtils.loadAnimation(this,R.anim.translate_right);

        //페이지 슬라이딩 이벤트가 발생했을때 애니메이션이 시작 됐는지 종료 됐는지 감지할 수 있다.
        SlidingPageAnimationListener animListener = new SlidingPageAnimationListener();

        tranlateLeftAnim.setAnimationListener(animListener);
        tranlateRightAnim.setAnimationListener(animListener);

        button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isPageOpen){
                    page.startAnimation(tranlateRightAnim);
                }else{
                    page.setVisibility(View.VISIBLE);
                    page.startAnimation(tranlateLeftAnim);
                }
            }
        });
    }
    
    
    private class SlidingPageAnimationListener implements Animation.AnimationListener{
        @Override
        public void onAnimationStart(Animation animation) {

        }

        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) {

        }
    }
}

 

애니메이션이 종료됐을 때를 감지하기 위해서 AnimationListener를 상속받은SlidingPageAnimationListener라는 클래스를 만들어서 각 애니메이션에 리스너를 지정해줬습니다.

 

오버라이드 된 함수들은 함수 이름만 보셔도 충분히 어떤 타이밍에 작동하는 함수인지 이해하실 거라고 생각하기 때문에 부가 설명은 하지 않겠습니다.

 

저는 버튼을 눌렀을 때 애니메이션이 시작되도록 해줬습니다.

 

버튼이 아니고 터치나 슬라이드 등 원하는 타이밍에 작동되도록 수정해서 사용하시면 좋을 것 같습니다.