2021 ComposeFest2021-Migration to Jetpack Compose

2021 Devfest Korea Android
Jetpack Compose 코드랩 중 Migration to Jetpack Compose 설명 자료입니다.

Transcript

1. Migrating to Jetpack Compose ߓ೙઱ GDG Korea Android, Coupang [Korea Android]
2. Codelab উղ
3. https://github.com/gdgand/ComposeFest2021 Repo fork೧ࢲ, ѐੋ ࠳ے஖ীࢲ ૓೯ೞҊ, ௏٘۽ ԙ թӝӝ! ޷ܻ Fork ߉ই֬ਵन ٜ࠙਷ ୭नചܳ ೠߣ ࠗఌ٘۰ਃ! Repo উղ week 4-2-Migrating to Jetpack Compose
4. https://github.com/gdgand/ComposeFest2021
5. ߄۽ द੘!
6. Migration ҅ദ
7. 7 ੼૓੸ਵ۽ بੑ
8. 8 Views Compose Views in Compose
9. Views Compose
10. <CoordinatorLayout ...> <AppBarLayout ...> <ConstraintLayout ...> <TextView ...> <TextView ...> </ConstraintLayout> </CoordinatorLayout> 5. Hello, Compose! fragment_plant_detail.xml
11. <ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent"/> <CoordinatorLayout ...> <AppBarLayout ...> </CoordinatorLayout> 5. Hello, Compose! fragment_plant_detail.xml
12. 5. Hello, Compose! class PlantDetailFragment : Fragment() { .. . override fun onCreateView(...): View? { val binding = DataBindingUtil.inflate<...> ( inflater, R.layout.fragment_plant_detail, container, fals e ).apply { .. . composeView.setContent { MaterialTheme { PlantDetailDescription( ) } } } .. . } } Compose World
13. 6. Creating a Composable out of XML fragment_plant_detail.xml <TextView android:id="@+id/plant_detail_name" . . . android:layout_marginStart="@dimen/margin_small" android:layout_marginEnd="@dimen/margin_small" android:gravity="center_horizontal" android:text="@{viewModel.plant.name}" android:textAppearance="?attr/textAppearanceHeadline5" . . . tools:text="Apple" />
14. 6. Creating a Composable out of XML @Composable private fun PlantName(name: String) { Text( text = name, style = MaterialTheme.typography.h5, modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } PlantDetailDescription.kt
15. 6. Creating a Composable out of XML @Composable private fun PlantName(name: String) { Text( text = name, style = MaterialTheme.typography.h5, modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } android:textAppearance="?attr/textAppearanceHeadline5" PlantDetailDescription.kt
16. 6. Creating a Composable out of XML @Composable private fun PlantName(name: String) { Text( text = name, style = MaterialTheme.typography.h5, modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } android:layout_width=“match_parent” PlantDetailDescription.kt
17. 6. Creating a Composable out of XML @Composable private fun PlantName(name: String) { Text( . . . modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } android:layout_marginStart="@dimen/margin_small" android:layout_marginEnd="@dimen/margin_small" android:gravity="center_horizontal" PlantDetailDescription.kt
18. ViewComposition Strategy
19. 10.ViewCompositionStrategy Composable ࣻݺ ઱ӝ
20. 10.ViewCompositionStrategy Composable ࣻݺ ઱ӝ ViewCompositionStrategy. DisposeOnDetachedFromWindow
21. 10.ViewCompositionStrategy • Fragment Fragmentীࢲ ࢎਊػ Composition੉ ࢚క(State)ܳ ੷੢ೞ۰ݶ Fragment View lifeCycle ਸ ٮۄঠ ೤פ׮. 
 • Transitions ੹ജ ژח Window ੹ജ੉ ߊࢤೡ ٸ, Windowীࢲ ܻ࠙ػ റীب ComposeViewо ҅ࣘ ಴द غ؊ۄب, ӝࠄ DisposeOnDetachedFromWindow ੹ۚী ٮۄ ࢚క(State)о ࢏ઁؾפ׮. 
 • RecyclerView ViewHolder ژח ੗୓ ࣻݺ ઱ӝ ҙܻ CustomView Composable ੄ ViewCompositionStrategyܳ ٮ۽ ୓௼೧઻ঠ ೞח ா੉झ
22. 10.ViewCompositionStrategy class PlantDetailFragment : Fragment() { .. . override fun onCreateView(...): View? { val binding = DataBindingUtil.inflate<...> ( inflater, R.layout.fragment_plant_detail, container, fals e ).apply { .. . composeView.setContent { MaterialTheme { PlantDetailDescription( ) } } } .. . } } Compose World
23. class PlantDetailFragment : Fragment() { .. . ... } 10.ViewCompositionStrategy composeView.apply { setViewCompositionStrategy( ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) setContent { MaterialTheme { PlantDetailDescription() } } }
24. ViewCompositionStrategy https://developer.android.com/reference/kotlin/androidx/ compose/ui/platform/ViewCompositionStrategy •DisposeOnDetachedFromWindow •DisposeOnLifecycleDestroyed •DisposeOnViewTreeLifecycleDestroyed
25. Views in Compose
26. 9. Views in Compose code @Composable fun CustomView() { val selectedItem = remember { mutableStateOf(0) } AndroidView( factory = { context -> CustomView(context).apply { // View setup } }, update = { view -> // View সؘ੉౟ ۽૒ ୶о view.coordinator.selectedItem = selectedItem.value } ) }
27. @Composable fun <T : View?> AndroidView( factory: ((Context) -> T)?, modifier: Modifier? = Modifier, update: ((T) -> Unit)? = NoOpUpdate ): Unit https://developer.android.com/reference/kotlin/androidx/compose/ui/viewinterop/package- summary#AndroidView(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)
28. ViewModels in Compose
29. 7. ViewModels and LiveData @Composable fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) { ... }
30. 7. ViewModels and LiveData @Composable fun MyExample( viewModel: ExampleViewModel = viewModel() ) { /* ... */ } @Composable fun MyExample2( viewModel: ExampleViewModel = viewModel() ) { /* ... */ } LifeCycleOwnerо ࢓ই੓ח زউ زੌೠ ੋझఢझܳ ߈ജ https://developer.android.com/jetpack/compose/libraries#viewmodel
31. Theme ഐജ
32. 11. Interop theming MDC-Android Compose Theme Adapter
33. ୶о উղ
34. 12. Accessibility in Jetpack Compose 15. Advanced state and side effects in Jetpack Compose ੉ߣ ೯ࢎী ನೣغ૑ ঋ਷ ٮՏٮՏೠ Codelab
35. 4઱ର 2ߣ૩ ૑Әࠗఠ द੘ೞࣁਃ