[Android] ActionBar 정리

📝 SeSAC의 'JetPack과 Kotlin을 활용한 Android App 개발' 강좌를 정리한 글 입니다.

---

📇 ActionBar 개요

📚 액티비티의 구조

액티비티가 출력하는 전체 화면을 Window 라고 하고, ActionBar 와 Content 로 구성되어 있다.

여기서 ActionBar 는 화면 상단의 타이틀 문자열이 출력되는 영역이다.

우리가 kt 파일에서 setContentView 를 사용하는 의미를 여기서 알 수 있다.

setContentView 로 Content 영역을 개발자가 임의로 제어할 수 있는 것이다.

ActionBar 는 따로 명령을 내리지 않아도 기본적으로 출력된다. 이 경우 타이틀 문자열이 출력된다.

물론 개발자가 구성요소를 추가 할 수 있다.

📌 ActionBar 의 구성요소

타이틀 문자열, 네비게이션 아이콘, 액션 아이템, 오버플로우 메뉴 등

• Navigation Icon 에 위치하는 <- (뒤로가기) 버튼의 명칭은 HomeAsUp 이다.
  
  

❓ 어떻게 구성할까?

기본적으로 안드로이드 플랫폼에서 제공하는 API로 작성 가능하다. 하지만 일반적으로 androidx에서 제공하는 appcompat 라이브러리를 이용한다.

appcompat 라이브러리는 기본적으로 의존성이 추가되어 있다. 그 정도로 기본이라고 할 수 있겠다.

원론적으로 appcompat 라이브러리의 제공 목적은 '어플리케이션과 관련되어 있는 가장 기초적인 기능들을 제공하기 위함' 이다.

Activity를 작성할 때 Activity 가 아닌 AppCompatActivity 를 상속 받아 작성하는 것만 보더라도 알 수 있는 부분이다.

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityDetailBinding.inflate(layoutInflater) }
	
    override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

• AppCompatActivity() 이 appcompat 에서 제공되는 클래스이다.
  
  

🧩 ActionBar 테마

ActionBar의 색상은 기본적으로 theme.xml 파일에 정의되어 있는 색상으로 출력된다.

만약 ActionBar의 색을 변경하고 싶다면 colorPrimary 옵션을 수정하면된다.

• theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.AndroidLab" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@android:color/holo_purple</item>
        
    </style>
    <style name="Theme.AndroidLab" parent="Base.Theme.AndroidLab" />
</resources>

이 외에도 색상을 제어하는 키워드가 있다.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.AndroidLab" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">#FF0000</item>
        <item name="colorPrimaryVariant">#FFFF99</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">#00FF00</item>
        <item name="colorSecondaryVariant">#F999F0</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/color</item>
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.AndroidLab" parent="Base.Theme.AndroidLab" />
</resources>

---

📇 Menu

ActionBar 우측을 구성할 수 있다.

Overflow Menu 의 항목을 추가하면 자동으로 Overflow Button (점 3개) 이 출력된다.

🧩 구성 방법

구성 방법은 쉽다.

액티비티 함수를 오버라이드 받아서 작성해 놓으면, 메뉴를 구성하기 위해서 자동 호출 된다.

📌 Menu 추가

그 자동 호출되는 함수가 onCreateOptionsMenu() 이다.

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
	val menuItem1: MenuItem? = menu?.add(0, 0, 0, "menu1")
	val menuItem2: MenuItem? = menu?.add(0, 1, 0, "menu2")
	return super.onCreateOptionsMenu(menu)
}

• 즉, onCreateOptionsMenu() 은 액티비티 함수이며 메뉴 구성을 위해 자동 콜 된다.

• 매개변수로 Menu 를 받는데, 이를 메뉴바 정도로 생각하면 된다.
  우리는 그저 메뉴바에 Menu 를 열심히 add 하면 된다.

• menu 의 두 번째 매개변수가 식별자이다. 메뉴의 아이디라고 생각하면 된다.
  숫자값으로 지정하고, 이것으로 어떤 메뉴가 클릭 되었는지 구분한다.
  
  

📌 Menu 이벤트 처리

onOptionsItemSelected() 라는 함수를 오버라이드 받아 작성하면 된다.

유저가 메뉴를 선택 시 해당 함수가 자동 콜 된다. 그리고 매개변수로 선택한 메뉴가 전달된다.

override fun onOptionsItemSelected(item: MenuItem): Boolean = when (item.ItemId) {
		0 -> {
			true
		}
		1 -> {
			true
		}
		else -> super.onOptionsItemSelected(item)
	}

🧩 실습 예제

• MainActivity.kt

package com.kotdev99.android.c37

class MainActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(R.layout.activity_main)
	}

	// Menu 구성
	override fun onCreateOptionsMenu(menu: Menu?): Boolean {
		menu?.add(0, 0, 0, "menu1")
		menu?.add(0, 1, 0, "menu2")
		return super.onCreateOptionsMenu(menu)
	}

	// Menu 이벤트 처리
    // item.itemId 로 메뉴를 구분한다
	override fun onOptionsItemSelected(item: MenuItem): Boolean = when (item.itemId) {
		0 -> {
			Toast.makeText(this, "menu1 click", Toast.LENGTH_SHORT).show()
			true
		}
		1 -> {
			Toast.makeText(this, "menu2 click", Toast.LENGTH_SHORT).show()
			true
		}
		else -> super.onOptionsItemSelected(item)
	}
}

📲 결과

---

📇 MenuInflater

Menu를 리소스로써 XML 로 정의

생각해 보면 메뉴라는 것이 정적인 구성이 대부분이다. 때문에 XML 로 정의하는 것이 일반적이다.

📌 사용 방법

res/menu 하위에 menu.xml 파일 생성

item 태그로 Menu 를 추가

• menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu1"
        android:title="menu1" />

    <item
        android:id="@+id/menu2"
        android:title="menu2" />
</menu>

• 기본적으로 이벤트 처리 시 필요한 아이디와 메뉴에 출력 될 문자열이 들어간다.
  
  

MenuInflater 로 메뉴 XML 파일을 적용

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
	menuInflater.inflate(R.menu.menu_main, menu)
	return super.onCreateOptionsMenu(menu)
}

---

📇 Menu 속성

📌 Action Item

ActionBar에 아이콘으로 출력되는 메뉴

showAsAction 속성으로 지정

<item
	android:id="@+id/menu2"
	android:icon="@android:drawable/ic_menu_add"
	android:title="menu2"
	app:showAsAction="always" />

• never : 항상 오버플로우 메뉴로 출력 (default)

• ifRoom : 만약 액션바에 공간이 있다면 액션 아이템으로, 없다면 오버플로우 메뉴로 출력

• always : 항상 액션 아이템으로 출력
  
  

📌 ActionView

ActionBar의 내장 뷰

뷰는 뷰인데 Content 부분에 출력되는 것이 아니라 액션바에 내장되어 있는 뷰

그런데 메뉴 기법으로 설정해 줘야 출력된다. actionViewClass 속성으로 지정한다.

<item
	android:id="@+id/menu_search"
	android:title="search"
	app:showAsAction="always"
    app:actionViewClass="androidx.appcompat.widget.SearchView" />

• actionViewClass 속성에 액션바에 내장되어 있는 뷰 클래스명을 주면 된다.
  
  

🧩 실습 예제

res/menu 하위에 Menu 리소스 XML 파일 정의

• menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu1"
        android:title="menu1" />
    <item
        android:id="@+id/menu2"
        android:icon="@android:drawable/ic_menu_add"
        android:title="menu2"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu3"
        android:icon="@android:drawable/ic_menu_search"
        android:title="menu3"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="always" />
</menu>

MenuInflater 로 메뉴 XML 파일을 적용

• MainActivity.kt

package com.kotdev99.android.c38

class MainActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(R.layout.activity_main)
	}

	override fun onCreateOptionsMenu(menu: Menu?): Boolean {
		menuInflater.inflate(R.menu.menu_main, menu)
		return super.onCreateOptionsMenu(menu)
	}
}

📲 결과