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
130
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
Google I/O 요약만 봤다고? AI가 못 보는 진짜 이야기
veronikapj
0
44
The Know-how of Seniors in the Age of AI
veronikapj
0
64
Gemini in Android Studio I/O extended 2024
veronikapj
0
390
How to use Macrobenchmark
veronikapj
0
340
앱 성능 영혼까지 끌어올리기
veronikapj
0
1.1k
Software Productivity - Devfest Songdo 2023
veronikapj
0
1k
파이어베이스로 서비스 품질 올리기
veronikapj
0
360
What's new in Android IO23 Daejeon
veronikapj
1
290
KC23_Coroutine_Testing
veronikapj
0
160
Other Decks in Programming
See All in Programming
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
260
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
440
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
0
160
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
6
1.1k
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
DataformでPythonする / dataform-de-python
snhryt
0
150
iOS開発スターターキットの作り方
akidon0000
0
230
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Making Projects Easy
brettharned
117
6.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Statistics for Hackers
jakevdp
799
220k
Adopting Sorbet at Scale
ufuk
77
9.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bash Introduction
62gerente
614
210k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Music & Morning Musume
bryan
46
6.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
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ߣ૩ Әࠗఠ दೞࣁਃ