Android Jetpack Compose UI/Compose Text

    [Compose Text] alignByBaseLine 사용해 텍스트 기준선 정렬하기

    Text의 기준선이 필요한 이유 우리가 노트 앱을 만든다고 해보자. 노트 앱은 다양한 크기의 문자들이 들어간다. 만약 정해지지 않은 높이의 한 줄에 여러 크기의 Text가 존재한다고 할 때, 이 Text들이 만약 중앙 정렬된다면 어떻게 될까? 이를 코드로 한 번 만들어보자. MultipleTextRow는 Row의 verticalAlignment 속성을 Alignment.Center로 설정해서 두 개의 Text를 중앙 정렬한다. @Composable fun MultipleTextRow() { Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) { Text(text = "Hello", fontSize =..

    [Compose Text] Text에 max line 설정하기 : maxLines

    maxLines란? maxLines란 Text의 줄이 최대 몇 줄까지만 가능한지를 설정하는 옵션이다. maxLines: Int = Int.MAX_VALUE maxLines의 기본값은 Int의 최대값으로 설정되어 있어 Text는 무제한으로 Line을 가질 수 있다. maxLines은 그 자체로도 많이 쓰이고, TextOverFlow.Ellipsis 등과도 함께 쓰이니 어떻게 사용하는지 잘 알아두도록 하자. Default 값에서의 동작 실습을 위해 같은 3줄짜리 text를 가진 Text 컴포저블을 생성하자. maxLines에 아무 값도 설정하지 않으면 maxLines = Int.MAX_VALUE가 되므로 3줄이 모두 보이게 된다. @Preview(showBackground = true, widthDp = 1..

    [Compose Text] text overflow를 이용해 Text가 영역을 벗어났을 때 처리하기. Clip, Visible, Ellipsis

    Text OverFlow 란? overflow: TextOverflow = TextOverflow.Clip Text의 overFlow란 글자가 넘쳤을 경우에 어떻게 처리할 것인지를 결정하는 값이다. TextOverFlow 내부에 companion object로 설정된 3가지 옵션을 사용할 수 있다. companion object { val Clip = TextOverflow(1) val Ellipsis = TextOverflow(2) val Visible = TextOverflow(3) } Clip : 텍스트 영역이 범위를 넘어갔을 때 잘라서 보여주는 옵션. 기본 값이다. Visible : 텍스트 영역이 범위를 넘어갔을 때 모두 보여주는 옵션. Ellipsis : 텍스트 영역이 범위를 넘어갔을 때 "....

    [Compose Text] align을 이용한 글자 정렬

    Text 정렬의 중요성 텍스트의 정렬 방식을 아는 것은 미적으로도 중요하지만 안드로이드 앱의 글로벌 런칭을 위해서도 중요하다. 특히 일부 국가(아랍권 국가)의 경우 문자열을 출력할 때 LTR 방식을 사용하는 것이 아닌 RTL 방식을 사용하고 있어서 텍스트의 정렬 방식의 차이를 제대로 이해하는 것이 중요하다. 만약 그렇지 않을 경우 특정 국가에 출시하기 위해 모든 텍스트 정렬을 찾아서 바꿔야 하는 수고가 생길 수 있다. LTR과 RTL에 대해 더 궁금하다면 아래 글을 참조하자. LTR과 RTL의 차이 : 글로벌 런칭을 위해 필요한 LTR(Left To Right)과 RTL(Right To Right)의 이해 LTR이란? LTR은 왼쪽에서 오른쪽으로 글자를 읽는 것이다. 대부분의 국가가 LTR 방식을 쓰고 ..

    [Compose Text] Text에 간격 만들기 : letter spacing, line height

    Text 간격 만들기 Text의 간격은 두가지가 있다. 하나는 글자간 간격이고, 다른 하나는 줄간 간격이다. Compose Text에서는 이러한 간격들을 설정할 수 있는 프로퍼티들을 제공한다. letterSpacing : 글자간 간격을 만드는 옵션 letterSpacing: TextUnit = TextUnit.Unspecified, lineHeight : 줄간 간격을 만드는 옵션 lineHeight: TextUnit = TextUnit.Unspecified 둘 모두 sp값에 해당하는 TextUnit을 인자로 받는다. 아래에서 이 둘이 어떻게 동작하는지 살펴보자. letterSpacing 이용해 글자간 간격 만들기 Text의 letterSpacing 프로퍼티를 이용하여 글자간 간격을 줄 수 있다. lett..