Upgrade to PRO for Only $50/Yearโ€”Limited-Time Offer! ๐Ÿ”ฅ

ComposeCamp2022 Pathway2

Veronikapj
November 01, 2022

ComposeCamp2022ย Pathway2

Veronikapj

November 01, 2022
Tweet

More Decks by Veronikapj

Other Decks in Programming

Transcript

  1. 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
  2. This work is licensed under the Apache 2.0 License Deep

    Dive into Compose Layouts View lifecycle .. onMeasure() .. onLayout() .. onDraw() ..
  3. 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
  4. 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๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฏ€๋กœ ์ˆœ์„œ ๋Š” ์ตœ์ข… ๊ฒฐ๊ณผ์— ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.
  5. 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
  6. This work is licensed under the Apache 2.0 License https://github.com/gdgand/ComposeCamp2022

    pathway2 - AnimationCodelab Codelab ์•ˆ๋‚ด Link: https://github.com/gdgand/ComposeCamp2022
  7. This work is licensed under the Apache 2.0 License Codelab

    ์•ˆ๋‚ด Link: https://github.com/gdgand/ComposeCamp2022/tree/main/pathway2
  8. 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
  9. 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
  10. 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() ์•ž์— ๋ฐฐ์น˜
  11. 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 - > . . . }
  12. 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))
  13. 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
  14. 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 ์— ์ ์šฉํ•ด์ฃผ๋ฉด ์ œ์Šค์ฒ˜ ๋˜๋Š” ์• ๋‹ˆ๋ฉ” ์ด์…˜์ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.
  15. This work is licensed under the Apache 2.0 License Thank

    you ์ž‘์—…์ด ๋๋‚ฌ๋‹ค๋ฉด ๋ฐ”๋กœ ์ปค๋ฐ‹ํ•˜์„ธ์š”! ์™„๋ฃŒ๋œ ๋‚ด์šฉ์„ ํŠธ๋ž˜ํ‚น์ด ๋๋‚˜๊ณ  PR ๋กœ ์ œ์ถœํ•ด์ฃผ์…”์•ผ ํŠธ๋ž˜ํ‚น ์™„์ฃผ๋กœ ์ธ์ •๋ฉ๋‹ˆ๋‹ค. ์žŠ์–ด๋ฒ„๋ฆฌ๊ธฐ ์ „์— ์ฝ”๋“œ๋žฉ์ด ๋๋‚œ ์ดํ›„์— Commit ์„ ์‹คํ–‰ํ•˜์„ธ์š”! ๋งค์ฃผ ์บ ํ•‘์ง€๊ธฐ์™€ ์ง„ํ–‰๋˜๋Š” ์ด๋ฒคํŠธ๋„ ๋†“์น˜์ง€ ๋ง์•„์š”!