[안드로이드 Compose] 텍스트 중앙 정렬 맞추기

Compose에서 Modifier를 통해 Text를 세로 중앙 정렬을 하면 다른 컴포저블과 일치하지 않는다.

대부분 아래와 같이 verticalAlignment 속성을 이용하여 정렬할 것이다.

 Row(
        modifier = modifier
            .height(42.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Checkbox(
            modifier = Modifier
                .padding(start = 2.dp)
                .size(13.dp),
            checked = isChecked,
            onCheckedChange = onChecked,
            colors = CheckboxDefaults.colors(
                checkmarkColor = White,
                checkedColor = Blue500,
                uncheckedColor = Gray300,
            ),
        )
        Text(
            modifier = Modifier
                .padding(start = 10.dp)
                .wrapContentHeight(),
            text = type,
            style = PrimaryTextStyle.copy(
                fontSize = dimensionResource(id = R.dimen.text_large_medium_size_sub).toSp(),
                fontWeight = MaterialTheme.typography.semiBold.fontWeight,
                color = Purple900,
                textAlign = TextAlign.Justify,
            ),
        )
        ...
}

 

텍스트 Typograpy에는 정렬의 기준이 되는 Baseline 등이 있는데, 아무 설정없이 사용하면 Top, Bottom으로 지정이 된다.

따라서 위 이미지와 같이 우리의 눈으로 보았을 때, 아래쪽으로 쏠린 느낌을 준다.

 

디자인 팀에서 건내주는 도면의 경우 Vertical Align 기준이 Cap height(Ascent, Descent)이므로 우리는 아래와 같이 style 내에 PlatformTextStyle 속성을 추가하여야 한다.

Text(
   ...
    style = PrimaryTextStyle.copy(
        fontSize = dimensionResource(id = R.dimen.text_large_medium_size_sub).toSp(),
        fontWeight = MaterialTheme.typography.semiBold.fontWeight,
        color = Purple900,
        textAlign = TextAlign.Justify,
        platformStyle = PlatformTextStyle(  // Add this line
            includeFontPadding = false,
        )
    ),
)

그러면 아래와 같이 잘 정렬된 모습을 볼 수 있다.

필자의 경우 Material3 기반의 커스텀 테마를 사용하고 있으므로 ProvideTextStyle를 통해 아래와 같이 기본 텍스트 스타일을 일괄적으로 적용해주고 있다.

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme)
        DarkColorScheme
    else
        LightColorScheme

    MaterialTheme(
        colorScheme = colors,
        typography = primaryTypography,
        shapes = Shapes,
    ) {
        Surface(color = colors.background) {
            ProvideTextStyle(value = PrimaryTextStyle) {
                content()
            }
        }
    }
}

val PrimaryTextStyle: TextStyle
    @Composable
    get() = TextStyle(
        fontFamily = fonts,
        fontWeight = FontWeight.Medium,
        fontSize = dimensionResource(id = R.dimen.text_medium_size).value.sp,
        color = Black900,
        platformStyle = PlatformTextStyle(
            includeFontPadding = false,
        )
    )