Jetpack Compose Animation – 컨텐츠 크기 변경 애니메이션

앱은 여러 주제(topic)를 콘텐츠내에 보여준다. 그 중 하나를 클릭하면 해당 주제에 대한 본문이 열리고 표시된다. 본문이 표시되거나 숨겨지면 텍스트가 포함된 카드가 확장 및 축소된다.

TopicRow 컴포저블에서 TODO 3에 대한 코드를 확인하자.

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    // ... 제목과 본문
}

여기에서 Column 컴포저블은 내용이 변경되면 크기가 변경된다. animateContentSize 수정자를 추가하여 크기 변경을 애니메이션할 수 있다.

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .animateContentSize()
) {
    // ... 제목과 본문
}

앱을 실행하고 주제 중 하나를 클릭한다. 애니메이션으로 확장 및 축소되는 것을 볼 수 있다.

후원하기