Android ToolBar로 나만의 액션바 만들기

오늘은 안드로이드 애플리케이션 개발에서 자주 사용하는 UI 컴포넌트 중 하나인 ToolBar에 대해 알아보겠습니다. ToolBar는 액션바를 대체하거나 사용자 정의 액션바를 만들 때 사용할 수 있는 중요한 컴포넌트입니다. 이번 포스팅에서는 ToolBar의 기본 사용법과 이를 활용하여 더 나은 사용자 경험을 제공하는 방법을 Kotlin 예제를 통해 알아보겠습니다.

1. ToolBar란?

ToolBar는 기존의 ActionBar보다 유연하고 다양한 UI 구성을 가능하게 해주는 UI 컴포넌트입니다. 개발자는 ToolBar를 활용해 액션 버튼, 제목, 메뉴 등을 자유롭게 구성할 수 있으며, 이를 통해 사용자의 요구에 맞춘 화면 구성을 할 수 있습니다.

1.1 ToolBar의 장점

• 유연성: ToolBar는 기존 ActionBar와 달리 레이아웃에 포함될 수 있어 더 많은 커스터마이징이 가능합니다.
• 재사용 가능: 여러 액티비티나 프래그먼트에서 동일한 ToolBar를 재사용하여 일관된 디자인을 제공할 수 있습니다.
• 더 나은 제어: 더 많은 제어를 통해 원하는 위치와 스타일을 쉽게 변경할 수 있습니다.

2. ToolBar 설정하기

2.1 프로젝트에 ToolBar 추가하기

ToolBar를 사용하려면 XML 레이아웃 파일에 ToolBar를 추가하고, 코드에서 이를 설정해야 합니다. 먼저 XML 레이아웃 파일에 ToolBar를 추가하는 방법을 알아보겠습니다.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/purple_500"
        android:elevation="4dp"
        android:title="@string/app_name"
        app:titleTextColor="@android:color/white"/>

    <!-- 나머지 UI 컴포넌트들 -->

</LinearLayout>

위의 XML에서 androidx.appcompat.widget.Toolbar를 사용하여 ToolBar를 정의합니다. 이때 android:id 속성을 설정하여 나중에 Kotlin 코드에서 ToolBar를 참조할 수 있게 합니다.

2.2 ToolBar 초기화하기

이제 ToolBar를 액티비티에서 초기화해보겠습니다. MainActivity의 onCreate 메서드에서 ToolBar를 설정합니다.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.Toolbar

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

        // ToolBar 초기화
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)

        // 툴바의 제목 설정
        supportActionBar?.title = "다양한 UI 컴포넌트 활용하기"
    }
}

setSupportActionBar(toolbar)를 호출하여 ToolBar를 현재 액티비티의 액션바로 설정할 수 있습니다. 이를 통해 기존의 ActionBar를 대체하거나 사용자 정의 액션바로 ToolBar를 사용할 수 있습니다.

3. ToolBar에 메뉴 추가하기

ToolBar에 메뉴를 추가하여 더 많은 기능을 제공할 수 있습니다. 메뉴 항목을 추가하려면 먼저 리소스 폴더에 메뉴 XML 파일을 정의해야 합니다.

3.1 메뉴 XML 파일 생성

res/menu 폴더에 toolbar_menu.xml 파일을 생성하고 다음과 같이 메뉴 항목을 정의합니다.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        android:showAsAction="ifRoom"/>

    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        android:showAsAction="never"/>
</menu>

위의 XML 파일에서는 action_search와 action_settings 두 개의 메뉴 항목을 정의했습니다. showAsAction 속성을 통해 아이콘을 ToolBar에 표시할지 여부를 결정할 수 있습니다.

3.2 메뉴 연결하기

이제 위에서 정의한 메뉴를 ToolBar에 연결해보겠습니다. onCreateOptionsMenu와 onOptionsItemSelected 메서드를 오버라이드하여 메뉴를 생성하고 동작을 처리합니다.

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

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            // 검색 아이콘 클릭 시 수행할 작업
            Toast.makeText(this, "Search clicked", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_settings -> {
            // 설정 아이콘 클릭 시 수행할 작업
            Toast.makeText(this, "Settings clicked", Toast.LENGTH_SHORT).show()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

onCreateOptionsMenu 메서드에서 메뉴를 ToolBar에 인플레이트하여 추가합니다. 이후 onOptionsItemSelected 메서드에서 각 메뉴 항목이 선택되었을 때의 동작을 정의할 수 있습니다.

4. ToolBar 커스터마이징하기

ToolBar는 매우 유연하게 커스터마이징이 가능합니다. ToolBar에 로고, 뒤로 가기 버튼, 그리고 사용자 정의 뷰를 추가해 보겠습니다.

4.1 ToolBar에 뒤로 가기 버튼 추가하기

ToolBar에 뒤로 가기 버튼을 추가하여 사용자가 이전 화면으로 쉽게 이동할 수 있도록 할 수 있습니다.

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

    val toolbar: Toolbar = findViewById(R.id.toolbar)
    setSupportActionBar(toolbar)

    // 뒤로 가기 버튼 추가
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        android.R.id.home -> {
            // 뒤로 가기 버튼 클릭 시 수행할 작업
            finish()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

setDisplayHomeAsUpEnabled(true)를 사용하여 ToolBar에 뒤로 가기 버튼을 추가할 수 있습니다. 이후 onOptionsItemSelected 메서드에서 뒤로 가기 버튼의 동작을 정의합니다.

4.2 사용자 정의 뷰 추가하기

ToolBar에 사용자 정의 뷰를 추가하여 더욱 독창적인 UI를 구성할 수도 있습니다. 예를 들어, ToolBar에 검색 창을 추가해보겠습니다.

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

    val toolbar: Toolbar = findViewById(R.id.toolbar)
    setSupportActionBar(toolbar)

    // 사용자 정의 뷰 추가
    val searchView = LayoutInflater.from(this).inflate(R.layout.toolbar_search_view, null)
    toolbar.addView(searchView)
}

위 코드에서는 레이아웃 인플레이터를 사용하여 사용자 정의 뷰(toolbar_search_view)를 ToolBar에 추가하고 있습니다. 이를 통해 더욱 다양한 사용자 경험을 제공할 수 있습니다.

5. 마무리

ToolBar는 안드로이드 애플리케이션에서 매우 중요한 역할을 합니다. 액션바를 대체하고 더 유연한 사용자 인터페이스를 제공하며, 다양한 기능을 담을 수 있는 ToolBar를 적절히 활용하면 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 오늘은 ToolBar의 기본 사용법과 이를 활용한 메뉴, 뒤로 가기 버튼, 사용자 정의 뷰 추가 방법까지 살펴보았습니다.
앞으로도 다양한 UI 컴포넌트와 활용 방법에 대해 계속 다룰 예정이니 많은 관심 부탁드립니다. 질문이나 의견이 있다면 언제든지 댓글로 남겨주세요!