ActionBar❓ ToolBar ❗ 사용하기

목차

 Working with the AppBar - Docs
 App bars: top - material.io 
 를 참고하여 작성한 게시글입니다.

 

 App bars: top

 

Toolbar ( 출처 : https://material.io/components/app-bars-top#usage )

 

 ToolBar Menu in Fragment

 개발자를 위한 레시피 - 안드로이드 액션바(ActionBar) 기본 사용법
 을 참고하였습니다.

Toolbar menu

1. res/menu 폴더에 menu 리소스 파일을 생성해줍니다.

<?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/check_action_edit"
        android:title="@string/edit"
        app:showAsAction="never"/>

    <item
        android:id="@+id/check_action_delete"
        android:title="@string/delete"
        app:showAsAction="never"/>

    <item
        android:id="@+id/check_action_replicate"
        android:title="@string/replicate"
        app:showAsAction="never"/>
</menu>

여기서 showAsAction 속성에 따라서 AppBar에 어떻게 보여질지가 결정됩니다. 

속성	설명
app:showAsAction="always"	<item/>을 항상 AppBar의 액션으로 표시해줍니다.
app:showAsAction="never"	AppBar의 액션으로 표시하지 않고 오버플로우 메뉴에 표시
app:showAsAction="ifRoom"	AppBar에 공간이 있는 경우 액션으로 표시하고, 공간이 없는 경우 오버플로우 메뉴로 표시
app:showAsAction="withText"	액션으로 표시할 때, 텍스트와 같이 표시합니다. 공간이 없는 경우, 텍스트만 표시합니다.

 

2. onCreateOptionMenu메서드와 onOptionsItemSelected 메서드를 선언해줍니다.

📌 Fragment에서는 setHasOptionsMenu(true)를 설정해줘야 Toolbar에 Menu가 보입니다.

class CheckScheduleFragment : Fragment() {
    ...
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        ...
        // toolbar setting
        setHasOptionsMenu(true)
        ...
    }

    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
        inflater.inflate(R.menu.schedule_check_menu, menu)
        super.onCreateOptionsMenu(menu, inflater)
    }

    // menu에서 item 클릭 시 호출
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when(item.itemId) {
            R.id.check_action_edit -> {
                findNavController().navigate(CheckScheduleFragmentDirections.actionCheckScheduleToRegisterSchedule())
                true
            }
            R.id.check_action_replicate -> {
                true
            }
            R.id.check_action_delete -> {
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
}