TopAppBar 공유하는 방법 정리 # Jetpack Compose

오늘은 Jetpack Compose UI에서 사용하는,

TopAppBar를 여러Screen에서 공유하는 방법에 대해서 정리해 보겠습니다.

 

1. TopAppBar

여러 Screen에서,

상단의 TopAppBar를 공유해야 한다면,

Composable Function 을 작성한 후에, Scaffold에 전달해 주면 됩니다.

먼저, 아래에서는 SharedTopAppBar라는 Composable 함수를 만들었습니다.

 

@Composable
fun SharedTopAppBar(
    title: String,
    onMenuItemClick: (MenuItem) -> Unit,
    menuItems: List<MenuItem>
) {
    TopAppBar(
        title = { Text(text = title) },
        actions = {
            menuItems.forEach { menuItem ->
                IconButton(onClick = { onMenuItemClick(menuItem) }) {
                    Icon(
                        painter = painterResource(id = menuItem.icon),
                        contentDescription = menuItem.contentDescription
                    )
                }
            }
        }
    )
}

data class MenuItem(
    val id: Int,
    val icon: Int,
    val contentDescription: String
)

 

 

위와 같이 만든 TopAppBar를 아래와 같이,

Scaffold에 전달해 주기만 하면 되는데요.

Scaffold를 사용하지 않는다면, Screen의 최상단의 위치하도록 위에서 만든 Composable 함수를 불러와주면 됩니다.

 

val scaffoldState = rememberScaffoldState()

Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            SharedTopAppBar(
            	title = "테스트",
                onMenuItemClick = { menu ->
                	// 클릭시 구현할 코드
                },
                menuItems = listOf(
                    MenuItem(id = 1, 
                    icon = R.drawable.menu_a, 
                    contentDescription = "MenuA")
            	)
        },
        modifier = Modifier.fillMaxSize()
    ) { contentPadding ->
		//페이지 UI구현
    }

 

 

2. TopAppBar에서 해당 페이지의 위치(Route)를 알고 싶을 때

사실 Composable UI를 재사용하는 것은 TopAppBar에만 국한되는 것은 아니구요.

문제가 되는 부분은, 

TopAppBar를 공유하더라도,

해당 페이지에 따라서, 

약간은 다른 UI를 보여줘야 할 경우인데요.

 

이럴 때는 TopAppBar로 route를 전달해 주면 됩니다.

해당 페이지에서 현재 route를 확인하는 방법은 아래와 같은데요.

 

val navController = rememberNavController()
val currentRoute = navController.currentRoute()

 

 

이렇게 확인한 route를 TopAppBar에 아래와 같이 전달해 주기만 하면 됩니다.

 

val navController = rememberNavController()
val currentRoute = navController.currentRoute()
val scaffoldState = rememberScaffoldState()

Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            SharedMainTopAppBar(currentRoute = currentRoute)
        },
        modifier = Modifier.fillMaxSize()
    ) { contentPadding ->
		//페이지 UI구현
    }

 

위와 같이 해주면, TopAppBar는 현재 route에 대한 정보를 가지고 있게되기 때문에,

그에 맞춰서 UI를 변경할 사항이 있다면 수정해 주면 되겠습니다.