NavigationDrawer와 Toolbar 연동하기

(이전 작성글)

이전에 만든 NavigtaionDrawer는 Toolbar가 없이 화면의 왼쪽 끝지점을 스와이프하여 서랍을 열고 닫을 수 있었다.

Toolbar를 추가하고 Toolbar의 햄버거 아이콘을 통해서 Drawer를 열고 닫을 수 있도록 만들어보자.

---

NavigationDrawer는 이름에서 알 수 있듯, Navigation 기능과 크게 관련되어 있다. 그래서 App내에서 사용하는 navigation 방식도 따져보아야한다.

이번에는 Navigation Component를 사용하여 네비게이션을 구성할 계획이므로, 먼저 Navigation Component + Toolbar의 연동을 살펴보자.

 

NavigationComponent는 NavController를 통해서 네비게이션 동작을 실행한다.

그러므로 서랍에서 선택된 아이템에 맞게 네비게이션 동작을 실행하기 위해서는 NavController를 연결해주어야한다.

A-1. NavController와 Toolbar 연결하기

Toolbar.setupWithNavController를 사용한다.

private fun syncToolbarAndDrawer() {
        val navHostFragment = supportFragmentManager.findFragmentById(fragmentContainerId) as NavHostFragment
        val navController = navHostFragment.navController
        val appBarConfigWithDrawer = AppBarConfiguration(
            setOf(R.id.AirQualityFragment),         // Top-level destinations
            drawerLayout)

        // toolbar 와 NavController를 연결한다.
        toolbar.apply { setupWithNavController(navController, appBarConfigWithDrawer) }
    }

AppBarConfiguration은 DrawerLayout을 NavController에 연결하는 과정이다.

A-2. NavController와 ActionBar 연결하기

AppCompatActivity#getSupportActionBar()를 통해 ActionBar를 획득한 후, NavController와 연결시킨다.

이때, ActionBar를 활성화 시키면, Toolbar는 적용되지 않으므로 주의해야한다.

B. FragmentTransaction과 ActionBar 연결하기

만약 Navigation Component가 아닌 FragmentManager를 통한 트랜잭션으로 Fragment 이동을 한다면, 아래와 같은 방법으로 연결할 수 있다.

private fun syncToolbarAndDrawerWithToggle() {
        val toggle = ActionBarDrawerToggle(
            this@MainActivity,
            drawerLayout,
            toolbar,
            R.string.navigation_drawer_open,
            R.string.navigation_drawer_close
        )
        toggle.setHomeAsUpIndicator(R.drawable.ic_menu_camera)

        drawerLayout.addDrawerListener(toggle)
        toggle.syncState()
    }

Toolbar와 Drawer를 연결하여 OPEN/CLOSE 동작을 할 수 있도록 하는 ActionBarDrawerToggle을 초기화하고, drawerLayout의 리스너로 토글을 등록하면 된다.

Conclusion

AppBar를 구현할 수 있는 API가 발달하면서, 동일한 기능을 구현하는 다양한 방법이 잔존하게 되었다. 구버전인 ActionBar를 여전히 공식지원하고 있으므로, 스택오버플로우에 Toolbar를 키워드로 검색하여도, ActionBar를 사용한 답변을 쉽게 찾아볼 수 있을만큼 용어가 혼재되어 사용되고 있다.

처음에는 setSupportActionBar(toolbar)를 활성화 해둔 다음 Toolbar를 독립된 뷰로 사용하려고 하니 전혀 적용이 되질 않아서 한참동안 문제점을 찾아헤매기도했다.

이번기회에 AppBar, ActionBar, Toolbar의 정확한 정의를 살펴봄으로써, 원하는 기능을 구현하기 위해서 찾아보아할 정보를 빠르고 정확하게 찾을 수 있게 되었다.

실행 결과