[Kotlin/Compose] Swipe Action 기능 만들기 with. AnchoredDraggable

AnchoredDraggable 포스팅에 앞서 Anchored draggable이 무엇인지 간단하게 설명해보고자 합니다. AnchoredDraggableState AnchoredDraggableState는 드래그 가능한 요소를 관리하고 제어하는 데 사용합니다. 간단하게 설명하자면, 특정 앵커 포인트 사이에서 드래그를 관리하는 데 사용되는 상태 객체 입니다. class AnchoredDraggableState( initialValue: T, internal val positionalThreshold: (totalDistance: Float) -> Float, internal val velocityThreshold: () -> Float, val animationSpec: AnimationSpec, inte..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 14.
• textsms

[Android/Kotlin] MotionLayout

MotionLayout이란? MotionLayout는 앱에서 모션과 위젯 애니메이션을 관리하는 데 도움이 되는 레이아웃. ConstaintLayout의 서브클래스이다. MotionLayout은 완전히 선언적이므로, XML에서 모든 전환을 설명할 수 있다. 간단한 스와이핑 애니메이션 만들기 주의사항 https://developer.android.com/develop/ui/views/animations/motionlayout?hl=ko#androidx 공식 문서에 따르면, 사용자가 상호작용 하는 버튼, 제목 표시줄 등 UI 요소를 이동하고 크기를 조절 및 애니메이션 처리를 위한 것이다. 불필요한 특수효과로는 사용하지 말라고 한다. 사용해보기 의존성 추가하기 dependencies { implementatio..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 8.
• textsms

[Compose UI] 텍스트/이미지 반짝임 로딩화면 만들기

반짝임 애니메이션 앱을 사용하다보면, 화면이 로딩되는 과정에서 이미지나, 텍스트가 보여지는 공간에 반짝임 애니메이션이 보이며 로딩중이라는 느낌을 주는 경우가 많다. 과연 이런건 어떻게 구현할까? 반짝임 애니메이션 만들기 확장 함수 만들기 Modifier클래스의 확장 함수를 만들어 반짝임 이미지를 생성하도록 하겠습니다. Modifier의 확장 함수를 만들기 위해, 다음과 같이 작성해줍니다. fun Modifier.shimmerEffect(): Modifier = composed { } 함수 내부의 값은 가장 먼저 상태 값을 저장할 변수를 정의해줍니다. var size by remember { mutableStateOf(IntSize.Zero) } val transition = rememberInfinit..

• format_list_bulleted 안드로이드/Compose
• · 2023. 11. 29.
• textsms

[Compose UI] Cutstom Pager를 이용하여 swipe transition 구현하기

Swipe Transition? 앱을 사용하다보면, 다음과 같이 swipe를 할 때 애니메이션을 사용하는 경우가 있다. 이러한 기능을 어떻게 구현할 수 있을까? Pager 콘텐츠를 좌측에서 우측으로 넘기고자 하면, Compose에서는 HorizontalPager 또는 VerticalPager를 사용하면 된다. 이번 포스팅에서는 HorizontalPager를 이용하여, 해당 애니메이션을 적용한 View를 구현해보겠다. 아래의 포스팅을 참고하여 제작하였으므로, 더 자세한 내용을 원하는 분들은 확인!-! https://medium.com/androiddevelopers/customizing-compose-pager-with-fun-indicators-and-transitions-12b3b69af2cc Cust..

• format_list_bulleted 안드로이드/Compose
• · 2023. 11. 28.
• textsms

Modifier 적용시 padding이 적용이 안될 때

Compose를 사용할 때 Modifier을 이용해 padding 값을 적용하려고 하는 상황에서 적용이 안되는 경우가 있다. 내 경우에는 다음과 같다. 아래가 안되는 코드이고 Box( Modifier .fillMaxWidth() .fillMaxHeight() .background(Color.Blue) .padding(horizontal = 30.dp) ) 이게 되는 코드이다. Box( Modifier .fillMaxWidth() .fillMaxHeight() .padding(horizontal = 30.dp) .background(Color.Blue)) 차이는 바로 순서이다. 여기서 padding 값은 background 이후에 적용이 된다. padding은 파란색 배경 안쪽에 적용이 되어, 만약 배경 ..

• format_list_bulleted 안드로이드/Compose
• · 2023. 10. 24.
• textsms

JetPack Compose - FlowLayout + Chip

안드로이드 앱을 사용하다보면, 다음과 같은 UI를 만날 때가 있다. 해당 UI를 FlowLayout과 Chip을 이용하여 구현해보겠다. 관련 학습은 아래의 구글 공식문서를 참고하여 만들었다. https://developer.android.com/jetpack/compose/layouts/flow Flow layouts in Compose | Jetpack Compose | Android Developers Flow layouts in Compose Stay organized with collections Save and categorize content based on your preferences. Beta: FlowRow and FlowColumn are experimental. This docume..

• format_list_bulleted 안드로이드/Compose
• · 2023. 10. 20.
• textsms