[Android] 페이지 슬라이딩

• 버튼을 누르면 패널을 하나 만들어서 슬라이드 형식으로 만들어보자.

• 페이지 슬라이딩이란?

-

 뷰의 중첩과 애니메이션을 접목한 방식
 
- 하나의 뷰 위에 다른 뷰를 올라가 있을 때 보이거나 보이지 않는 과정을 애니메이션으로 적용
 
- 이때 사용하는것이 Animation객체를 적용해서 왼쪽방향으로 translate 하거나 오른쪽 방향으로 translate 한다

• Example_Sliding 프로젝트 생성

1. 버튼 클릭시 새로운 슬라이드가 넘어가도록 해보자.

2. FrameLayout 사용(안에 Linearlayout 사용)

3. 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="com.example.example_sliding.MainActivity">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#ff5555ff"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="base Area"
            android:textSize="30dp"
            android:textColor="#ffffff"/>
    </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"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sliding Area"
            android:textSize="30dp"
            android:textColor="#000000"/>
 
    </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>

4. res -> anim폴더 생성 ->translate_left.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>

5. tranlate_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>
 

• main.java 수정

package com.example.example_sliding;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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 {
    LinearLayout page;
    Animation translateLeft;
    Animation translateRight;
    Button button;
    boolean isPageOpen = false;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        page = (LinearLayout)findViewById(R.id.page);
 
        //animation 객체로 만들어야함 Left
        translateLeft = AnimationUtils.loadAnimation(this,R.anim.translate_left);
        //animation 객체로 만들어야함 Right
        translateRight = AnimationUtils.loadAnimation(this,R.anim.translate_right);
 
        // 애니메이션 리스너 등록해야 쓸수 있다.
        SlidingAnimationListener listener = new SlidingAnimationListener();
        translateLeft.setAnimationListener(listener);
        translateRight.setAnimationListener(listener);
 
 
        button = (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);     // 왼쪽으로 보이기
 
                    //여기서 중요한것이 끝난시점으로 처리 해야하므로 이때 리스너를 하나 추가해야함
                    // 따라서 밑에 클래스 추가
                }
            }
        });
 
 
 
    }
    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) {
 
        }
    }
}

• <결과>