Android Jetpack Compose UI/Compose Layout

    [Android Compose Lists] 2. Compose LazyColumn을 이용해 RecyclerView 만들기 + item, items, itemsIndexed사용법 정리

    LazyColumn이란? LazyColumn은 화면에 보여지는 컴포저블만을 표시하는 scrollable한 Column이다. LazyColumn은 화면에 보여지는 컴포저블만을 표시하기 때문에 화면 로딩 시간을 최적화 시킬 수 있어 많은 아이템이 표시되어야 할 경우 필수적으로 사용되어야 하는 레이아웃이다. LazyColumn의 item으로 사용할 컴포저블 정의 LazyColumn을 사용하기 위해서 먼저 LazyColumn의 item으로 사용할 컴포저블을 정의하자. Text를 Card로 감싼 간단한 컴포저블이다. @Composable fun KotlinWorldCard(order: Int) { Card( Modifier .padding(12.dp) .border(width = 4.dp, color = Colo..

    [Android Compose Lists] 1. Compose Column과 ScrollState를 이용해 Scroll View만들기 + 사용법 정리

    Compose의 Lists란 무엇인가? Compose의 Lists란 컴포넌트들을 Scrollable하게 수직 또는 수평으로 배치하는 Composable을 뜻한다. 이를 만들기 위해서는 Column 혹은 Row를 사용할 수 있다. 이번 글에서는 Column을 이용해 Lists를 만드는 작업을 한다. Column을 Lists로 만들기 위해 어떤 작업이 필요한가? Column은 모든 자식 Composable을 수직으로 배치하는 Compose Layout이다. Column을 List로 만들기 위해서는 몇가지 선행 작업이 필요하다. Column을 내부 컴포넌트를 배치하는 작업과 Column의 Modifier을 이용해 Column이 scroll 가능하게 만드는 작업이다. *Column에 Scroll을 결합한 것은 ..

    [Compose ConstraintLayout] ConstraintSet과 함께 사용하기 (Id 사용하기)

    Id를 쓰지 않고 ConstraintLayout사용하기 앞선 글 [Android Compose Layout] 6. ConstraintLayout 정리 에서는 Id를 쓰지 않고 ConstraintLayoutScope 내에서 ConstrainedLayoutReference를 만들어서 사용했다. @Preview(showBackground = true, widthDp = 200, heightDp = 200) @Composable fun KotlinWorldConstraintLayout() { ConstraintLayout(modifier = Modifier.fillMaxSize()) { /* ConstraintLayoutScope 시작 */ val kotlinWorldText: ConstrainedLayoutR..

    [Compose Row] vertical alignment 사용해 정렬하기

    Row의 Alignment Row의 자식 View들은 수평으로 배치되므로 수직으로 정렬(horizontalAlignemnt)이 지원되는데 수직 정렬은 모든 자식 View들의 y위치가 동일하도록 만들어주는 정렬이다. 따라서 같은 x축 상에서 정렬된다(y값 동일하기 때문). Row에서 사용할 수 있는 Alignment의 종류 Row에서는 Alignment.Vertical을 상속받는 3가지 Alignment를 사용할 수 있다. Alignment.Top (위쪽 정렬) Alignment.CenterVertically (중앙 정렬) Alignment.Bottom (아래쪽 정렬) Alignment.Top Alignment.Top은 Row의 기본 Arrangement로 레이아웃의 위쪽에 모든 컴포넌트들이 정렬된다. @..

    [Compose Row] horizontal arrangement 사용해 배치하기

    Row의 Arrangement Row는 수평방향으로 자식 컴포넌트들을 순서대로 배치하는 레이아웃이다. 이때 어떤 방식으로 자식 컴포넌트들을 배치할지를 Row의 horizontalArrangement가 결정한다. 예를 들어 3개의 Text를 row의 내부에 배치한다고 할 때 첫 번째 컴포넌트는 왼쪽에 붙여서, 두 번째는 정중앙에, 세 번째는 오른쪽에 붙여서 배치하고 싶다고 해보자. 이때 직접 컴포넌트의 위치를 지정해주기보다. Arrangement.SpaceBetween을 쓰면 한 번에 해결된다. @Preview(showBackground = true, widthDp = 200, heightDp = 100) @Composable fun KotlinWorldRow(){ Row(horizontalArrangem..