Android/Compose UI

[Compose UI] 애니메이션 - 스프링 효과

스프링 효과 안드로이드 애니메이션에서 제공하는 스프링은 시작과 끝 값 사이에 물리학적 값을 이용하여 애니메이션을 표현한다. 해당 애니메이션에 반영되는 값은 감쇠비와 강도이다. 감쇠비(damingRatio) : 스프링의 탄성 정도. 얼마나 빠르게 원래 상태로 돌아오는지의 정도를 나타낸다. 기본값은 Spring.DampingRatioNoBouncy 이다 강도(stiffness) : 스프링의 강도 정도. 스프링이 종료된 값으로 돌아오는 속도를 의미한다. 기본값은 Spring.StiffnessMedium 이다. Card내의 Column에 스프링 효과 적용하기 Column에 적용하는 Modifier의 animateContentSize 인자를 설정한다. spring 애니메이션을 animationSpec으로 설정하고..

[Compose UI] IconButton

IconButton은 지정한 action을 수행하도록 할 수 있는 클릭가능한 아이콘이다. 사용자 접근성 가이드라인에 따라 IconButton의 최소 터치 아이콘 크기는 48x48dp 이다. 이 사이즈보다 작은 사이즈는 사용자 접근성을 저해한다고 판단하기에 해당 가이드라인을 준수하는 것이 좋다. 주의할 사항은 IconButton의 인자 중 하나인 content는 androidx.compose.material.icons.Icons의 아이콘을 사용하는 아이콘 이여야 한다. 만약 사용자 지정 아이콘을 사용하는 경우에는 내부 아이콘의 일반적인 크기는 24x24에가 된다. IconButton 함수 인자 onClick: () -> Unit, : 클릭 시 발생할 action modifier: Modifier = Mod..

[Compose UI] Modifier (수정자)

Modifier는 다양한 기능을 지원하고 해당 기능으로 Compose의 UI를 변경 및 확장할 수 있다. Modifier에서 지원하는 기능은 아래와 같다. (https://developer.android.com/jetpack/compose/layout) 컴포저블의 크기, 레이아웃, 동작 및 모양 변경 접근성 라벨과 같은 정보 추가 사용자 입력 처리 요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가 Modifier에서 제공하는 간단한 기능들을 빠르게 살펴볼 수 있도록 정리한다. Modifier의 함수들의 반환값은 Modifier이다. 따라서 어떤 순서로 함수를 적용하느냐에 따라 다른 효과가 적용되는 Modifier가 생성되므로 순서에 항상 ..

[Compose UI] LazyColumn (스크롤 가능한 Column)

Jetpack Compose에서는 LazyColumn 컴포저블을 사용하여 스크롤 가능한 목록을 만들 수 있다. LazyColumn과 Column의 차이점은 Compose가 한 번에 모두 로드하므로 표시할 항목이 적은 경우 Column을 사용해야 한다는 것입니다. Column은 사전 정의된 또는 고정된 개수의 컴포저블만 보유할 수 있다. 하지만 LazyColumn은 콘텐츠를 추가할 수 있어 긴 목록의 경우 특히 목록의 길이를 알 수 없을 때 유용하게 사용할 수 있다. LazyColumn는 추가 코드 없이 기본적으로 스크롤도 제공하고 있다. 특히 LazyColumn은 화면에 보여지는 컴포저블만 추가하여 보여주는 방식이기에 많은 리스트를 보여줘야 하는 경우 최적화에 사용하기 용이하다. LazyColumn 함수..

[Compose UI] Image (이미지 다루기)

Image 함수 시그니처 @Composable fun Image( painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null ) 함수 파라미터 설명 painter - 이미지 정보 contentDescription - 이 이미지가 나타내는 것을 설명하기 위해 접근성 서비스에서 사용하는 텍스트. 이 이미지가 장식용으로 사용되지 않는 한 항상 제공되어야 하며 사용자가..

[Compose UI] Card

Card는 단일 주제에 대한 컨텐츠를 담고 있는 Surface이다. 즉 Composable function이다. Card의 파라미터 다양한 파라미터를 활용하여 Card를 확장 및 꾸밀 수 있다. onClick - callback to be called when the card is clicked modifier - Modifier to be applied to the layout of the card. enabled - Controls the enabled state of the card. When false, this card will not be clickable shape - Defines the card's shape as well its shadow. A shadow is only display..