Tweet
Tweet

Slide 1

Slide 1 text

Migrating to Jetpack Compose ߓ೙઱ GDG Korea Android, Coupang [Korea Android]

Slide 2

Slide 2 text

Codelab উղ

Slide 3

Slide 3 text

https://github.com/gdgand/ComposeFest2021 Repo fork೧ࢲ, ѐੋ ࠳ے஖ীࢲ ૓೯ೞҊ, ௏٘۽ ԙ թӝӝ! ޷ܻ Fork ߉ই֬ਵन ٜ࠙਷ ୭नചܳ ೠߣ ࠗఌ٘۰ਃ! Repo উղ week 4-2-Migrating to Jetpack Compose

Slide 4

Slide 4 text

https://github.com/gdgand/ComposeFest2021

Slide 5

Slide 5 text

߄۽ द੘!

Slide 6

Slide 6 text

Migration ҅ദ

Slide 7

Slide 7 text

7 ੼૓੸ਵ۽ بੑ

Slide 8

Slide 8 text

8 Views Compose Views in Compose

Slide 9

Slide 9 text

Views Compose

Slide 10

Slide 10 text

5. Hello, Compose! fragment_plant_detail.xml

Slide 11

Slide 11 text

5. Hello, Compose! fragment_plant_detail.xml

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

6. Creating a Composable out of XML fragment_plant_detail.xml

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ViewComposition Strategy

Slide 19

Slide 19 text

10.ViewCompositionStrategy Composable ࣻݺ ઱ӝ

Slide 20

Slide 20 text

10.ViewCompositionStrategy Composable ࣻݺ ઱ӝ ViewCompositionStrategy. DisposeOnDetachedFromWindow

Slide 21

Slide 21 text

10.ViewCompositionStrategy • Fragment Fragmentীࢲ ࢎਊػ Composition੉ ࢚క(State)ܳ ੷੢ೞ۰ݶ Fragment View lifeCycle ਸ ٮۄঠ ೤פ׮. 
 • Transitions ੹ജ ژח Window ੹ജ੉ ߊࢤೡ ٸ, Windowীࢲ ܻ࠙ػ റীب ComposeViewо ҅ࣘ ಴द غ؊ۄب, ӝࠄ DisposeOnDetachedFromWindow ੹ۚী ٮۄ ࢚క(State)о ࢏ઁؾפ׮. 
 • RecyclerView ViewHolder ژח ੗୓ ࣻݺ ઱ӝ ҙܻ CustomView Composable ੄ ViewCompositionStrategyܳ ٮ۽ ୓௼೧઻ঠ ೞח ா੉झ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

class PlantDetailFragment : Fragment() { .. . ... } 10.ViewCompositionStrategy composeView.apply { setViewCompositionStrategy( ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) setContent { MaterialTheme { PlantDetailDescription() } } }

Slide 24

Slide 24 text

ViewCompositionStrategy https://developer.android.com/reference/kotlin/androidx/ compose/ui/platform/ViewCompositionStrategy •DisposeOnDetachedFromWindow •DisposeOnLifecycleDestroyed •DisposeOnViewTreeLifecycleDestroyed

Slide 25

Slide 25 text

Views in Compose

Slide 26

Slide 26 text

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 } ) }

Slide 27

Slide 27 text

@Composable fun 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)

Slide 28

Slide 28 text

ViewModels in Compose

Slide 29

Slide 29 text

7. ViewModels and LiveData @Composable fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) { ... }

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Theme ഐജ

Slide 32

Slide 32 text

11. Interop theming MDC-Android Compose Theme Adapter

Slide 33

Slide 33 text

୶о উղ

Slide 34

Slide 34 text

12. Accessibility in Jetpack Compose 15. Advanced state and side effects in Jetpack Compose ੉ߣ ೯ࢎী ನೣغ૑ ঋ਷ ٮՏٮՏೠ Codelab

Slide 35

Slide 35 text

4઱ର 2ߣ૩ ૑Әࠗఠ द੘ೞࣁਃ