Android Jetpack Compose UI
[Android Compose] ViewPager 사용해 Swipe 되는 화면 만들기 : HorizontalPager 사용하기
Compose에서 ViewPager 만들기 Compose에서 ViewPager을 만들기 위해서는 Accompanist에서 제공하는 HorizontalPager을 사용해야 한다. Accompanist는 Jetpack Compose에서 자주 사용되는 View들을 사용하기 편하게 만들어놓은 라이브러리로 기존 안드로이에서 제공하던 ViewPager 또한 제공한다. 라이브러리 추가하기 accompanist에서 Pager용 라이브러리를 제공하는데 아래 둘을 앱 수준의 build.gradle에 추가해야 한다. implementation "com.google.accompanist:accompanist-pager:0.20.1" implementation "com.google.accompanist:accompanist-p..
[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..