Android Jetpack Compose UI
[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 =..
[Jetpack Compose] AnimatedVisibility 활용해 Animation 처리하기
Compose의 AnimatedVisiblity 란? AnimatedVisibility란 Jetpack Compose에서 나타짐과 사라짐을 애니메이션으로 처리하기 위해 제공되는 API이다. 가장 기본적이고 간단한 API이며, 동시에 가장 강력한 API이다. 왠만한 애니메이션들은 AnimatedVisibility 하나로 모두 처리할 수 있다. Animated Visibility 내부 살펴보기 AnimatedVisiblity 내부에는 visible, modifier, enter, exit, label, content 총 6가지 파라미터가 들어간다. @Composable fun AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter..
[Jetpack Compose] ViewPager Tab Layout에 연결하기 : 스와이프해 탭 바꾸도록 만들기
Tab과 ViewPager은 언제 사용되는가? Swipe해서 탭이 바뀌는 UI는 많은 앱에 쓰이며, 여러 페이지를 탭으로 구성해 사용 복잡도를 줄이기 위해 사용한다. 그림1과 같은 동작으로 Tab을 직접 클릭해서 Page를 이동할 수도 있으며, Swipe 동작을 통해 페이지를 이동할 수도 있다. 오늘은 이러한 UI를 만드는 방법에 대해 알아보고자 한다. 위 페이지를 만들기 위해서는 다음 단계들을 거쳐야 한다. Tab + ViewPager 만들기 위한 라이브러리 추가하기 Tab 목록 만들기 PagerState 선언하기 CoroutineScope 선언하기 TabRow 만들기 HorizontalPager 만들기 Compose로 Tab과 ViewPager 만들기 1. Tab + ViewPager 만들기 위한 ..
[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..