슬라이드 사이드 메뉴 구현

[황정식]

안드로이드에서 좌측에서 슬라이드 되는 슬라이드 메뉴를 구현해보았는데, FrameLayout을 이용해서 손쉽게 구현할 수 있었다. 구현 과정은 다음과 같다.

1. 레이아웃 정의

2. 슬라이드 메뉴에 대한 애니메이션 설정

3. 슬라이딩을 위한 버튼 이벤트 설정

==== activity_main ====

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

        android:layout_height="match_parent"

        android:background="#ff5555ff"

        >

        <Button  

android:id="@+id/openBtn01"

    android:layout_width="wrap_content" 

    android:layout_height="wrap_content" 

    android:text="open"

    />

    </LinearLayout>

    <!-- 슬라이드 메뉴. 

   - 레이아웃 좌측에 세로로 꽉 차게 위치시킨후, 초기에는 보이지 않도록 숨긴다.  

    -->

    <LinearLayout 

        android:id="@+id/slidingPage01"

        android:orientation="vertical"

        android:layout_width="200sp"

        android:layout_height="match_parent"

        android:layout_gravity="left"

        android:background="#ffffff66"

        android:visibility="gone"

        >

        <Button  

android:id="@+id/btnClose"

    android:layout_width="wrap_content" 

    android:layout_height="wrap_content" 

    android:layout_gravity="right"

    android:text="close"

    />

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

    android:layout_width="wrap_content" 

    android:layout_height="wrap_content" 

    android:text="Open"

    />

    </LinearLayout>

    -->

</FrameLayout>

버튼을 눌렀을때 슬라이드 메뉴가 오른쪽으로 튀어나오는 애니메이션과 다시 눌렀을때 왼쪽으로 들어가는 애니메이션 2개를 정의한다.

==== /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="-50%p" 

android:toXDelta="0%p" 

android:duration="200"

android:repeatCount="0"

android:fillAfter="false"

/>

</set>

==== /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="0%p" 

android:toXDelta="-50%p" 

android:duration="200"

android:repeatCount="0"

android:fillAfter="true"

/>

</set>

==== MainActivity.java ====

package com.example.samplepagesliding;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.xxOnClickListener;

import android.view.animation.Animation;

import android.view.animation.Animation.AnimationListener;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.LinearLayout;

/**

 * FrameLayout을 사용한 슬라이딩 메뉴 구현 예

 * 

 * @author hjs6877

 *

 */

public class MainActivity extends Activity {

/**

* 페이지 오픈 유무 플래그

*/

boolean isPageOpen = false;

Animation translateLeft; // 왼쪽으로 이동하는 애니메이션 객체

Animation translateRight; // 오른쪽으로 이동하는 애니메이션 객체

LinearLayout slidingPage; // 슬라이딩으로 보여줄 페이지

Button btnOpen;

Button btnClose;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 슬라이딩으로 보여질 레이아웃 객체 참조

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

/**

* 애니메이션 객체 로딩

*/

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

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

/**

* 애니메이션 객체에 리스너 설정

*/

SlidingPageAnimationListener aniListener = new SlidingPageAnimationListener();

translateLeft.setAnimationListener(aniListener);

translateRight.setAnimationListener(aniListener);

/**

* 버튼을 눌렀을때의 이벤트 처리. 슬라이딩 메뉴의 열고, 닫음 애니메이션 실행.

*/

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

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

btnOpen.setxxOnClickListener(new xxOnClickListener() {

@Override

public void xxonClick(View v) {

/**

* 슬라이드 메뉴 열기애니메이션 적용

*/

if(!isPageOpen)

{

slidingPage.setVisibility(View.VISIBLE);

slidingPage.startAnimation(translateRight);

}

}

});

btnClose.setxxOnClickListener(new xxOnClickListener() {

@Override

public void xxonClick(View v) {

/**

* 슬라이드 메뉴 닫기 애니메이션 적용

*/

if(isPageOpen)

{

slidingPage.startAnimation(translateLeft);

}

}

});

}

private class SlidingPageAnimationListener implements AnimationListener

{

/**

* 애니메이션이 끝날때 호출.

*/

@Override

public void onAnimationEnd(Animation animation) {

/**

* 슬라이딩 메뉴가 열려있으면 INVISIBLE 상태로 바꾼다.

*/

if(isPageOpen)

{

slidingPage.setVisibility(View.INVISIBLE);

isPageOpen = false;

}

else

{

isPageOpen = true;

}

}

@Override

public void onAnimationRepeat(Animation animation) {

// TODO Auto-generated method stub

}

@Override

public void onAnimatixxonStart(Animation animation) {

// TODO Auto-generated method stub

}

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

}