[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
Upcoming SlideShare
Loading in...5
×
 

[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)

on

  • 3,596 views

NEXTGRAM 만들기 5일차

NEXTGRAM 만들기 5일차

안드로이드 앱 멋지게 차려입기
Side Navigation, Actionbar

Written by 정문철
Reviewed by 손영수

Statistics

Views

Total Views
3,596
Views on SlideShare
3,538
Embed Views
58

Actions

Likes
4
Downloads
67
Comments
0

2 Embeds 58

http://www.heej.net 56
http://nigayo.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation) [NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation) Presentation Transcript

  • ANDROID DAY 5 차려 입기 ! ACTION BAR ACTION BAR COMPAT NAVIGATION
  • 더 좋은 앱을 만들기 위한 안드로이드 UI를 배워 봅시다.
  • 학습목표 이 학습을 마치면… -ActionBar를 사용하여 구글이 권장하는 UI설계를 할 수 있습니다. ! -오픈소스나 기타 외부의 라이브러리를 가져다 사용할 수 있습니다. ! -ActionBarCompat을 사용하여 허니콤 이하 버젼에서도 ActionBar를 사용할 수 있습니다. ! -ActionBarCompat을 사용하여 Navigation을 만들 수 있습니다.
  • 액션바?
  • • Action bar는 애플리케이션 개발시 사용되는 매우 중요한 디자인 엘리먼트 중 하나이다. • Action bar는 다른 안드로이드 애플리케이션들과 의 일관성을 제공하여 사용자들이 친숙함을 느낄 수 있는 여러가지 특징들을 제공한다.
  • 핸드폰이나 타블렛 등 여러 기기, 회전시의 화면 구성등 일관성을 가진 구성을 할 수 있습니다.
  • 기존에는 핸드폰의 메뉴 버튼을 눌러 추가 기능을 구성하였습니다. 하지만 메뉴는 숨겨져 있어서 사용자에게 불편을 주게 되고 구글에서는 ActionBar를 사용하기를 권장하게 되었습니다.
  • 프로젝트를 생성합니다. 이때 Minimum Required SDK를 API11로 바꿔줍니다.
  • 이미 작업중인 프로젝트가 있으면 AndroidManifest.xml의 android:minSdkVersion을 11로 바꿔줍니다. ! 액션바는 기본적으로 허니콤 이상만 지원하기 때문에 버젼을 바꾸어줘야 합니다.
  • 프로젝트에서 res - menu - main.xml 파일을 편집합니다.
  • item을 만들어 줍니다. icon으로 액션바 아이콘을 지정 할 수 있습니다. showAsAction이 없으면 일반 메뉴가 됩니다. showAsAction의 속성으로 always나 ifRoom등을 테스트 해 보세요
  • 혹시 해당 액티비티에서 onCreateOptionsMenu를 삭제하셨으면 다시 위 함수를 작성하시고 inflate를 하는 파일로는 방금 전에 편집한 menu의 xml파일을 선택하여 주세요
  • ShowAsAction + icon 액션바에 표시됩니다.
  • NO ShowAsAction 메뉴버튼을 눌렀을때 활성화됩니다.
  • ifRoom|withText를 사용하면 액션바의 공간이 있으면 텍스트도 같이 표현됩니다.
  • onOptionsItemSelected를 사용하여 이벤트를 받을 수 있습니다. 이벤트는 getItemId로 구분하여 처리합니다.
  • 구글 액션바 디자인 가이드 http://developer.android.com/design/patterns/actionbar.html ! 액션바 스타일 제너레이터 http://jgilfelt.github.io/android-actionbarstylegenerator/
  • 액션바는 ANDROID 3.0 (API LEVEL 11) 허니컴 이상에서 지원합니다. 그 이하 버젼에서는 사용을 할 수 없습니다.
  • 4.1버젼 2.3버젼(메뉴화면)
  • http://developer.android.com/about/dashboards/index.html ~2.3은 현재 약 30%정도
  • 이전 버젼에서 사용하기 위해서는… 허니콤 이전 버젼에서 액션바를 사용하기 위해서 주로 Sherlock Action Bar나 Android Support Library를 사용합니다. ! 이 예제에서는 Android Support Library에 있는 ActionbarCompat을 사용합니다.
  • 하위 호환성을 가진 ACTIONBAR 만들기
  • 먼저 Android SDK Manager를 실행시켜줍니다.
  • 리스트의 하단 부분의 Extras를 들어가 보면 Android Support Library가 있습니다. 설치를 하거나 최신 버젼으로 업데이트를 해주세요
  • 이제 ActionBar Compat을 적용하기 위해 라이브러리를 불러와야 합니다. File-New-Other에 들어가서
  • 기존 프로젝트 가져오기를 선택합니다.
  • browse를 눌러주시고…
  • SDK가 설치된 폴더에서 extras-android-support-v7-appcompat을 선택해줍니다.
  • SDK 위치를 확인하기 위해서는 Eclipse의 환경설정에 들어가서
  • Android항목을 선택하시면 SDK위치를 확인하실 수 있습니다.
  • appcompat을 찾으셨으면 Finish를 선택해주세요
  • 작업하시던 프로젝트를 마우스 오른쪽 버튼으로 클릭하신 후 Properties 창으로 들어갑니다.
  • Android항목에서 Librart Add를 선택합니다.
  • 아까 추가한 appcompat 프로젝트를 선택하고 ok를 눌러줍니다.
  • 라이브러리가 잘 추가된 것을 확인하시고 ok버튼을 눌러주세요
  • 이제 하위 버젼에서 사용가능한 ActionBar를 사용하므로 AndroidManifest.xml의 minSdkVersion을 8로 되돌려줍니다.
  • Activity가 아니라 Support 라이브러리에 있는 ActionBarActivity를 상속받도록 바꿔줍니다.
  • menu의 xml을 편집하시고 새로운 네임스페이스를 만들어야 합니다. ActionBar와 관련된 내용인 showAsAction의 네임스페이스를 android대신 새로 만든 네임스페이스로 바꾸어줍니다.
  • AndroidManifest.xml을 편집하여 AppCompat용 style theme을 설정해 줘야 합니다.
  • AppCompat에서 기본 제공되는 스타일은 다음과 같이 3가지가 있습니다. @style/Theme.AppCompat @style/Theme.AppCompat @style/Theme.AppCompat .Light .Light.DarkActionBar
  • 이제 2.3버젼에서도 액션바가 잘 동작하는 것을 확인할 수 있습니다^^
  • NAVIGATION DRAWER (SIDE NAVIGATION)
  • • 새로운 안드로이드 디자인 패턴인 NavigationDrawer(Side Navigation)을 구현을 할때에는 여러 라이브러리를 사용합니다. • gui-sliding-sidebar (walkingice) • android-sliding-menu-demo (gitgrimbo) • ActionBar Sherlock • 등등
  • 하지만 이번에는 ActionBar Compat을 사용하여 Navigation을 만들어보겠습니다. ActionBar Sherlock예제는 http://www.slideshare.net/arload/next-android-5-actionbar-sidenavigation 에서 보실수 있습니다. (큰 차이는 없습니다…)
  • 네비게이션을 쉽게 적용하기 위한 별도의 라이브러리를 사용합니다. https://github.com/johnkil/SideNavigation 에서 라이브러리를 다운받아 압축을 풀어줍니다.
  • 앞서 ActionBarCompat을 불러올 때와 마찬가지로 new-other-Android Project from Existing Code로 프로젝트를 불러옵니다.
  • 압축푼 폴더의 SideNavigation-master에서 library를 선택합니다.
  • 프로젝트를 선택하고 Finish를 선택합니다.
  • 적용할 프로젝트를 마우스 오른쪽 클릭 후 Properties에 들어갑니다.
  • Android항목에서 Library의 Add를 합니다.
  • 방금전에 추가한 프로젝트를 선택 후 ok버튼을 눌러줍니다.
  • 라이브러리가 잘 추가된 것을 확인하시고 ok버튼을 눌러주세요
  • 네비게이션에서 사용될 메뉴의 종류를 편집합니다. ! 프로젝트에서 res - menu에 side_menu.xml(이름은 맘대로) 파일을 생성 해 편집합니다. id와 title icon등의 속성들을 입력합니다.
  • 프로젝트의 res - layout에서 네비게이션이 들어갈 액티비티의 레이아웃을 편집해서 RelativeLayout의 맨 마지막 부분에 사이드 네비게이션을 정의합니다. <com.devspark.sidenavigation.SideNavigationView android:id="@+id/side_navigation_view" android:layout_width="match_parent" android:layout_height="match_parent" />
  • 만약 RelativeLayout이 아니라 LinearLayout등의 다른 레이아웃에서 작업하고 계시다면…
  • 기존 레이아웃 새로 추가한 RelativeLayout과 SideNavigationView 기존의 레이아웃을 감싸는 RelativeLayout을 만들고 SideNavigationView를 달아주세요
  • 다시 소스코드로 돌아와서 import com.devspark.sidenavigation.ISideNavigationCallback; import com.devspark.sidenavigation.SideNavigationView; import com.devspark.sidenavigation.SideNavigationView.Mode; 를 불러옵니다.
  • 홈버튼(화면 좌상의 아이콘)을 누르면 네비게이션이 켜지도록 합니다. 이를 위해 setHomeButtonEnabled(true);setDisplayHomeAsUpEnabled(true)을 사용하여 홈버튼을 활성화 시킵니다. ! ActionBar Compat에서는 getSupportActionBar()를 사용합니다.
  • findViewById로 레이아웃에서 설정한 Id를 입력하고 setMenuItems에는 item을 편집한 menu의 xml 파일을 불러옵니다. setMode는 화면 왼쪽, 오른쪽에서 사이드 네비게이션이 나오도록 합니다.
  • 기존에 액션바의 이벤트를 받던 onOptionsItemSelected()에 android.R.id.home을 분기로 추가하고 toggleMenu()를 해서 네비게이션이 나오도록 합니다.
  • 사이드 네비게이션의 이벤트를 받아오기 위해 콜백함수를 만듭니다. 적용은 앞 슬라이드에 나왔던 sideNavigationView.setMenuClickCallback(sideNavigationCallback); 에 적용합니다.
  • 정리하기
  • 외부 라이브러리를 적용하는 법을 배웠습니다.
  • @style/Theme.AppCompat @style/Theme.AppCompat @style/Theme.AppCompat .Light .Light.DarkActionBar 액션바를 만들고 허니콤 이하 버젼에서도 동작하도록 만들었습니다.
  • 네비게이션을 만들어 많은 메뉴 항목을 보기 쉽게 집어넣었습니다.
  • 수고하셨습니다^^