Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

[Android Tutorial] 슬라이딩 메뉴 만들기

화면 좌측에 슬라이딩 메뉴가 나오는 UI가 대세다. 가장 초기에 사용되었던 Tab의 공간적 한계를 극복한 형태인데, 그렇다 보니 기본 컨트롤로 지원되지는 않는다. 사용성면에서나 디자인면에서나 Tab보다 마음에 들어, 어떤 앱을 만들어도 거의 이 구조를 사용하게 된다. 그래서 항상 세팅하던 그 부분에 대해서 정리하였다. 아직도 안드로이드 2.x (프로요, 진저브레드)를 사용하는 유저가 20%가 넘는데, 이 방법은 2.x 유저까지도 지원 가능한 방법이다.

기본 컨트롤이 아니다보니 2가지 라이브러리가 필요하다.

결과물

설정

기본 설정으로 Android Application 을 만든다.

앞서 설명한 라이브러리 2개를 Import 한다. SlidingMenu 의 경우, 하위 폴더 중 library 폴더를 선택하여 slide_library 를 불러야 한다.

메인 프로젝트의 Properties > Android 에서 Library로 slide_library 를 Add 한다. actionbarsherlock은 여기서 Add 하지 않는다.

마찬가지로 slide_library의 Properties > Android 에서 Library로 actionbarsherlock을 추가한다. 메인 프로젝트와 하나 다른 점은 Is Library에 체크를 해야 한다. 이 자체가 메인 프로젝트의 라이브러리로 사용되기 때문이다. 그리고 Project Build Target은 Google APIs로 설정한다.

마지막으로 actionbarsherlock의 Properties를 열어서, Is Library에 체크한다.

Navigator에는 총 3개의 프로젝트가 있는데, 각각의 프로젝트에는 libs 폴더가 있다. 그리고 android-support-v4.jar 파일을 갖고 있는 경우가 있는데, 중복될 경우 오류가 발생하므로 하나만 남겨두고 지워야 한다. actionbarsherlock에만 남겨두도록 한다.

파일 수정

src/MainActivity.java

이 구조는 두 개의 Fragment를 포개놓고, 스와이프 했을 때 아래의 Fragment가 보여지는 방식이다. 상단에는 메인 컨텐츠, 하단에는 메뉴를 설정하는 것이 보통이다. 각각 setContentView, setBehindContentView로 설정한다.

슬라이딩 메뉴 커스터마이징하는 부분은 setBehindOffsetRes가 가장 중요할 것 같다. 메뉴를 열었을 때 얼마나 열리는지 설정 가능하다. 숫자가 클수록 조금만 열린다.

AndroidManifest.xml

android:theme 부분 수정

values/dimens.xml

아래 내용 추가

파일 생성

src/BaseActivity.java

액션바를 그대로 쓰면 커스터마이징하기가 꽤 힘들다. 위의 동영상을 보면, 잠깐 보여졌다 사라지는 바를 볼 수 있다. 이 부분은 앱 실행시 보여지는 Splash Activity 를 추가하면 보여지지 않게 된다. 일종의 꼼수 🙂 그래서 토글 버튼을 ActionBar에 내재된 기능을 사용하지 않고, 임의로 BaseActivity 에 메뉴 Open/Close 버튼을 추가하였다.

SplashActivity 또한 모든 앱을 만들 때마다 필수로 작업해야 하는 부분이므로, 다음에 다룰 예정이다.

layout/action_bar_title.xml

액션바의 레이아웃 정의 파일. 버튼과 타이틀 텍스트만 설정하였다.

  • drawable/shadow.xml
  • drawable/menu_toggle.png
  • layout/content_frame.xml
  • layout/menu_frame.xml
  • layout/menuone.xml
  • layout/menutwo.xml
  • src/MenuFragment.java
  • src/MenuOneFragment.java
  • src/MenuTwoFragment.java

추가로 생성한 파일들은 링크를 통해 받아볼 수 있다. 파일 다운로드