Android UI : Toolbar 앱 바 적용해주기

들어가기 전에

메인 화면에서 앱바에 앱 로고와 검색, 알림 아이콘을 제공하고 있다. 나는 xml 파일에서 Toolbar 위젯 추가를 통해 UI에서 앱바가 추가된 것을 확인할 수 있었다. 이렇게만 하면 앱바를 사용할 수 있다고 생각했으니 아니었다! 추가적인 작업이 필요했고 그 과정을 정리해서 앱바 사용법을 기록하려고 한다.

 

 

앱 바란?

앱바는 작업 모음이라고도 한다 앱바의 주요 기능은 아래와 같다!

 

1️⃣앱에 ID를 지정하고 앱에서 아용자의 위치를 나타내기 위한 전용 공간

2️⃣검색과 같은 중요한 작업에 대한 예측 가능한 액세스

3️⃣탭 또는 메뉴를 사용한 탐색 및 뷰 전환을 지원

 

Toolbar 위젯을 통해 앱 바 설정하기

1️⃣앱 바를 사용하는 활동이 AppCompatActivity를 확장하도록 한다.

class MainPageActivity :
    AppCompatActivity() {

 

2️⃣앱에서  NoActionBar 테마 중 하나를 사용하여 요소를 설정해준다.

- 이를 통해 앱에서 네이티브 ActionBar 클래스를 사용하여 앱 바를 제공할 수 없게 된다.

    <style name="Theme" parent="Theme.Material3.DayNight.NoActionBar" />

 

3️⃣활동의 레이아웃에 Toolbar를 추가해준다.

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/tool_bar"
        style="@style/Widget.Material3.ActionBar.Solid"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        app:layout_constraintBottom_toTopOf="@+id/tabLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/top_app_bar" />

 

4️⃣이렇게 만든 툴바를 활동의 앱 바로 설정해준다!

 

여기서부터가 내가 제대로 설정해주지 않았던 부분이다 집중!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainPageBinding.inflate(layoutInflater)
        setContentView(binding.root)
        setSupportActionBar(binding.toolBar)

 

활동의 onCreate 메서드에서 setSupportActionBar( )메서드를 호출하고 활동의 툴바를 전달해주었다.

이 때 뷰 바인딩을 사용했다.

이제 앱에 기본 작업 모음 즉 앱바가 설정되었다.

---

앱 바에 작업 추가 및 처리해주기

앱 바를 사용하면 사용자 작업의 버튼을 추가할 수 있다. 그리고 버튼에 맞는 이벤트를 구현해줄 수 있다.

1️⃣ 작업 버튼 추가하기

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/notification"
        android:icon="@drawable/ic_notification"
        app:showAsAction="always"
        android:title="notification" />

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"
        android:title="search" />
    
</menu>

 

작업 버튼에서 사용할 수 있는 기타 항목들은 menu 리소스에서 정의된다. 작업 모음에 작업을 추가하려면 res/menu/ 디렉터리에 새로운 xml 파일을 만들어준다.

showAsAction 속성

showAsAction 속성을 통해 작업을 앱 바에 버튼으로 표시할 지 여부를 지정할 수 있다.

- ifRoom : 공간이 있을 경우 버튼으로 표시, 공간이 없으면 더보기 메뉴로 전송

- never: 항상 더보기 메뉴에 표시

 

2️⃣onCreateOptionsMenu 재정의해주기

이 메서드를 재정의해줘야 앱 바에 작업이 정상적으로 보였다.

작성해주지 않으면 앱 로고만 보인다.

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

---

작업에 응답 : 검색 아이콘 클릭 시 검색 화면으로 넘어가기  ! 

사용자가 앱 바 항목 중 하나를 선택하면 시스템은 활동의 onOptionsItemSelected( ) 콜백 메서드를 호출하고 menuItem 객체를 전달하여 탭한 항목을 나타낸다. 

    override fun onOptionsItemSelected(item: MenuItem) =
        when (item.itemId) {
            R.id.search -> {
                val intent = Intent(this, SearchActivity::class.java)
                startActivity(intent)
                true
            }
            R.id.notification -> {
                true
            }

            else -> {
                super.onOptionsItemSelected(item)
                false
            }
        }

 

MenuItem.getItemId() 메서드를 호출하여 어떤 항목을 탭했는지 확인한다. 반환된 id는 대응하는 <item> 요소의 android:id 속성에 선언한 값과 일치한다. 따라서 위의 코드처럼 when(item.itemId) 를 통해서 어떤 item이 탭되었는지를 확인하고 각 item에 맞는 작업을 수행할 수 있다.

 

마지막 else문에서 사용자의 작업을 인식하지 못하면 슈퍼 클래스 메서드를 호출한다. 

 

 

🤔setOnMenuItemClickListener와 onOptionsItemSelected의 차이는 무엇일까?

버튼에 이벤트를 연결해주기 위해 검색하던 중 위의 두 가지 방법을 찾을 수 있었다. 저 두 방법의 차이는 무엇인지 알아보자

 

setOnMenuItemClickListener

 메뉴 객체를 가지고 있는 경우에 사용할 수 있다. 코드를 바로 살펴보자

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.top_app_bar, menu)
        val menuItem = menu?.findItem(R.id.search)
        menuItem?.setOnMenuItemClickListener {
            val intent = Intent(this, SearchActivity::class.java)
            startActivity(intent)
            true
        }
        return true
    }

 

이렇게 onCreateOptionsMenu 내부에 Menu 객체를 사용하여 동일한 작업을 수행할 수 있었다!

 

onOptionsItemSelected 메서드

    override fun onOptionsItemSelected(item: MenuItem) =
        when (item.itemId) {
            R.id.search -> {
                val intent = Intent(this, SearchActivity::class.java)
                startActivity(intent)
                true
            }
            R.id.notification -> {
                val intent = Intent(this, NotificationActivity::class.java)
                startActivity(intent)
                true
            }

            else -> {
                super.onOptionsItemSelected(item)
            }
        }

 

이 두 로직은 search 아이콘에 대해서 같은 동작을 수행한다! 

 

나는 로직을 분리해주고자 onOptionsItemSelected를 사용하여 작업을 구현해주었다.