Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2021 ComposeFest2021-Migration to Jetpack Compose
Search
Veronikapj
November 22, 2021
Programming
0
97
2021 ComposeFest2021-Migration to Jetpack Compose
2021 Devfest Korea Android
Jetpack Compose 코드랩 중 Migration to Jetpack Compose 설명 자료입니다.
Veronikapj
November 22, 2021
Tweet
Share
More Decks by Veronikapj
See All by Veronikapj
The Know-how of Seniors in the Age of AI
veronikapj
0
25
Gemini in Android Studio I/O extended 2024
veronikapj
0
270
How to use Macrobenchmark
veronikapj
0
240
앱 성능 영혼까지 끌어올리기
veronikapj
0
890
Software Productivity - Devfest Songdo 2023
veronikapj
0
810
파이어베이스로 서비스 품질 올리기
veronikapj
0
310
What's new in Android IO23 Daejeon
veronikapj
1
270
KC23_Coroutine_Testing
veronikapj
0
150
ComposeCamp2022 Pathway2
veronikapj
1
350
Other Decks in Programming
See All in Programming
Debugging: A Few Things You Should Know
jmatsu
1
130
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
5
220
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
cgroup v2 support in Kubeadm
kentatada
0
210
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
2
540
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
aoseyuu
2
380
CSC509 Lecture 05
javiergs
PRO
0
180
Serverless renderování Webových komponent
rarous
PRO
0
130
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
240
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
150
Kubernetes上でOracle_Databaseの運用を楽にするOraOperatorの紹介
nnaka2992
0
170
Featured
See All Featured
KATA
mclloyd
29
13k
Statistics for Hackers
jakevdp
796
220k
The Invisible Side of Design
smashingmag
297
50k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Gamification - CAS2011
davidbonilla
80
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Rails Girls Zürich Keynote
gr2m
93
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Transcript
Migrating to Jetpack Compose ߓ GDG Korea Android, Coupang [Korea
Android]
Codelab উղ
https://github.com/gdgand/ComposeFest2021 Repo fork೧ࢲ, ѐੋ ࠳ےীࢲ ೯ೞҊ, ٘۽ ԙ թӝӝ! ܻ
Fork ߉ই֬ਵन ٜ࠙ ୭नചܳ ೠߣ ࠗఌ٘۰ਃ! Repo উղ week 4-2-Migrating to Jetpack Compose
https://github.com/gdgand/ComposeFest2021
߄۽ द!
Migration ҅ദ
7 ਵ۽ بੑ
8 Views Compose Views in Compose
Views Compose
<CoordinatorLayout ...> <AppBarLayout ...> <ConstraintLayout ...> <TextView ...> <TextView ...>
</ConstraintLayout> </CoordinatorLayout> 5. Hello, Compose! fragment_plant_detail.xml
<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
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
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" />
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
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
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
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
ViewComposition Strategy
10.ViewCompositionStrategy Composable ࣻݺ ӝ
10.ViewCompositionStrategy Composable ࣻݺ ӝ ViewCompositionStrategy. DisposeOnDetachedFromWindow
10.ViewCompositionStrategy • Fragment Fragmentীࢲ ࢎਊػ Composition ࢚క(State)ܳ ೞ۰ݶ Fragment View
lifeCycle ਸ ٮۄঠ פ. • Transitions ജ ژח Window ജ ߊࢤೡ ٸ, Windowীࢲ ܻ࠙ػ റীب ComposeViewо ҅ࣘ द غ؊ۄب, ӝࠄ DisposeOnDetachedFromWindow ۚী ٮۄ ࢚క(State)о ઁؾפ. • RecyclerView ViewHolder ژח ࣻݺ ӝ ҙܻ CustomView Composable ViewCompositionStrategyܳ ٮ۽ ೧ঠ ೞח ாझ
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
class PlantDetailFragment : Fragment() { .. . ... } 10.ViewCompositionStrategy
composeView.apply { setViewCompositionStrategy( ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) setContent { MaterialTheme { PlantDetailDescription() } } }
ViewCompositionStrategy https://developer.android.com/reference/kotlin/androidx/ compose/ui/platform/ViewCompositionStrategy •DisposeOnDetachedFromWindow •DisposeOnLifecycleDestroyed •DisposeOnViewTreeLifecycleDestroyed
Views in Compose
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 } ) }
@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)
ViewModels in Compose
7. ViewModels and LiveData @Composable fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) { ...
}
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
Theme ഐജ
11. Interop theming MDC-Android Compose Theme Adapter
୶о উղ
12. Accessibility in Jetpack Compose 15. Advanced state and side
effects in Jetpack Compose ߣ ೯ࢎী ನೣغ ঋ ٮՏٮՏೠ Codelab
4ର 2ߣ૩ Әࠗఠ दೞࣁਃ