[Android / Kotlin] Compose Center Title Top App Bar - Title 가운데로 배치하기

TopAppBar는 Android UI에서 상단에 위치하는 앱 바(app bar)를 구현하는 컴포넌트입니다. 이 컴포넌트는 애플리케이션의 타이틀, 내비게이션 아이콘, 작업 메뉴 등을 표시하는 데 사용됩니다.

 

기본적으로 Top App Bar로 title과 navigation Icon을 구성하면 다음과 같이 나타납니다.

타이틀이 왼쪽에 위치해 있는 것을 확인하실 수 있습니다.
하지만 디자인 기획에 따라 오른쪽 또는 중앙에 배치할 수 있겠죠. 

단순하게 처리한다면, 최대 너비에 맞춘 Row 컴포저블과 그 내부에 Title을 구성함으로써 위치를 조정할 수 있습니다.

Row(
    modifier = Modifier.fillMaxWidth(), // `Row`를 화면 너비에 맞춤
    horizontalArrangement = Arrangement.End // 요소들을 오른쪽 정렬
) {
    Text(
        text = produceName,
        modifier = Modifier.padding(end = 16.dp), // 오른쪽 패딩 추가
        color = Color.Black,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold
    )
}

 

하지만 가운데 정렬의 경우에는 아예 title이 가운데로 배치되는 컴포저블을 따로 제공하고 있습니다.

CenterAlignedTopAppBar입니다.

SingleRowTopAppBar(
    modifier = modifier,
    title = title,
    titleTextStyle =
    MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
    centeredTitle = true,
    navigationIcon = navigationIcon,
    actions = actions,
    colors = colors,
    windowInsets = windowInsets,
    scrollBehavior = scrollBehavior
)

내부 코드를 살펴봤을 때, centeredTitle 값을 true로 기본 설정하고 있습니다.

이로 인해 무조건 Title이 중앙 정렬됩니다.

일반 TopAppBar 사용 코드와 크게 다른 점 없이 바로 해당 컴포저블로 대체해주시면 됩니다.

 CenterAlignedTopAppBar(modifier = Modifier.padding(horizontal = 12.dp),
    title = {
        Text(
            text = "~~~~~~~~",
            color = Color.Black,
            fontSize = dpToSp(dp = 18.dp),
            lineHeight = dpToSp(dp = 6.dp),
            fontWeight = FontWeight.Bold
        )
    }, navigationIcon = { ...