안드로이드 사이드메뉴(페이지 슬라이딩) 구현 예제

안드로이드 사이드메뉴(페이지 슬라이딩) 구현 예제 , 슬라이드 레이아웃

MainActivity.java

public class MainActivity extends AppCompatActivity {
 
    //슬라이드 열기/닫기 플래그
    boolean isPageOpen = false;
    //슬라이드 열기 애니메이션
    Animation translateLeftAnim;
    //슬라이드 닫기 애니메이션
    Animation translateRightAnim;
    //슬라이드 레이아웃
    LinearLayout slidingPage01;
 
    Button button1;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //UI
        slidingPage01 = (LinearLayout)findViewById(R.id.slidingPage01);
        button1 = (Button)findViewById(R.id.buton1);
 
        //애니메이션
        translateLeftAnim = AnimationUtils.loadAnimation(this, R.anim.translate_left);
        translateRightAnim = AnimationUtils.loadAnimation(this, R.anim.translate_right);
 
        //애니메이션 리스너 설정
        SlidingPageAnimationListener animationListener = new SlidingPageAnimationListener();
        translateLeftAnim.setAnimationListener(animationListener);
        translateRightAnim.setAnimationListener(animationListener);
    }
 
    //버튼
    public void onButton1Clicked(View v){
        //닫기
        if(isPageOpen){
            //애니메이션 시작
            slidingPage01.startAnimation(translateRightAnim);
        }
        //열기
        else{
            slidingPage01.setVisibility(View.VISIBLE);
            slidingPage01.startAnimation(translateLeftAnim);
        }
    }
 
    //애니메이션 리스너
    private class SlidingPageAnimationListener implements Animation.AnimationListener {
        @Override
        public void onAnimationEnd(Animation animation) {
            //슬라이드 열기->닫기
            if(isPageOpen){
                slidingPage01.setVisibility(View.INVISIBLE);
                button1.setText("Open");
                isPageOpen = false;
            }
            //슬라이드 닫기->열기
            else{
                button1.setText("Close");
                isPageOpen = true;
            }
        }
        @Override
        public void onAnimationRepeat(Animation animation) {
 
        }
        @Override
        public void onAnimationStart(Animation animation) {
 
        }
    }
}
 

activity_main.xml

<?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:orientation="vertical"
        android:background="#eee"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="일반 레이아웃"
            android:textColor="#000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
 
    <!-- 슬라이드 레이아웃 -->
    <LinearLayout
        android:id="@+id/slidingPage01"
        android:orientation="vertical"
        android:background="#5F00FF"
        android:visibility="gone"
        android:layout_gravity="right"
        android:layout_width="200dp"
        android:layout_height="match_parent">
        <TextView
            android:text="Slide Contents"
            android:textColor="#000"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Slide Contents"
            android:textColor="#000"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
 
    <!-- 열기/닫기 버튼 레이아웃 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_gravity="right|center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/buton1"
            android:text="Open"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onButton1Clicked"/>
    </LinearLayout>
 
</FrameLayout>
 

anim폴더 > translate_left.xml

<?xml version="1.0" encoding="utf-8"?>
<!--android:fillAfter="true" 애니메이션 종료후 그 상태를 유지-->
<!-- android:interpolator="@android:anim/accelerate_decelerate_interpolator" 애니메이션이 점점 빠르게 동작하다가 점점 천천히 동작-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <!-- 오른쪽에서 왼쪽으로 0.5초 간 이동 -->
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%"
        android:duration="500"
        android:repeatCount="0"/>
</set>

anim폴더 > translate_right.xml

<?xml version="1.0" encoding="utf-8"?>
<!--android:fillAfter="true" 애니메이션 종료후 그 상태를 유지-->
<!-- android:interpolator="@android:anim/accelerate_decelerate_interpolator" 애니메이션이 점점 빠르게 동작하다가 점점 천천히 동작-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <!-- 왼쪽에서 오른쪽으로 0.5초 간 이동 -->
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="100%"
        android:duration="500"
        android:repeatCount="0"/>
</set>

결과