[Android] jetpack navigation title 가운데 정렬

홈런볼·2022년 8월 19일
0

안드로이드

목록 보기
7/10

토이 프로젝트를 진행하면서 아이폰처럼 안드로이드 toolbar의 title도 가운데 정렬로 맞춰 달라는 요청을 받았다.

안드로이드는 머티리얼 디자인을 따르기 때문에 toolbar의 title이 왼쪽정렬로 되어있다.

그러므로 toolbar를 가운데 정렬을 하기 위해서는 코드상에서 변경이 필요하다.

현재 진행중인 프로젝트는 navigation을 사용하여 하나의 Activity와 여러개의 fragment로 구성되어 있는 구조이기 때문에 activity에만 toolbar를 추가시키고 각 fragment의 label값을 읽어와 toolbar title로 보여주려고 한다.

먼저, activity xml에 toolbar를 추가한다.
activity_main.xml

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme" >

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Toolbar Title"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_gravity="center_horizontal" />
    </androidx.appcompat.widget.Toolbar>

toolbar만 추가하면 toolbar는 기본적으로 title을 왼쪽정렬로 설정하기 때문에 toolbar안에 textview를 추가해 title을 가운데 정렬로 변경할 수 있도록 한다.

다음으로 Activity.kt 파일 내에서 코드 수정이 필요하다

MainActivity.kt

setSupportActionBar(binding.toolbar)
supportActionBar?.setDisplayShowTitleEnabled(false)

툴바를 액션바 처럼 사용하기 위해 setSupportActionbar 함수를 호출하고, 기본적으로 toolbar에서 제공하는 title을 숨김처리를 한다.
title을 숨김처리를 하지 않았을 경우에 textview의 문자열과 toolbar에서 제공하는 title이 동시에 나오게 된다.

val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_container) as NavHostFragment
navController = navHostFragment.navController

nav_graph 에 설정해 둔 각 fragment의 label을 가져오기 위해서 navHostFragment를 설정하고, navController를 가져온다

 navController.addOnDestinationChangedListener {
                controller, destination, arguments ->
    binding.toolbarTitle.text = navController.currentDestination?.label.toString()
}

fragment이동시 toolbar의 타이틀도 변경되야 하므로 탐색 이벤트를 지원하는 addOnDestinationChangedListener() 메서드 호출 해 toolbar가 담고있는 textview의 text를 현재 탐색 대상이 가르키고 있는 라벨로 변경한다

val appBarConfiguration = AppBarConfiguration(navController.graph)
setupActionBarWithNavController(navController,appBarConfiguration)

setupActionBarWithNavController 으로 navcontroller과 graph를 연결해주면 된다

override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
}

onSupportNavigateUp 을 재정의해 fragment가 이동했을때 생기는 뒤로가기 버튼을 사용할 수 있도록 한다

완성예시


Reference

0개의 댓글