2013년 4월 18일 목요일

[Android] 이제 Action Bar 사용은 선택이 아닌 필수.


ActionBar는 Android 3.0(API Level 11)부터 추가되었으며 사용 할 때는 Manifest에서 targetSdkVersion 이나 minSdkVersion을 11로 맞춰줘야 되며, Theme.Holo 테마를 사용하여야 됩니다.(Theme.Holo가 Default  테마입니다.)

Android 3.0 이전에는 Title Bar에서 단순 Application의 이름정도만 보여주는게 전부 였으나 Android 3.0 부터는 Action Bar라는 놈이 추가되어서 Application의 이름 뿐만 아니라, 사용자가 보고 있는 화면의 위치, Navigation Button, Tab, Share 등을 빠르게 사용 할 수 있게 되었습니다.
사실 Android 3.0 이전부터 우리는 Action Bar의 기능을 전부 사용하고 있었습니다.
초창기 아이폰 App들의 UI를 벤치마킹 하여 디자인했기 때문에 안드로이드에는 back버튼이 있음에도 불구하고 상단에 back 버튼은 안드로이드 App에서도 흔히 볼 수 있었습니다.(물론 ActionBar의 Navigation Button과 back Button은 기능적으로 차이가 있습니다.) Back Button 뿐만 아니라 App에서 Home으로 바로 이동 할 수 있는 Button역시 관련 Activity에서 Inflate를 사용하던지 해당 View에 바로 적용하던지 하는 방법으로 사용 했었습니다. 뿐만 아니라 아이폰의 Tab이 아래에 있다는 이유만으로 안드로이드에서도 Tab을 하단에 적용해야 했던 적도 있었습니다.(안드로이드는 아이폰과 달리 하단에 Menu, Home, Back Button 이 있어서 Tab을 잘못 눌러 하단의 기본 Button들을 클릭 하는걸 방지하고자 Tab이 위에 있었던 겁니다.) 우리는 Share Button 역시 만들어서 사용 했었습니다. 그러나!! 이제는 Action Bar를 사용하여 위에 열거했던 모든 기능들을 간편하게 사용 할 수 있게 되었습니다.

안드로이드 개발자 사이트에 있는 Action Bar 이미지입니다. 여기서는 기능별로 4가지로 분류했습니다.


1. App Icon

Action Bar의 좌측에 App의 Icon을 넣을 수 있습니다. Icon을 터치하면 App의 Home으로 보낼 수도 있으며, Back Button과 마찬가지로 Task의 상위단계로 이동하게 만들 수도 있습니다.
ActionBar에서 Home로 이동하게 만들경우는 setHomeButtonEnabled(true);를 사용하여 나타낼수 있으며 Intent.FLAG_ACTIVITY_CLEAR_TOP를 추가해 주는것이 좋습니다. 그렇지 않으면 Back Button을 누를때 엄청난 양의 Task를 목격 하실 수도 있으실 겁니다.
ActionBar에서 Task의 상위 단계로 이동하게 만든다면setDisplayHomeAsUpEnabled(true); 사용하여 나타낼 수 있습니다. 상위단계로 이동하게 만들때의 주의점은 Back 버튼과 동일한 프로세스로 만드는게 아니라 상위 카테고리로 보내게끔 만드는게 더 나을 수도 있다는 점입니다. 예를 들자면 Home -> A -> B -> a -> b 와 같이 화면전환이 이루어 졌다면 (A와 B는 같은 레벨이며 a, b는 A, B의 하위 레벨 입니다.)  b 에서 Back Button을 누르면 a로 이동되나 ActionBar의 Navigation Button은 B로 이동되어져야 된다는 것입니다. Back Button이 있는 안드로이드에서 굳이 똑같은 기능을 하는 버튼을 하나 더 만들어야 되는지 생각해 볼 필요가 있습니다.


Home과 Task의 상위 단계로 보낼때의 Icon 모양은 아래와 같이 차이가 있습니다.강제성이 있는것은 아니나 이런 약속들은 지키는게 좋습니다. 이미지에 나타난 데로 Home으로 가는 버튼에는 " < " 기호가 없으며  상위 Task로 이동하는 버튼에는 " < "기호가 있음을 알 수 있습니다.


2. View control

다른 화면으로 이동 하고 싶을때 위의 이미지 처럼 drop-down 형태로 나타낼 수도 있으면 Tab방식으로 나타낼 수도 있습니다. 만약 화면 전환 메뉴가 필요없으면 해당 위치에 사용자의 위치를 표시 해 줄 수도 있으며, App의 Title를 표시해 놓을 수도 있습니다. 물론 사용자의 위치 와 Tab을 동시에 표시할 수도 있습니다. 

Tab을 사용 할때는 device화면의 크기에 따라 그림과 같이 Tablet 처럼 큰 화면에서의 배치와 작은 화면에서의 배치가 다르게 표현 된다는 걸 알 수 있습니다.



3. Action Button

Action Bar에 버튼을 추가하는 영역입니다. 보통 화면에서 가장 중요한 기능을 한 두가지 넣어주거나 Search 기능이나 Share기능을 추가 할 수도 있습니다. Action Bar에서 사용 할 Icon은 안드로이드 UX팀에 의해 디자인된 Action Icon을 사용하는것을 추천합니다. 만약 Custom 하려고 한다면 Android에서 제안하는 기준에 맞게 디자인 하기를 추천합니다. Action Bar안의 ActionView영역은 사라졌다가 확장되었다가 할 수 있기 때문에 device 화면의 크기에 따라 유동적으로 바뀌게끔 설정해 주면 됩니다. 이런 기능은 device화면이 작을 때 공간 효율을 더욱 좋게 해줍니다. 사용자가 Back Button이나 Navigation Button을 터치하면 확장되었던 화면은 다시 사라지게 되며 MenuItem의 expandActionView()와 colapseActionView()를 이용하여 ActionView를 사용자가 컨트롤 할수 있게 만들 수도 있습니다.

4. Action overflow

ActionBar에 메뉴 버튼이라고 생각하면 됩니다. 자주 사용하지 않은 기능들이나 화면에
넘치는 기능 또는 메뉴버튼으로 사용 되어지고 싶은 기능을 추가하는 영역입니다. Android 3.0이전에는 물리적인 메뉴버튼을 이용하였지만 Android 3.0이후에는 물리적인 메뉴 버튼 대신 Action Bar의 overflow 영역이 생겼습니다. Android 3.0이전의 모든 device에는 메뉴 버튼이 있었으나 Android 3.0 이후 부터는 물리적인 메뉴 버튼이 없는 device도 있습니다.  Android 3.0이전에 옵션메뉴로 개발되어진 App은 targetSdkVersion 이나 minSdkVersion를 11또는 그 이상으로 설정한다면 이전에 설정했던 옵션 기능들은 API 레벨에 근거하여 Action overflow에 추가하지 않습니다. 
보통 메뉴버튼은 해당 Activity의 옵션기능을 설정하였습니다. overflow영역 역시 마찬가지로 해당 Activity나 Fragment의 옵션 기능을 설정하는 영역입니다.



참조


댓글 없음:

댓글 쓰기