[Android Compose/안드로이드 컴포즈] Lists and animations (Compose 배우기 -4)

List and animations

• Compose의 LazyColumn, LazyRow을 사용하여 리스트를 표현할 수 있다. 두 컴포저블은 화면에 표시되는 요소만 렌더링 하므로 긴 목록에 아주 효율적이다. 
• 이름에서 알 수 있듯이 LazyColumn은 수직 스크롤, LazyRow는 수평 스크롤 목록을 생성한다. 

• 스크롤이 없는 리스트의 경우엔 Column, Row를 사용해도 된다. 또한 수정자를 통해 스크롤을 추가해도 되지만 스크롤이 필요한 경우에는 LazyColumn, LazyRow 사용을 권유한다. 

항목 목록을 표시하려면 이러한 API 대신 LazyColumn 및 LazyRow를 사용해 보세요. 
LazyColumn, LazyRow는 스크롤 기능을 제공하며 필요할 때만 항목을 구성하므로 스크롤 수정자보다 훨씬 더 효율적입니다

 

Lazy composables 

• LazyColumn, LazyRow 로 구성
• 다른 Compose 와 달리 LazyListScope 블록을 제공한다. 또한 이 블록은 앱이 항목 내용을 설명할 수 있도록 하는 DSL을 제공한다. 그런 다음 지연 구성 요소는 레이아웃 및 스크롤 위치에서 요구하는 대로 각 항목의 콘텐츠를 추가하는 역할을 합니다. 

주요 용어: DSL 은 도메인별 언어를 나타냅니다 . Compose가 일부 API에 대해 DSL을 정의하는 방법에 대한 자세한 내용은 Kotlin for Compose 문서를 참조하세요.

 

LazyListScope DSL

• LazyListScope는 리스트를 구성하기 위한 item(), items(), itemsIndexed() 함수를 제공 

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 5 items
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // Add another single item
    item {
        Text(text = "Last item")
    }
}

 

이밖에 PaddingValues , Arrangement.spacedBy() 등 리스트를 구현하는 기능은 여기를 참조하자. 

 

Animations

• Compose는 remember 및 mutableStateOf라는 상태 API를 제공한다. 이를 사용해 로컬 UI의 상태를 저장해 리스트 요소에 확장, 색상 변경 등의 애니메이션을 추가할 수 있다. 

[리스트 요소를 클릭하면 확장/축소 이벤트를 넣은 예시]

@Composable
fun Thumbnail64Line2Card(message: Message) {
    val padding = 4.dp
    Row(
        Modifier.padding(start = 20.dp, top = 12.dp, bottom = 12.dp, end = 20.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start,
    ) {
        var isExpanded by remember{ mutableStateOf(false) }
        ImageCard()
        Column(
            Modifier
                .clickable {isExpanded = !isExpanded }
                .padding(start = 12.dp)
                .fillMaxWidth(), horizontalAlignment = Alignment.Start
        ) {
            TitleCard(title = message.title)
            Spacer(Modifier.size(padding))
            SubTitleCard(subTitle = message.content, isExpanded = isExpanded)
        }
    }
}

@Composable
fun SubTitleCard(subTitle: String, isExpanded: Boolean = false) {
    Text(text = subTitle, style = MaterialTheme.typography.subtitle1, maxLines = if(isExpanded) 10 else 1)
}

 

• 또한 크기나 색상을 변경할 수도 있는데 부드러운 애니메이션을 사용하기 위해 animateColorAsState, animateColorAsState 함수를 사용할 수 있다. 자세한 내용은 여기를 참고하면 된다. 

 

이렇게 Compose 기본기 독학? 을 완료했다. 처음 걱정과 달리 얼른 Compose를 사용해 개발을 진행하고 싶은 생각이 가득하다!! 안드로이드 개발자 사이트에 나와있는 Compose 관련 내용들도 더 꼼꼼히 읽어가며 익혀야겠다. 끝! 

---

안드로이드 제공 가이드 문서 

• 레이아웃 >
• 테마 설정 >
• 모든 가이드 >

컴포즈 예제

• https://github.com/android/compose-samples