Android(9)_Slide Menu

Slide Menu

안드로이드 앱을 사용하다 보면 상단 바에 있는 버튼을 누르면 화면이 마치 슬라이드되면서 옆에 숨어있던 화면이 나오는 효과를 자주 접하게 됩니다(ex, 페이스북) 

 

이 효과를 슬라이드 메뉴라고 하는데, 한 화면의 부분을 숨겨놨다가 보여주는 것처럼 보이지만 사실 이 두 화면은 서로 다른 xml 파일을 겹쳐서 포개어 놓았다가 화면에서 버튼을 누르면 위에 있던 메인 화면을 밀면서 아래 있는 슬라이드 메뉴 화면을 노출시키는 방식입니다.

 

        

- 실제 화면 구성

            

- 위에 있는 화면이 옆으로 밀려나면서 아래 있던 화면이 액티비티에 노출

Slide Menu를 사용하려면 다음과 같은 jar 파일을 프로젝트의 app/libs 에 넣어줘야 합니다. 메인 액티비티 아래 겹쳐놓고 슬라이드 효과를 넣어줄 xml 파일을 com.navdrawer.SimpleSideDrawer 을 이용해서 효과를 주기 때문입니다. ( 아래 예제에서 코드 확인! )

slider.jar

-> jar 파일을 넣은 후 프로젝트 동기화를 위해 다음과 같은 버튼을 눌러줍니다!!

이번 예제에서는 메인 액티비티에서 오른쪽 위에 있는 버튼을 누르면 슬라이드 메뉴가 보이는 예제입니다.

[ MainActivity.java ]

: 아래 예제는 오른쪽에서 화면이 나오게 만든 예제인데, 왼쪽에서 나오게 하려면 주석처리 된 소스를 사용하면 됨!!

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
 
import com.navdrawer.SimpleSideDrawer;
 
public class MainActivity extends Activity {
 
    SimpleSideDrawer slide_menu;
    Button btn_slide_menu;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        slide_menu = new SimpleSideDrawer(this);
        //slide_menu.setLeftBehindContentView(R.layout.activity_setting);   => 왼쪽에서 화면이 나오게 함
        slide_menu.setRightBehindContentView(R.layout.activity_setting);
        btn_slide_menu = (Button) findViewById(R.id.btn_slide_menu);
 
        //setting 버튼 누르면 슬라이드 메뉴로 세팅 화면 보여줌
        btn_slide_menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                //slide_menu.toggleLeftDrawer();    => 왼쪽에서 화면이 나오게 함
                slide_menu.toggleRightDrawer();
 
            }
        });
    }
}

[ activity_main.xml ]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical">
 
    <Button
        android:id="@+id/btn_slide_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Slide Menu"
        android:layout_gravity="right"/>
 
</LinearLayout>
 

[ activity_setting.xml ]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:text="  Slide Menu! Hello!  "
        android:background="@color/colorPrimary"/>
</LinearLayout>
 

< 실행 결과 >

                                        

- 화면에서 Slide Menu 버튼을 누르면 오른쪽과 같이 슬라이드 메뉴가 나온다

Tip & Tech

View : 뷰는 버튼, 그림, 텍스트 등의 유저 인터페이스(UI) 컴포넌트를 통틀어 부르는 이름. 뷰(View)라는 이름 그대로 사용자에게 보여주는 역할을 한다.

Activity : 액티비티는 사용자가 착수할 수 있는 하나의 포커스된 시도에 대한 비쥬얼 사용자 인터페이스를 나타낸다. 액티비티는 인터페이스 자체를 구성하는 기본 단위이며 어플리케이션을 실행했을 때 한 동작을 실행하는 동안 보여지는 화면 구성이다.