[Android] ActionBarSherlock과 Menudrawer 써보기

이 글에서는 github를 이용합니다.

각자 사용하시는 git tool을 사용하시면 됩니다.

혹은 그냥 다운받아서 사용만 하시려는 경우, github에서 download zip을 하시면 됩니다.

또한 제가 이것을 GDG Korea Android Code Lab에서 배웠고 거기서 사용한 Skeleton 프로젝트가 있습니다.

그것을 이용할 예정임을 미리 알려드립니다!!

1. skeleton 프로젝트 다운로드 받기

https://github.com/huewu/codelab_skeleton

위 링크로 들어가서 프로젝트를 다운로드 or git clone 합니다. 이 프로젝트를 만들기위해 수고해주신 huewu님과 gdg korea android를 위해 Fork 한번씩 눌러주시면 더 좋겠죠? :)

또한 아래의 링크로 들어가서 마찬가지로 다운로드 or git clone 합니다. (위 링크의 페이지에서 ReadMe.md 내용에도 있습니다.)

• Actionbar Sherlock: https://github.com/JakeWharton/ActionBarSherlock
• Android MenuDrawer: https://github.com/SimonVT/android-menudrawer

다운로드 받으실 때 이클립스에서 작업하실 workspace 내부에 다운로드 받지 마시기 바랍니다. Import를 할 때 문제가 생깁니다.

2. 프로젝트 준비 및 라이브러리 임포트

codelab_skeleton에서 받은 프로젝트에서 ActionBarSherlock과 MenuDrawer를 사용하기 위해서 라이브러리를 로드해야합니다. 그 라이브러리는 위에서 언급한 Actionbar Sherlock 프로젝트와 MenuDrawer 프로젝트 내부에 있습니다. 

  1) 먼저 이클립스를 켭니다.

  2) codelab_skeleton 프로젝트를 Import 합니다.

 3) Actionbar Sherlock 프로젝트의 라이브러리를 Import 합니다.

 주의! 이 글에선 codelab_skeleton에서 Actionbar Sherlock을 써보는 것까지만 기술할 예정입니다. 따라서 library만 로드합시다.

  4) 로드된 library 프로젝트의 이름을 libActionbarSherlock으로 수정합니다.

(다음에 Import할 MenuDrawer와 라이브러리 프로젝트 이름이 겹치기 때문입니다.)

  5) 위의 방법과 마찬가지로 MenuDrawer를 Import합니다. library만을 Import한 후 프로젝트이름을 library에서 libMenuDrawer로 바꿔줍시다.

  6) 이 단계를 마치면 다음과 같은 프로젝트들이 준비됩니다.

위의 ActionbarSherlock과 MenuDrawer에서 Import하지 않은 샘플들은 나중에 Import 해보세요. 이 두 라이브러리를 사용하는데 많은 도움이 되실겁니다.

3. 라이브러리 로드하기

처음 프로젝트를 Import 하면 에러가 있는 상태일겁니다. (프로젝트 아이콘에 x표가 뜨는 것을 보실 수 있을겁니다.)

라이브러리가 제대로 로드가 되지 않은 상태이기 때문인데요. 다음과 같은 작업으로 라이브러리를 바르게 다시 로드합니다.

프로젝트를 오른쪽클릭하여 Properties를 열고 Android 탭을 클릭해줍니다.

처음엔 아래와 같은 화면을 보시게 될겁니다.

저 두 항목을 각각 클릭하여 Remove한 뒤 앞에서 Import한 라이브러리들을 Add 해줍니다!

성공적으로 라이브러리들을 Add하면 다음과 같은 상태가 됩니다.

4. Actionbar Sherlock 사용해보기

조금의 소스 추가로 Actionbar Sherlock을 사용해볼 수 있습니다. 시작합니다.

  1) 상속받은 Activity를 SherlockActivity로 바꾸기

기존의 Activity를 extends하게 되면 2.3 이하의 버전에서는 Actionbar를 정상적으로 사용할 수 없습니다. 때문에 상속받는 Activity를 Serlock의 Activity로 바꿔줘야 합니다. (ListActivity일 경우에도 SherlockListActivity로 바꿔줘야합니다. 즉 Actionbar를 사용할 모든 Activity는 Sherlock의 Activity를 상속받는 것으로 바꿔줘야 합니다.)

  2) onCreateOptionsMenu 메소드 고치기

public boolean onCreateOptionsMenu(Menu menu) 메소드에 에러가 있는 것은 잘못된 Menu를 사용하고 있기 때문입니다.

기존에 import 되어 있는 android.view.Menu를 지우고 com.actionbarsherlock.view.menu를 Import합니다.

하지만 그 다음에는 getMenuInflater().inflate(R.menu.main, menu)가 에러가 뜰 것입니다. 여기서 getMenuInflater를 getSupportMenuInflater로 바꿔줍시다.

아래 사진은 수정이 완료된 MainActivity의 전체 소스입니다.

  3) activity style 바꾸기

처음 res/values/style.xml은 다음 그림과 같을겁니다. 하지만 Actionbar Sherlock을 사용하기 위해서는 Theme 역시 바꿔줘야합니다!

여기서 android:Theme.Light 부분을 Theme.Sherlock으로 바꿔줍니다. 아래 사진처럼요.

(Theme.Sherlock.Light로 바꿨을 땐 어떻게 바뀔지 생각해보세요.)

styles.xml

  4) 이제 Application을 Run 해봅시다! AVD 혹은 본인의 안드로이드 폰을 컴퓨터와 연결해서 Run 해보세요!!

5. MenuDrawer 사용하기

이제는 MenuDrawer를 사용해보겠습니다.

  1) MenuDrawer에서 사용할 Layout 만들기

MenuDrawer에서 나타날 View 역시 하나의 Layout을 가집니다. 텍스트뷰를 가진 간단한 layout xml을 작성해보겠습니다.

menu_drawer.xml

  2) dimen.xml에서 MenuDrawer의 크기 설정

원래 해상도에 따라 다른 작업을 해줘야 하지만 여기서는 임시로 간단하게 작성하도록 하겠습니다.

res/values/dimens.xml에서 <dimen name="menu_width">100dp</dimen>을 추가해줍니다.

  3) MainActivity.java에서 MenuDrawer를 사용하기 위한 소스 추가하기

Activity에서 MenuDrawer를 사용하기 위해서는 당연히 소스를 작성해야겠죠?

  4) Run Run Run~

백문이 불여일견이라고 직접 Run 해봅시다.

MenuDrawer.attack(this, MenuDrawer.MENU_DRAG_WINDOW)에서 MENU_DRAG_CONTENT로 바꿔서도 한 번 Run 해보세요.

6. 끝! 지금까지 배운 내용을 이용하여 더 멋진 앱을 만들어봅시다!

앞에서 로드하지 않았던 Actionbar Sherlock과 MenuDrawer의 Sample들도 참고해보면 더 좋겠죠?

좋은 정보를 알게 된다면 공유 부탁드립니다.