기사를 이동했습니다.

htps : // 전. 에서 v/dd_쇼/아 rc c s/7d849 8889
앞으로는 위의 기사에서 업데이트하겠습니다. (2021/10/03)
NavigationUI 클래스를 사용하는 것으로 AAC의 Navigation과 후술하는 UIComponent를 간단하게 연계할 수 있으므로 비망록으로서 기사로 합니다.
공식 레퍼런스는 이쪽

NavigationUI 클래스란?

NavigationUI 클래스에는,Top App Bar , Navigation Drawer , Bottom Navigation 와 Navigation 을 연동하기 위한 메소드가 준비되어 있다.

Top App Bar

Navigation Drawer

Bottom Navigation

이미지는 공식 사이트의 것을 빌렸습니다.
머티리얼 디자인

Top App Bar와의 협력

할 수 있는 일
・뒤로 버튼(←)의 표시
・화면 천이시에 타이틀을 Navigation의 그래프로 각 화면에 설정한 label로 자동 갱신한다

연동 가능한 Top App Bar

ToolBar

CollapsingToolBarLayout

ActionBar

Navigation 버튼의 동작을 관리하기 위해 AppBarConfiguration 클래스를 이용한다.
기본적으로 Navigation 그래프에서 화면 전환의 첫 번째 화면에서는 Navigation 버튼이 표시되지 않습니다.
다른 화면으로 이동하면 뒤로 버튼이 표시됩니다.
다음과 같이 인스턴스를 생성한다.

val appBarConfiguration = AppBarConfiguration(navController.graph)

화면 전환의 첫 번째 화면을 지정하는 경우,

val appBarConfiguration = AppBarConfiguration(setOf(R.id.main, R.id.android))

ToolBar

Activity onCreate() 메서드 내에서

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

    // ・・・

    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    findViewById<Toolbar>(R.id.toolbar)
        .setupWithNavController(navController, appBarConfiguration)
}

※ToolBar를 사용할 때는 Navigation이 자동으로 클릭 이벤트를 핸들하기 때문에
onSupportNavigateUp()을 재정의할 필요가 없습니다.

CollapsingToolbarLayout

Activity onCreate() 메서드 내에서

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

    // ・・・

    val layout = findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar_layout)
    val toolbar = findViewById<Toolbar>(R.id.toolbar)
    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    layout.setupWithNavController(toolbar, navController, appBarConfiguration)
}

액션 바

①Activity의 onCreate() 메소드 내에서

private lateinit var appBarConfiguration: AppBarConfiguration

// ・・・

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

    // ・・・

    val navController = findNavController(R.id.nav_host_fragment)
    appBarConfiguration = AppBarConfiguration(navController.graph)
    setupActionBarWithNavController(navController, appBarConfiguration)
}

②onSupportNavigateUp() 메소드를 오버라이드(override) 한다. (뒤로 버튼이 작동합니다)

override fun onSupportNavigateUp(): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return navController.navigateUp(appBarConfiguration) || 
        super.onSupportNavigateUp()
}

MenuItem과 화면을 연결하기

①Navigation 그래프의 fragment에 할당하는 id와 묶는 MenuItem의 id를 일치시킨다.
②Activity의 onOptionsItemSelected()를 재정의하고 onNavDestinationSelected()를 호출한다.

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return item.onNavDestinationSelected(navController) || 
        super.onOptionsItemSelected(item)
}

Navigation Drawer와의 협력

Activity onCreate() 내에서,

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

    // ・・・

    val appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
    val navController = findNavController(R.id.nav_host_fragment)
    findViewById<NavigationView>(R.id.nav_view)
        .setupWithNavController(navController)
}

※Top App Bar가 drawer 아이콘과 뒤로 버튼의 전환을 자동으로 해 주기 때문에 ActionBarDrawerToggle 클래스를 사용할 필요는 없다.

Bottom Navigation과의 연계

할 수 있는 일
Bottom 아이템이 선택되면 NavController는 onNavDestinationSelected()를 호출하여 자동으로 선택 상태를 갱신한다.

Activity onCreate() 내에서,

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

    // ・・・

    val navController = findNavController(R.id.nav_host_fragment)
    findViewById<BottomNavigationView>(R.id.bottom_nav)
        .setupWithNavController(navController)
}

이번 기사는 이상입니다.