태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

액션바(Action bar) 따라잡기 - 액션바가 뭔가요?

2011/05/30 01:51

안드로이드 3.0, 허니컴(Honeycomb)에서는 태블릿 단말에 최적화된 컴포넌트들이 많이 추가되었는데요, 프래그먼트(Fragment)와 함께 허니컴에서 추가된 대표적인 UI 컴포넌트 중 하나가 바로 액션바(Action bar)입니다.

액션바는 기존 안드로이드 애플리케이션의 타이틀바(Title bar)를 대체하는 컴포넌트로, 기존 타이틀바가 단순히 제목만을 표시하거나 간단한 정보만을 표시할 수 있던 것에 반해 액션바는 제목 표시 뿐만 아니라 메뉴 제공, 액션 아이템(Action item)을 통한 단축 메뉴 제공, 탭 지원 등 다양한 기능을 포함하고 있습니다. 다음은 전형적인 액션바의 모습을 보여줍니다.

액션바(Action bar)의 모습



액션바를 표시하려면?


안드로이드 3.0 이하 버전으로 작성된 애플리케이션 (매니페스트에 Min SDK Version / Target SDK Version이 11 이하인 경우)을 안드로이드 3.0이 탑재된 단말기에서 실행하면 액션바 대신 기존의 타이틀바가 그대로 표시됩니다. 때문에, 기존 플랫폼 버전을 지원함과 동시에 액션바도 표시되도록 하려면 매니페스트의 Target SDK Version을 11 이상으로 수정해야 합니다.

기존 버전과 3.0버전 이상을 동시에 지원하기 위한 매니페스트 설정



액션바와 메뉴(OptionsMenu), 그리고 액션 아이템(Action item)


액션바와 메뉴는 뗼레야 뗄 수 없는 관계입니다. 안드로이드 3.0 이상이 탑재된 단말기를 처음 접하게 되면 메뉴키가 없어 당황하는 분들이 꽤 있습니다. 물론 기존 플랫폼 버전을 타깃으로 작성된 애플리케이션을 실행했을 때는 메뉴를 호출할 수 있도록 하단에 메뉴키가 생기지만, 안드로이드 3.0을 타깃으로 작성된 애플리케이션에서는 메뉴키를 찾을 수 없을 것입니다.


기존 버전을 타깃으로 작성된 애플리케이션을 안드로이드 3.0 이상에서 실행했을 때 메뉴 표시모습



그렇다면, 메뉴는 과연 어디에 표시되는 것일까요? 답은 의외로 가까운 곳에 있습니다. 바로 액션바입니다. 액션바는 여러 역할을 하지만, 가장 주된 역할은 메뉴를 표시 기능입니다. 기존 버전을 타깃으로 작성된 애플리케이션의 타깃을 안드로이드 3.0 이상으로 변경한 후 다시 실행해보면 다음과 같이 액션바 우측 구석에 메뉴 버튼이 표시되는 것을 확인할 수 있습니다.



안드로이드 3.0부터는 메뉴가 액션바의 오버플로우 메뉴(눌렀을 때 리스트로 나타나는 메뉴)에 표시되며, 메뉴 항목 중 빈번한 사용이 예상되는 항목은 액션바에 바로 항목이 노출되도록 할 수 있습니다. 이렇게 오버플로우 메뉴가 아닌 액션바에 바로 노출되는 항목을 액션 아이템(Action item)이라 합니다.

일반 메뉴 항목을 액션 아이템으로 표시되도록 하는 방법은 크게 두 가지입니다. 하나는 메뉴 XML을 사용하는 방법, 다른 하나는 코드로 구현하는 방법입니다. 두 가지 방법 모두 동일한 결과를 내는 데는 문제가 없지만, 코드를 통해 구현하는 경우 SDK 버전에 맞추어 별도로 코드를 작성해야 하므로 XML을 통해 설정하는 방법을 권장합니다.

XML에서 메뉴 항목이 액션 아이템으로 표시되도록 설정하려면 다음과 같이 android:showAsAction 속성을 지정하면 됩니다. 다음 예제는 메뉴 항목에 대해 공간이 있을 경우 메뉴 항목의 텍스트를 동시에 표시하도록 구현하고 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_add"
          android:icon="@drawable/ic_menu_save"
          android:title="@string/menu_save"
          android:showAsAction="ifRoom|withText" />
</menu>

android:showAsAction 속성으로 지정할 수 있는 항목은 다음과 같습니다.

  •  ifRoom : 액션 아이템을 표시할 수 있는 공간이 있다면 액션 아이템을 표시합니다. 
  •  never : 항상 액션 아이템으로 표시하지 않습니다. (기본값)
  •  withText : 메뉴 항목의 아이콘과 메뉴 항목의 텍스트를 함께 액션 아이템으로 표시합니다.
  •  always : 항상 액션 아이템으로 표시합니다.

메뉴 항목이나 액션 항목을 선택했을 때 수행할 작업 구현은 기존과 동일하게 onOptionsItemSelected() 메서드에서 처리합니다. 안드로이드 3.0부터는 액션바 좌측에 애플리케이션 아이콘이 기본적으로 표시되는데, 이 아이콘을 눌렀을 때 처리할 동작 또한 동일한 메서드에서 처리할 수 있습니다. 애플리케이션 아이콘의 id는 android.R.id.home으로, onOptionsItemSelected()에서 이 id를 사용하여 적절한 작업을 수행하도록 구현할 수 있습니다.


액션바 감 잡아보기


지금까지 액션바에 대해 간단히 알아보았으니 예제를 통해 확실히 사용법을 알아보도록 하겠습니다.

[어플리케이션 정보]

액티비티
  • Main (Main.java)

메뉴 리소스
  • menu.xml

API Level
  • Android 3.0 (API Level 11)



프로젝트를 생성한 후, 다음과 같이 리소스 추가 마법사를 사용하여 메뉴 리소스를 추가합니다.

메뉴 리소스를 추가합니다.


다음, 메뉴 항목을 추가합니다. 예제에서는 총 3개의 메뉴 항목을 추가합니다. 다음과 같이 메뉴 리소스를 작성합니다.

[menu.xml]
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item
		android:showAsAction="ifRoom|withText"
		android:id="@+id/item1"
		android:icon="@android:drawable/ic_menu_add"
		android:title="Add"
	/>
	<item
		android:id="@+id/item2"
		android:showAsAction="always"
		android:title="Action item with icon"
		android:icon="@android:drawable/ic_menu_search"
	/>
	<item
		android:title="Normal item"
		android:id="@+id/item3"
	/>
</menu>

각 메뉴 항목을 보면 각각 다른 속성을 적용한 것을 알 수 있습니다. 첫 번째 항목과 두 번째 항목은 모두 액션 아이템으로 표시하도록 설정하였지만, 첫 번째 항목은 액션바에 빈 공간이 있을 때만 표시하며 아이콘과 텍스트 모두 표시되도록 설정하였습니다. 두 번째 항목은 항상 액션 아이템으로 표시되도록 하였으며, 세 번째 항목은 일반적인 메뉴 항목으로써 오버플로우 메뉴에 표시되도록 설정하였습니다.

다음, 메뉴 항목을 선택했을 때 실행할 동작을 구현해 보도록 하겠습니다. 우선 onCreateOptionsMenu()에서 메뉴 리소스 파일을 불러 메뉴에 적용한 후, onOptionsItemSelected() 메서드에서 각 메뉴 항목을 선택했을 때 수행할 동작을 구현합니다.

[Main.java]
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.menu, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		String text = null;
		
		switch(item.getItemId()){
		case android.R.id.home:
			text = "Application icon";
			break;
			
		case R.id.item1:
			text = "Action item, with text, displayed if room exists";
			break;
			
		case R.id.item2:
			text = "Action item, icon only, always displayed";
			break;
			
		case R.id.item3:
			text = "Normal menu item";
			break;
			
		default:
			return false;
		}
		Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
		return true;
	}

각 항목을 선택할 때마다 해당 항목의 속성을 토스트로 표시하도록 구현했습니다. 앞에서 알아본 것과 같이 액션바에 표시되는 애플리케이션 아이콘(android.R.id.home)을 선택한 것 또한 감지하여 토스트로 표시하도록 구현했습니다.

예제를 실행하면 다음과 같이 액션바가 표시되는것을 확인할 수 있습니다. 메뉴 리소스에서 설정한 것과 같이 첫번째와 두번째 항목이 액션 아이템으로 표시되고, 나머지 한 항목은 오버플로우 메뉴에 표시됩니다. 

액션바가 표시되는 모습



각 항목을 선택하면 앞에서 구현한 것과 같이 각 항목에 해당하는 토스트가 표시됩니다. 애플리케이션 아이콘을 눌렀을 때 토스트가 표시되는 것 또한 확인할 수 있습니다.


애플리케이션 아이콘을 선택했을 때의 모습



이것으로 액션바에 대해 간단히 알아보았습니다. 이 정도면 어느 정도 액션바가 무엇인지에 대해 감을 잡을 수 있었을 것이라 생각합니다. 다음 포스트에서는 액션바의 조금 더 다양한 내용에 대해 알아보도록 하겠습니다.


저작자 표시 비영리 변경 금지
크리에이티브 커먼즈 라이선스
Creative Commons License

커니 화면 구성/액션 바(Action Bar) , , , , , , , , ,

  1. Blog Icon
    서동규

    이메일 구독으로 업데이트 되는 글들 읽고 있습니다.

    매번 정말 좋은 글 감사합니다.

    열심히 해서 정보를 공유하는 사람이 되도록 할께요^^

  2. Blog Icon
    Stettner

    안녕하세요. 커니님 강좌 잘 보고있습니다. 액션바에 대해서 궁금한게 하나 있는데.
    액션바의 Icon 이미지는 gravity로도 위치가 변경되지않던데 혹시 커니님은 아시는 부분이있으신지..^^;;

  3. Blog Icon
    김현중

    android:icon="@android:drawable/ic_menu_search" 은 기본적으로 제공하는 아이콘이라는건 알겠는데..
    만약에 자기가 쓸 아이콘을 대체해서 쓴다면 이 부분에서 어떤 부분이 바뀌어야 하나요..

    예를 들어 res/drawble-hdpi 폴더에 잇는 png파일이라면요..

  4. http://developer.android.com/guide/topics/resources/accessing-resources.html#ResourcesFromXml

    이 문서를 참조하세요.

  5. Blog Icon
    ICS

    안녕하세요 강좌 잘보고있습니다.^^;;

    궁금한 것이 있는데요
    option menu를 만들때 showAsOption을 설정을 SHOW_AS_ACTION_IF_ROOM 옵션을 사용하면 공간이 있을경우 action Bar에 나타나고
    공간이 없을 경우는 기존의 옵션메뉴로 들어가는게 아니라 하단에 특정공간이 할당되어서 거기에 배치가 되더는것 같더군요. 이렇게 생각한게 ics 구글 소스 중에 wifisettings.java와 bluetoothsettings.java에서 화면을 SHOW_AS_ACTION_IF_ROOM 옵션을 사용했음에도 화면 하단 부분에 버튼이 생깁니다.
    문제는 이걸 테스트해보려고 테스트소스를 짜서 actionBar공간을 없애보려고하는데 잘안되네요..;;
    actionBar공간을 어떻게 없애야할까요;;

  6. Blog Icon
    잠와도 못자

    항상 많이 배우고 가요~ ^______________________^
    매뉴는 항상 우측에나타나는가요? 홈매뉴를 없애고 [매뉴] [ 빈공간] [매뉴]로 엑션바를 가득체우고싶은데 선택한 매뉴를 좌측으로 정렬할순 없나요?ㅠㅠ

    알려주세요.ㅠㅠ 도와주세요....ㅠㅠ


    email : eoensms@gmail.com

  7. Blog Icon

    잘보고갑니다.
    액션바를 정말 잘 정리해놓으셨네요