[Jetpack Compose] Text Width(텍스트 너비) 측정하기

Compose의 TextField(BasicTextField)에는 기본 너비가 설정되어있다. 따라서 너비 설정 없이 사용할 때는 어느 정도 알아서 공간을 차지하지만 원하는 너비로 조절하기 위해서는 Modifier.width 속성을 사용해 너비를 직접 설정해 주어야 한다. 이 때 Text의 너비에 맞게 자동으로 너비를 조절되도록 설정하는 방법을 설명한다.

 

rememberTextMeasurer()

@Composable
fun rememberTextMeasurer(
    cacheSize: Int = DefaultCacheSize
): TextMeasurer {
    val fontFamilyResolver = LocalFontFamilyResolver.current
    val density = LocalDensity.current
    val layoutDirection = LocalLayoutDirection.current

    return remember(fontFamilyResolver, density, layoutDirection, cacheSize) {
        TextMeasurer(fontFamilyResolver, density, layoutDirection, cacheSize)
    }
}

해당 내장 함수를 분석해보면 cacheSize라는 매개 변수가 있지만 기본값을 사용하므로 별도로 입력해줄 필요는 없으며 원한다면 측정 결과를 저장할 캐시 크기를 설정할 수 있다. 그 아래 코드를 보면 여러 Local 정보를 토대로 Text를 측정하게 된다. 이 때 fontFamily로 기본 설정되어 있는 fontFamily를 사용하기 때문에 아래에서 설명할 내용처럼 fontFamily 관련 처리를 해주어야 한다. 

 

측정 방법

// rememberTextMeasurer를 사용하여 TextMeasurer 생성
val measurer = rememberTextMeasurer()

// 텍스트 스타일 설정
val textStyle = TextStyle(
    fontFamily = pretendard,
    fontSize = 18.sp,
    fontWeight = FontWeight.Normal,
    color = Color.DarkGray
)

// 텍스트 생성(여기서는 TextFieldValue 사용)
var example by remember { mutableStateOf(TextFieldValue("예시")) }

// 텍스트 너비 측정 및 dp 단위 변환
val textWidth = density.run { measurer.measure(example.text, textStyle).size.width.toDp() + 2.dp }

BasicTextField(
    value = example,
    onValueChange = { example = it },
    textStyle = textStyle,
    modifier = Modifier
        .width(textWidth)
)

1. textMeasurer과 textStyle을 설정한다. 

 

- 기본 폰트가 아닌 커스텀 폰트를 사용한다면 반드시 폰트 스타일을 생성해 measurer를 사용할 때 입력해 주어야 한다. textStyle을 설정하지 않는다면 font의 자간 간격이나 높이 차이로 인해 측정 차이가 생기기 때문이다. 

 

 

2. measurer을 사용해 얻은 값은 Int 형식이기 때문에 width 속성에 맞게 dp로 변환해준다.

 

- LocalDensity.current로 density를 만들어준 후 density.run 또는 with(density)로 toDp()를 사용해준다. 

 

- 2.dp는 TextField에 기본값이 존재할 경우 클릭 시 커서가 생성되며 기본 텍스트를 왼쪽으로 밀어내기 때문에 왼쪽이 약간 잘리게 된다. 이를 해결하기 위해 커서 크기 정도의 약간의 공간을 주었고 기본값을 사용하지 않거나 좀 더 넓은 여백을 원한다면 알아서 조절하면 된다. 

 

 

3. 별도의 decoration 없이 글자만 보여주기 위해 BasicTextField를 사용하였으며 다른 TextField에서도 동일한 방법으로 사용할 수 있다. TextField의 Modifier 설정에서 측정한 textWidth 값을 width의 값으로 설정해주면 된다. 

 

Reference

https://developer.android.com/develop/ui/compose/graphics/draw/overview?hl=ko#measure-text

Compose의 그래픽  |  Jetpack Compose  |  Android Developers