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

안드로이드 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)

ActionBarExample.zip

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

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

다음, 메뉴 항목을 추가합니다. 예제에서는 총 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)을 선택한 것 또한 감지하여 토스트로 표시하도록 구현했습니다.

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

액션바가 표시되는 모습

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

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

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