ComposeCamp2022 Pathway2

https://github.com/gdgand/ComposeCamp2022

Transcript

1. This work is licensed under the Apache 2.0 License Layouts, theming, And animation Pathway 2.
2. 배필주 Naver Z / 캠핑지기
3. This work is licensed under the Apache 2.0 License Pathway 2. Layouts, theming, and animation Deep dive into Compose Layouts 레이아웃 모델에 대해 자 세히 살펴보고 내부에서 작동하는 방식 등을 살펴 봅니다. Video Lazy layouts RecyclerView 보다 만들 기 쉬운 Compose Lazy Layout 리스트에 대해서 알아봅니다. Video Material Design Jetpack Compose의 상태 및 side effects API와 관련 된 고급 개념을 알아봅니 다. Video Animation Compose Animation Api 를 사용하는 방법을 알아 봅니다. 단순한 것 부터 고 급 애니메이션 까지 여러 가지 패턴을 볼 수 있습니 다. Codelab Link: https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-2
4. This work is licensed under the Apache 2.0 License Deep Dive into Compose Layouts View lifecycle .. onMeasure() .. onLayout() .. onDraw() ..
5. This work is licensed under the Apache 2.0 License 맞춤 레이아웃 만들기 @Composable fun MyBasicColumn( modifier: Modifier = Modifier, content: @Composable () -> Unit ) { Layout( modifier = modifier, content = content ) { measurables, constraints -> // measure and position children given constraints logic here } } Link: https://developer.android.com/jetpack/compose/layouts/custom?hl=ko#create-custom
6. This work is licensed under the Apache 2.0 License Modifier Link: https://developer.android.com/jetpack/compose/modifiers?hl=ko @Composable fun ArtistCard(/*...*/) { val padding = 16.dp Column( Modifier .clickable(onClick = onClick) .padding(padding) .fillMaxWidth() ) { // rest of the implementation } } Modifier 함수의 순서는 중요합니 다. 각 함수는 이전 함수에서 반 환한 Modifier를 변경하므로 순서 는 최종 결과에 영향을 줍니다.
7. This work is licensed under the Apache 2.0 License Lazy Layouts 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") } } Link: https://developer.android.com/jetpack/compose/lists?hl=ko
8. This work is licensed under the Apache 2.0 License https://github.com/gdgand/ComposeCamp2022 pathway2 - AnimationCodelab Codelab 안내 Link: https://github.com/gdgand/ComposeCamp2022
9. This work is licensed under the Apache 2.0 License Codelab 안내 Link: https://github.com/gdgand/ComposeCamp2022/tree/main/pathway2
10. This work is licensed under the Apache 2.0 License 간단한 값 변경 애니메이션 animate*AsState animate*AsState 함수는 Compose에서 단일 값 변경 애니메이 션 처리하는 가장 간단한 Animation API입니다. 최종 값(또는 타겟 값)만 제공하면 API가 현재 값에서 지정된 값으로 애니메 이션을 시작합니다. val backgroundColor by animateColorAsState( if (tabPage == TabPage.Home) Purple100 else Green300) ) Link: https://developer.android.com/jetpack/compose/animation?hl=ko
11. This work is licensed under the Apache 2.0 License 가시성(Visibility) 애니메이션 AnimatedVisibility 콘텐츠가 나타나고 사라지는 애니메이션 처리합니다. var editable by remember { mutableStateOf(true) } AnimatedVisibility(visible = editable) { Text(text = "Edit") } Link: https://developer.android.com/jetpack/compose/animation?hl=ko
12. This work is licensed under the Apache 2.0 License 콘텐츠 크기 변경 애니메이션 var message by remember { mutableStateOf("Hello") } Box( modifier = Modifier.background(Color.Blue) .animateContentSize() ) { Text(text = message) } Link: https://developer.android.com/jetpack/compose/animation?hl=ko animateContentSize animateContentSize 수정자는 크기를 변경하는 애니메이션을 표시합 니다. Size() 또는 defaultMinSize() 앞에 배치
13. This work is licensed under the Apache 2.0 License 여러 값 변경 애니메이션 enum class BoxState { Collapsed,Expanded } Link: https://developer.android.com/jetpack/compose/animation?hl=ko updateTransition Transition은 하나 이상의 애니메이션을 하 위 요소로 관리하며 여러 상태 간에 동시 에 실행합니다. var currentState by remember { mutableStateOf(BoxState.Collapsed) } val transition = updateTransition(currentState) val borderWidth by transition.animateDp { state - > . . . }
14. This work is licensed under the Apache 2.0 License 반복 (Repeating) 애니메이션 InfiniteTransition 반복적인 애니메이션 처리에 사용합니다. 이 API 는 Transition API 와 유사합니다. 둘 다 여러 값에 애니메이션을 적용하지만 Transition은 상태 변경 에 따라 값에 애니메이션을 한 번 적용하고, Infinite Transition은 값에 무기한으로 애니메이션 을 적용합니다. Link: https://developer.android.com/jetpack/compose/animation?hl=ko val infiniteTransition = rememberInfiniteTransition() val color by infiniteTransition.animateColor( initialValue = Color.Red, targetValue = Color.Green, animationSpec = infiniteRepeatable( animation = tween(1000, easing= LinearEasing), repeatMode = RepeatMode.Reverse ) ) Box(Modifier.fillMaxSize().background(color))
15. This work is licensed under the Apache 2.0 License 동작(Gesture) 애니메이션 swipeToDismiss 사용자 터치 이벤트 애니메이션 먼저 사용자가 화면에 손가락을 대면 x 및 y 좌표 가 있는 터치 이벤트가 생성되고 손가락을 오른쪽 이나 왼쪽으로 이동하면 이동에 따라 x 및 y 좌표 도 이동합니다. 사용자가 터치하는 항목은 손가락 에 따라 이동해야 하므로, 터치 이벤트의 위치와 속도에 따라 항목의 위치가 업데이트된 값을 받아 오는 방법을 살펴봅니다. Link: https://developer.android.com/jetpack/compose/animation?hl=ko
16. This work is licensed under the Apache 2.0 License fun Modifier.swipeToDismiss( onDismissed: () -> Unit ): Modifier = composed { val offsetX = remember { Animatable(0f) } pointerInput(Unit) { . . . } .offset { IntOffset(offsetX.value.roundToInt(), 0) } } pointerInput 수신되는 포인터 터치 이벤트에 대한 액세스 권한을 얻고 동일 한 포인터를 사용해서 사용자가 드래그 하는 속도를 추적할 수 있습니다. { } 안에서 설정된 애니메이션 값을 offset을 통해 element 에 적용해주면 제스처 또는 애니메 이션이 실행됩니다.
17. This work is licensed under the Apache 2.0 License Thank you 작업이 끝났다면 바로 커밋하세요! 완료된 내용을 트래킹이 끝나고 PR 로 제출해주셔야 트래킹 완주로 인정됩니다. 잊어버리기 전에 코드랩이 끝난 이후에 Commit 을 실행하세요! 매주 캠핑지기와 진행되는 이벤트도 놓치지 말아요!