NEXTGRAM 만들기 5일차 안드로이드 앱 멋지게 차려입기 Side Navigation, Actionbar Written by 정문철 Reviewed by 손영수

1. ANDROID DAY 5
차려 입기
!
ACTION BAR
ACTION BAR COMPAT
NAVIGATION

2. 더 좋은 앱을 만들기 위한
안드로이드 UI를 배워 봅시다.

3. 학습목표
이 학습을 마치면…
-ActionBar를 사용하여 구글이 권장하는 UI설계를 할 수 있습니다.
!
-오픈소스나 기타 외부의 라이브러리를 가져다 사용할 수 있습니다.
!
-ActionBarCompat을 사용하여 허니콤 이하 버젼에서도 ActionBar를
사용할 수 있습니다.
!
-ActionBarCompat을 사용하여 Navigation을 만들 수 있습니다.

4. 액션바?

5. •
Action bar는 애플리케이션 개발시 사용되는 매우
중요한 디자인 엘리먼트 중 하나이다.
•
Action bar는 다른 안드로이드 애플리케이션들과
의 일관성을 제공하여 사용자들이 친숙함을 느낄
수 있는 여러가지 특징들을 제공한다.

6. 핸드폰이나 타블렛 등 여러 기기, 회전시의 화면 구성등
일관성을 가진 구성을 할 수 있습니다.

7. 기존에는 핸드폰의 메뉴 버튼을 눌러
추가 기능을 구성하였습니다.
하지만 메뉴는 숨겨져 있어서 사용자에게 불편을 주게 되고
구글에서는 ActionBar를 사용하기를 권장하게 되었습니다.

8. 프로젝트를 생성합니다.
이때 Minimum Required SDK를 API11로 바꿔줍니다.

9. 이미 작업중인 프로젝트가 있으면
AndroidManifest.xml의 android:minSdkVersion을 11로 바꿔줍니다.
!
액션바는 기본적으로 허니콤 이상만 지원하기 때문에
버젼을 바꾸어줘야 합니다.

10. 프로젝트에서 res - menu - main.xml 파일을 편집합니다.

11. item을 만들어 줍니다.
icon으로 액션바 아이콘을 지정 할 수 있습니다.
showAsAction이 없으면 일반 메뉴가 됩니다.
showAsAction의 속성으로 always나 ifRoom등을 테스트 해 보세요

12. 혹시 해당 액티비티에서 onCreateOptionsMenu를 삭제하셨으면
다시 위 함수를 작성하시고 inflate를 하는 파일로는
방금 전에 편집한 menu의 xml파일을 선택하여 주세요

13. ShowAsAction + icon
액션바에 표시됩니다.

14. NO ShowAsAction
메뉴버튼을 눌렀을때 활성화됩니다.

15. ifRoom|withText를 사용하면 액션바의 공간이 있으면
텍스트도 같이 표현됩니다.

16. onOptionsItemSelected를 사용하여 이벤트를 받을 수 있습니다.
이벤트는 getItemId로 구분하여 처리합니다.

17. 구글 액션바 디자인 가이드
http://developer.android.com/design/patterns/actionbar.html
!
액션바 스타일 제너레이터
http://jgilfelt.github.io/android-actionbarstylegenerator/

18. 액션바는
ANDROID 3.0 (API LEVEL 11)
허니컴 이상에서 지원합니다.
그 이하 버젼에서는 사용을 할 수 없습니다.

19. 4.1버젼
2.3버젼(메뉴화면)

20. http://developer.android.com/about/dashboards/index.html
~2.3은 현재 약 30%정도

21. 이전 버젼에서 사용하기 위해서는…
허니콤 이전 버젼에서 액션바를 사용하기 위해서
주로 Sherlock Action Bar나 Android Support Library를 사용합니다.
!
이 예제에서는 Android Support Library에 있는
ActionbarCompat을 사용합니다.

22. 하위 호환성을 가진
ACTIONBAR 만들기

23. 먼저 Android SDK Manager를 실행시켜줍니다.

24. 리스트의 하단 부분의 Extras를 들어가 보면
Android Support Library가 있습니다.
설치를 하거나 최신 버젼으로 업데이트를 해주세요

25. 이제 ActionBar Compat을 적용하기 위해
라이브러리를 불러와야 합니다.
File-New-Other에 들어가서

26. 기존 프로젝트 가져오기를 선택합니다.

27. browse를 눌러주시고…

28. SDK가 설치된 폴더에서
extras-android-support-v7-appcompat을 선택해줍니다.

29. SDK 위치를 확인하기 위해서는
Eclipse의 환경설정에 들어가서

30. Android항목을 선택하시면 SDK위치를 확인하실 수 있습니다.

31. appcompat을 찾으셨으면 Finish를 선택해주세요

32. 작업하시던 프로젝트를 마우스 오른쪽 버튼으로 클릭하신 후
Properties 창으로 들어갑니다.

33. Android항목에서 Librart Add를 선택합니다.

34. 아까 추가한 appcompat 프로젝트를 선택하고
ok를 눌러줍니다.

35. 라이브러리가 잘 추가된 것을 확인하시고
ok버튼을 눌러주세요

36. 이제 하위 버젼에서 사용가능한 ActionBar를 사용하므로
AndroidManifest.xml의 minSdkVersion을 8로 되돌려줍니다.

37. Activity가 아니라 Support 라이브러리에 있는
ActionBarActivity를 상속받도록 바꿔줍니다.

38. menu의 xml을 편집하시고 새로운 네임스페이스를 만들어야 합니다.
ActionBar와 관련된 내용인 showAsAction의 네임스페이스를
android대신 새로 만든 네임스페이스로 바꾸어줍니다.

39. AndroidManifest.xml을 편집하여
AppCompat용 style theme을 설정해 줘야 합니다.

40. AppCompat에서 기본 제공되는 스타일은
다음과 같이 3가지가 있습니다.
@style/Theme.AppCompat
@style/Theme.AppCompat @style/Theme.AppCompat
.Light
.Light.DarkActionBar

41. 이제 2.3버젼에서도
액션바가 잘 동작하는 것을
확인할 수 있습니다^^

42. NAVIGATION DRAWER
(SIDE NAVIGATION)

43. •
새로운 안드로이드 디자인 패턴인
NavigationDrawer(Side Navigation)을 구현을
할때에는 여러 라이브러리를 사용합니다.
•
gui-sliding-sidebar (walkingice)
•
android-sliding-menu-demo (gitgrimbo)
•
ActionBar Sherlock
•
등등

44. 하지만 이번에는 ActionBar Compat을
사용하여 Navigation을 만들어보겠습니다.
ActionBar Sherlock예제는
http://www.slideshare.net/arload/next-android-5-actionbar-sidenavigation
에서 보실수 있습니다. (큰 차이는 없습니다…)

45. 네비게이션을 쉽게 적용하기 위한 별도의 라이브러리를 사용합니다.
https://github.com/johnkil/SideNavigation
에서 라이브러리를 다운받아 압축을 풀어줍니다.

46. 앞서 ActionBarCompat을 불러올 때와 마찬가지로
new-other-Android Project from Existing Code로
프로젝트를 불러옵니다.

47. 압축푼 폴더의
SideNavigation-master에서
library를 선택합니다.

48. 프로젝트를 선택하고
Finish를 선택합니다.

49. 적용할 프로젝트를
마우스 오른쪽 클릭 후 Properties에 들어갑니다.

50. Android항목에서 Library의 Add를 합니다.

51. 방금전에 추가한 프로젝트를 선택 후
ok버튼을 눌러줍니다.

52. 라이브러리가 잘 추가된 것을 확인하시고
ok버튼을 눌러주세요

53. 네비게이션에서 사용될 메뉴의 종류를 편집합니다.
!
프로젝트에서 res - menu에
side_menu.xml(이름은 맘대로) 파일을 생성 해 편집합니다.
id와 title icon등의 속성들을 입력합니다.

54. 프로젝트의 res - layout에서 네비게이션이 들어갈 액티비티의
레이아웃을 편집해서
RelativeLayout의 맨 마지막 부분에 사이드 네비게이션을 정의합니다.
<com.devspark.sidenavigation.SideNavigationView
android:id="@+id/side_navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

55. 만약 RelativeLayout이 아니라 LinearLayout등의
다른 레이아웃에서 작업하고 계시다면…

56. 기존 레이아웃
새로 추가한
RelativeLayout과
SideNavigationView
기존의 레이아웃을 감싸는 RelativeLayout을 만들고
SideNavigationView를 달아주세요

57. 다시 소스코드로 돌아와서
import com.devspark.sidenavigation.ISideNavigationCallback;
import com.devspark.sidenavigation.SideNavigationView;
import com.devspark.sidenavigation.SideNavigationView.Mode;
를 불러옵니다.

58. 홈버튼(화면 좌상의 아이콘)을 누르면 네비게이션이 켜지도록 합니다.
이를 위해 setHomeButtonEnabled(true);setDisplayHomeAsUpEnabled(true)을
사용하여 홈버튼을 활성화 시킵니다.
!
ActionBar Compat에서는 getSupportActionBar()를 사용합니다.

59. findViewById로 레이아웃에서 설정한 Id를 입력하고
setMenuItems에는 item을 편집한 menu의 xml 파일을 불러옵니다.
setMode는 화면 왼쪽, 오른쪽에서 사이드 네비게이션이 나오도록 합니다.

60. 기존에 액션바의 이벤트를 받던 onOptionsItemSelected()에
android.R.id.home을 분기로 추가하고
toggleMenu()를 해서 네비게이션이 나오도록 합니다.

61. 사이드 네비게이션의 이벤트를 받아오기 위해 콜백함수를 만듭니다.
적용은 앞 슬라이드에 나왔던
sideNavigationView.setMenuClickCallback(sideNavigationCallback);
에 적용합니다.

63. 정리하기

64. 외부 라이브러리를 적용하는 법을 배웠습니다.

65. @style/Theme.AppCompat
@style/Theme.AppCompat @style/Theme.AppCompat
.Light
.Light.DarkActionBar
액션바를 만들고 허니콤 이하 버젼에서도
동작하도록 만들었습니다.

66. 네비게이션을 만들어
많은 메뉴 항목을
보기 쉽게 집어넣었습니다.

67. 수고하셨습니다^^