[Android]페이지 슬라이딩 사용하기

▶ 페이지 슬라이딩 예제

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

▷ /res/layout/main.xml

<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" >

<LinearLayout 

   android:orientation="vertical"

   android:layout_width="fill_parent"

   android:layout_height="fill_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/slidingPage01"

   android:orientation="vertical"

   android:layout_width="200dp"

   android:layout_height="fill_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/openBtn01"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="open"

       />

</LinearLayout>

</FrameLayout>

▷ /res/anim/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>

▷ /res/anim/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="false"

/>

</set>

▷ SamplePageSlidingActivity.java

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.Animation;

import android.view.animation.Animation.AnimationListener;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.LinearLayout;

public class SamplePageSlidingActivity extends Activity {

boolean isPageOpen = false;

Animation translateLeftAnim;

Animation translateRightAnim;

LinearLayout slidingPage01;

Button openBtn01;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        

        // sliding page

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

        

        translateLeftAnim = AnimationUtils.loadAnimation(this, R.anim.translate_left);

        translateRightAnim = AnimationUtils.loadAnimation(this, R.anim.translate_right);

        

        SlidingPageAnimationListener animListener = new SlidingPageAnimationListener();

        translateLeftAnim.setAnimationListener(animListener);

        translateRightAnim.setAnimationListener(animListener);

        

     // Open Button

        openBtn01 = (Button) findViewById(R.id.openBtn01);

        openBtn01.setOnClickListener(new OnClickListener() {

        public void onClick(View v) {

        // start animation

        if (isPageOpen) {

        slidingPage01.startAnimation(translateRightAnim);

        } else {

        slidingPage01.setVisibility(View.VISIBLE);

        slidingPage01.startAnimation(translateLeftAnim);

        }

        }

        });

    }

    private class SlidingPageAnimationListener implements AnimationListener {

public void onAnimationEnd(Animation animation) {

if (isPageOpen) {

slidingPage01.setVisibility(View.INVISIBLE);

openBtn01.setText("Open");

isPageOpen = false;

} else {

openBtn01.setText("Close");

isPageOpen = true;

}

}

public void onAnimationRepeat(Animation animation) {

}

public void onAnimationStart(Animation animation) {

}

    }

}