Compose 첫 걸음 || Compose Migration

DroidKnights 발표자료

Transcript

1. Compose 첫 걸음 || Compose Migration Juhyung Park / NAVERZ
2. Contents ❏ Compose 원리 (Composition, Layout, Drawing, etc) ❏ Compose + XML (Compose Migration) ❏ Compose + XML에서 BottomSheet 적용기
3. 들어가기전..
4. Android 레이아웃 시스템 변천사 2008 ~ 2010 2013 2014 2015 2016 2017 2018 2019 2020 Future findViewById & Casting ButterKnife Data Binding Kotlin Synthetic Generic findViewById View Binding Jetpack Compose
5. Compose 이전에는 보통.. XML view ID Source Code Activity/Fragment Binding Generate Code Bind Inject
6. Jetpack Compose @Composable view Source Code Activity/Fragment State Variable Recompose Update
7. Jetpack Compose @Composable view Source Code Activity/Fragment State Variable Recompose Update
8. Jetpack Compose @Composable view Source Code Activity/Fragment State Variable Recompose Update
10. ViewModel private val _suggestedDestinations = MutableStateFlow<List<ExploreModel>>(emptyList()) val suggestedDestinations: StateFlow<List<ExploreModel>> = _suggestedDestinations.asStateFlow() fun updatePeople(people: Int) { viewModelScope.launch { if (people > MAX_PEOPLE) { _suggestedDestinations.value = emptyList() } else { val newDestinations = withContext(defaultDispatcher) { destinationsRepository.destinations .shuffled(Random(people * (1..100).shuffled().first())) } _suggestedDestinations.value = newDestinations } } } https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
11. ViewModel private val _suggestedDestinations = MutableStateFlow<List<ExploreModel>>(emptyList()) val suggestedDestinations: StateFlow<List<ExploreModel>> = _suggestedDestinations.asStateFlow() fun updatePeople(people: Int) { viewModelScope.launch { if (people > MAX_PEOPLE) { _suggestedDestinations.value = emptyList() } else { val newDestinations = withContext(defaultDispatcher) { destinationsRepository.destinations .shuffled(Random(people * (1..100).shuffled().first())) } _suggestedDestinations.value = newDestinations } } } https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
12. ViewModel private val _suggestedDestinations = MutableStateFlow<List<ExploreModel>>(emptyList()) val suggestedDestinations: StateFlow<List<ExploreModel>> = _suggestedDestinations.asStateFlow() fun updatePeople(people: Int) { viewModelScope.launch { if (people > MAX_PEOPLE) { _suggestedDestinations.value = emptyList() } else { val newDestinations = withContext(defaultDispatcher) { destinationsRepository.destinations .shuffled(Random(people * (1..100).shuffled().first())) } _suggestedDestinations.value = newDestinations } } } https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
13. ViewModel private val _suggestedDestinations = MutableStateFlow<List<ExploreModel>>(emptyList()) val suggestedDestinations: StateFlow<List<ExploreModel>> = _suggestedDestinations.asStateFlow() fun updatePeople(people: Int) { viewModelScope.launch { if (people > MAX_PEOPLE) { _suggestedDestinations.value = emptyList() } else { val newDestinations = withContext(defaultDispatcher) { destinationsRepository.destinations .shuffled(Random(people * (1..100).shuffled().first())) } _suggestedDestinations.value = newDestinations } } } https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
14. Activity / Fragment @OptIn(ExperimentalMaterialApi::class) @Composable fun CraneHomeContent(viewModel: MainViewModel = viewModel()) { val suggestedDestinations by viewModel.suggestedDestinations.collectAsStateWithLifecycle() BackdropScaffold( modifier = modifier, ... frontLayerContent = { when (tabSelected) { CraneScreen.Fly -> { ExploreSection( title = "Explore Flights by Destination", exploreList = suggestedDestinations, onItemClicked = onExploreItemClicked ) ... https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
15. Activity / Fragment @OptIn(ExperimentalMaterialApi::class) @Composable fun CraneHomeContent(viewModel: MainViewModel = viewModel()) { val suggestedDestinations by viewModel.suggestedDestinations.collectAsStateWithLifecycle() BackdropScaffold( modifier = modifier, ... frontLayerContent = { when (tabSelected) { CraneScreen.Fly -> { ExploreSection( title = "Explore Flights by Destination", exploreList = suggestedDestinations, onItemClicked = onExploreItemClicked ) ... https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
16. Activity / Fragment @OptIn(ExperimentalMaterialApi::class) @Composable fun CraneHomeContent(viewModel: MainViewModel = viewModel()) { val suggestedDestinations by viewModel.suggestedDestinations.collectAsStateWithLifecycle() BackdropScaffold( modifier = modifier, ... frontLayerContent = { when (tabSelected) { CraneScreen.Fly -> { ExploreSection( title = "Explore Flights by Destination", exploreList = suggestedDestinations, onItemClicked = onExploreItemClicked ) ... https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
17. Activity / Fragment @OptIn(ExperimentalMaterialApi::class) @Composable fun CraneHomeContent(viewModel: MainViewModel = viewModel()) { val suggestedDestinations by viewModel.suggestedDestinations.collectAsStateWithLifecycle() BackdropScaffold( modifier = modifier, ... frontLayerContent = { when (tabSelected) { CraneScreen.Fly -> { ExploreSection( title = "Explore Flights by Destination", exploreList = suggestedDestinations, onItemClicked = onExploreItemClicked ) ... https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects
18. 컴포즈를 선택해야하는 이유는..? ❏ Kotlin 코드로 UI 작성 ❏ Adapter, ViewHolder패턴 안녕! ❏ 애니메이션 구현을 더 쉽게! ❏ 구성요소의 재사용 용이
19. Compose 원리
20. 원리를 꼭 알아야 할까..? 🤔
21. Compose, 일단 작성해봅시다 ❏ 요구사항 ❏ 안드로이드 버전별 정보 리스트 ❏ “선택하기" 버튼 하단 고정 ❏ 리스트 중 한 개만 선택가능 ❏ 선택 시 하이라이트 기능 ❏ 선택 시 “선택하기" 버튼 활성화 ❏ 같은 아이템 클릭 시 하이라이트 & 버튼 초기화
22. @Composable
23. @Composable fun AndroidVersionInfoItem( info: AndroidVersionInfo ) { Row { ... Image(painterResource(id = info.versionImageRes)) Column(...) { Text(text = "Version Name : ${info.versionName}") Text(text = "Version Number : ${info.versionNumber}, API ...") } } }
24. @Composable fun AndroidVersionInfoItem( info: AndroidVersionInfo ) { Row { ... Image(painterResource(id = info.versionImageRes)) Column(...) { Text(text = "Version Name : ${info.versionName}") Text(text = "Version Number : ${info.versionNumber}, API ...") } } }
25. suspend fun foo() { ... } val foo = suspend { ... } fun foo(param: suspend () -> Unit) { ... }
26. suspend fun foo() { ... } val foo = suspend { ... } fun foo(param: suspend () -> Unit) { ... }
27. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target( // val foo = @Composable { ... } AnnotationTarget.FUNCTION, // foo: @Composable () -> Unit AnnotationTarget.TYPE, // foo: (@Composable () -> Unit) -> Unit AnnotationTarget.TYPE_PARAMETER, // composable property getters and setters // val foo: Int @Composable get() { ... } // var bar: Int // @Composable get() { ... } AnnotationTarget.PROPERTY_GETTER ) annotation class Composable
28. suspend fun foo() { ... } val foo = suspend { ... } fun foo(param: suspend () -> Unit) { ... }
29. @Composable fun foo() { ... } val foo = @Composable { ... } fun foo(param: @Composable () -> Unit) { ... }
30. // Kotlin suspend function suspend fun foo(): String { ... } // Continuation.kt public interface Continuation<in T> { public val context: CoroutineContext public fun resumeWith(result: Result<T>) } Decompile
31. // Kotlin suspend function suspend fun foo(): String { ... } // Continuation.kt public interface Continuation<in T> { public val context: CoroutineContext public fun resumeWith(result: Result<T>) } Decompile @Composable fun foo() { /* Context ??? */ }
32. // StringResources.android.kt @Composable @ReadOnlyComposable fun stringResource(@StringRes id: Int): String { val resources = resources() return resources.getString(id) } @Composable @ReadOnlyComposable internal fun resources(): Resources { LocalConfiguration.current return LocalContext.current.resources }
33. // StringResources.android.kt @Composable @ReadOnlyComposable fun stringResource(@StringRes id: Int): String { val resources = resources() return resources.getString(id) } @Composable @ReadOnlyComposable internal fun resources(): Resources { LocalConfiguration.current return LocalContext.current.resources }
34. public fun ComponentActivity.setContent( parent: CompositionContext? = null, content: @Composable () -> Unit ) { val existingComposeView = window.decorView .findViewById<ViewGroup>(android.R.id.content) .getChildAt(0) as? ComposeView if (existingComposeView != null) with(existingComposeView) { ... setContent(content) } else ComposeView(this).apply { ... setContent(content) ... } }
35. public fun ComponentActivity.setContent( parent: CompositionContext? = null, content: @Composable () -> Unit ) { val existingComposeView = window.decorView .findViewById<ViewGroup>(android.R.id.content) .getChildAt(0) as? ComposeView if (existingComposeView != null) with(existingComposeView) { ... setContent(content) } else ComposeView(this).apply { ... setContent(content) ... } }
36. internal fun AbstractComposeView.setContent( parent: CompositionContext, content: @Composable () -> Unit ): Composition { GlobalSnapshotManager.ensureStarted() val composeView = if (childCount > 0) { getChildAt(0) as? AndroidComposeView } else { removeAllViews(); null } ?: AndroidComposeView(context).also { addView(it.view, DefaultLayoutParams) } return doSetContent(composeView, parent, content) }
37. internal fun AbstractComposeView.setContent( parent: CompositionContext, content: @Composable () -> Unit ): Composition { GlobalSnapshotManager.ensureStarted() val composeView = if (childCount > 0) { getChildAt(0) as? AndroidComposeView } else { removeAllViews(); null } ?: AndroidComposeView(context).also { addView(it.view, DefaultLayoutParams) } return doSetContent(composeView, parent, content) }
38. @Composable @OptIn(ExperimentalComposeUiApi::class) internal fun ProvideAndroidCompositionLocals( owner: AndroidComposeView, content: @Composable () -> Unit ) { val view = owner val context = view.context ... CompositionLocalProvider( LocalConfiguration provides configuration, LocalContext provides context, LocalLifecycleOwner provides viewTreeOwners.lifecycleOwner, LocalSavedStateRegistryOwner provides viewTreeOwners.savedStateRegistryOwner, LocalSaveableStateRegistry provides saveableStateRegistry, LocalView provides owner.view, LocalImageVectorCache provides imageVectorCache ) { ... } }
39. @Composable @OptIn(ExperimentalComposeUiApi::class) internal fun ProvideAndroidCompositionLocals( owner: AndroidComposeView, content: @Composable () -> Unit ) { val view = owner val context = view.context ... CompositionLocalProvider( LocalConfiguration provides configuration, LocalContext provides context, LocalLifecycleOwner provides viewTreeOwners.lifecycleOwner, LocalSavedStateRegistryOwner provides viewTreeOwners.savedStateRegistryOwner, LocalSaveableStateRegistry provides saveableStateRegistry, LocalView provides owner.view, LocalImageVectorCache provides imageVectorCache ) { ... } }
40. @Composable @OptIn(ExperimentalComposeUiApi::class) internal fun ProvideAndroidCompositionLocals( owner: AndroidComposeView, content: @Composable () -> Unit ) { val view = owner val context = view.context ... CompositionLocalProvider( LocalConfiguration provides configuration, LocalContext provides context, LocalLifecycleOwner provides viewTreeOwners.lifecycleOwner, LocalSavedStateRegistryOwner provides viewTreeOwners.savedStateRegistryOwner, LocalSaveableStateRegistry provides saveableStateRegistry, LocalView provides owner.view, LocalImageVectorCache provides imageVectorCache ) { ... } }
41. Composition Layout Draw
42. Jetpack Compose Layouts Composition Layout Drawing
43. @Composable fun AndroidVersionInfoItem(...) { Row { Image(...) Column(...) { Text(...) Text(...) } } }
44. @Composable fun AndroidVersionInfoItem(...) { Row { Image(...) Column(...) { Text(...) Text(...) } } } // UI Tree 변환작업
45. @Composable fun AndroidVersionInfoItem(...) { Row { Image(...) Column(...) { Text(...) Text(...) } } }
46. @Composable fun AndroidVersionInfoItem(...) { Row { Image(...) Column(...) { Text(...) Text(...) } } } AndroidVersionInfoItem Row Image Column Text Text
47. @Composable fun AndroidVersionInfoItem(...) { Row { Image(...) Column(...) { Text(...) Text(...) } } } AndroidVersionInfoItem Row Image Column Text Text AndroidVersionInfoItem Row Layout Image Layout Column Layout Text BasicText CoreText Layout Text BasicText CoreText Layout
48. Layout / Drawing Composition Layout Drawing Measure Place
49. Layout / Drawing Composition Layout Drawing Measure Place Measure Children
50. Layout / Drawing Composition Layout Drawing Measure Place Measure Children Decide Own Size
51. Layout / Drawing Composition Layout Drawing Measure Place Measure Children Decide Own Size Place Children
52. AndroidVersionInfoItem Row Image Column Text Text 1 measure 2 measure 3 size 1 2
53. AndroidVersionInfoItem Row Image Column Text Text 1 measure 2 measure 4 measure 5 measure 3 size 6 size 7 measure 8 size 1 2 4 5 7
54. AndroidVersionInfoItem Row Image Column Text Text 1 measure 2 measure 4 measure 5 measure 7 measure 10 size 3 size 9 size 6 size 8 size 1 2 4 5 7
55. AndroidVersionInfoItem Row Image Column Text Text 1 measure 2 measure 4 measure 5 measure 7 measure 10 size 3 size 9 size 6 size 8 size place place place place place 1 2 4 5 7
56. Modifier
57. Modifier ❏ 컴포저블 크기, 레이아웃, 동작, 및 모양 변경 ❏ 정보 추가 (ex. 접근성라벨) ❏ 사용자 입력 처리 ❏ Clickable, Scrollable, Draggable, 확대/축소등 상호작용
58. Modifier ❏ 컴포저블 크기, 레이아웃, 동작, 및 모양 변경 ❏ 정보 추가 (ex. 접근성라벨) ❏ 사용자 입력 처리 ❏ Clickable, Scrollable, Draggable, 확대/축소등 상호작용 ❏ Tree의 리프노드인 Layout Composable에 Modifier 적용
59. @Composable fun BottomButtons(isEnabled: Boolean = false) { Row( horizontalArrangement = Arrangement.Center, modifier = Modifier .fillMaxWidth() .background(Color.White) .padding(5.dp) ) { Button( onClick = { /*TODO*/ }, contentPadding = PaddingValues(12.dp), modifier = Modifier.size(130.dp, 45.dp), enabled = isEnabled ) { Text("선택하기") } } }
60. Box ( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) https://youtu.be/zMKMwh9gZuI?t=738 measure w:0-200, h:0-300
61. Box ( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) https://youtu.be/zMKMwh9gZuI?t=738 measure w:0-200, h:0-300 measure w:200, h:300
62. Box ( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) https://youtu.be/zMKMwh9gZuI?t=738 measure w:0-200, h:0-300 measure w:200, h:300 measure w:0-200, h:0-300
63. Box ( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) https://youtu.be/zMKMwh9gZuI?t=738 measure w:0-200, h:0-300 measure w:200, h:300 measure w:0-200, h:0-300 w:50, h:50
64. Box ( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) https://youtu.be/zMKMwh9gZuI?t=738 measure w:0-200, h:0-300 measure w:200, h:300 measure w:0-200, h:0-300 w:50, h:50 50*50 place 200*300 place 50*50 place
65. Compose Migration
66. 컴포즈를 도입해볼까요..? 언제 도입할까요..? Stable버전이 나왔나요..?
67. Compose Migration
68. 드디어 컴포즈 첫 적용! ❏ 당장은 서비스화면 도입은 부담 ❏ 앱 내 개발자메뉴..? ❏ 기존 XML 레이아웃 시스템에서 Compose를 어떻게 올릴 수 있을까?
69. 마이그레이션으로 얻을 수 있는것들 (희망편 😍) ❏ 컴포즈로 복잡한 View와 로직을 단순화 시킬 수 있었다 ❏ 컴포즈 라이브러리를 추가하면서 오히려 앱 사이즈가 줄었다?! ❏ 커스텀 UI 작성하는것이 매우 편해졌다 ❏ 컴포즈가 제공해주는 프리뷰기능은 기존 XML 프리뷰보다 훌륭하다 ❏ 코틀린으로 작성이 가능, 상대적으로 낮은 진입장벽
70. 마이그레이션으로 얻을 수 있는것들 (절망편 😱) ❏ 너무 새로워서 아직 몇몇 UI가 XML View 기능이 구현되지 않았었다 (지금은 많은 부분이 해소) ❏ Debug모드 시 컴포즈 퍼포먼스 차이가 커서 Debug의 어려움이 있음 ❏ 사용한 UI컴포넌트의 뜻하지 않은 버그 (핫픽스 지름길) ❏ 컴포즈 버전을 올리기 위해서는 매칭되는 코틀린 버전 변경 필요 ❏ 눈으로 일일이 확인할 수 없는 ReComposition 카운트는 오히려 코드를 다 작성한 후 자꾸 신경쓰이게 됨 ❏ XML + Compose 구조이다보니 가끔 고려하지 못한 리팩토링으로 개발공수가 늘어남
71. Why Chose Jetpack Compose for Their Android App UI
72. //Fragment, Navigation 구성요소 사용중인 경우 class NewFeatureFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy(ViewCompositionStrategy. DisposeOnViewTreeLifecycleDestroyed) setContent { NewFeatureScreen() } } } } https://developer.android.com/jetpack/compose/interop/migration-strategy?hl=ko
73. // ViewBinding 사용, 기존 View Layout 사용 시 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...> <TextView.../> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
74. // ViewBinding 사용, 기존 View Layout 사용 시 class ExampleFragment : Fragment() { ... override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { _binding = FragmentExampleBinding.inflate(inflater, container, false) val view = binding.root binding.composeView.apply { setViewCompositionStrategy(ViewCompositionStrategy .DisposeOnViewTreeLifecycleDestroyed) setContent { ... } } return view } ... }
75. // Compose UI 내 Android View 계층구조 사용 시 // (Compose에서 아직 사용하지 못하는 View 사용 시) @Composable fun CustomView() { AndroidView( modifier = ... factory = { context -> MyView(context) }, update = { view -> ... } ) }
76. Compose + XML BottomSheet 적용기
77. XML View Layout Compose BottomSheet?
78. 제약사항 XML View <LinearLayout ...> <UnityView .../> <TextView .../> <View .../> </LinearLayout> ❏ 당장 기능화면을 ComposeView 로 변경할 수 없음
79. 제약사항 XML View <LinearLayout ...> <UnityView .../> <TextView .../> <View .../> </LinearLayout> ❏ 당장 기능화면을 ComposeView 로 변경할 수 없음 ❏ ModalBottomSheetLayout을 사용할 수 없음
80. 제약사항 ❏ 당장 기능화면을 ComposeView 로 변경할 수 없음 ❏ ModalBottomSheetLayout을 사용할 수 없음 ❏ 다른 화면에서도 사용할 수 있는 BottomSheet로, 한 화면에 한정X (대부분 XML View) BottomSheetDialogFragment
81. 제약사항 ❏ 당장 기능화면을 ComposeView 로 변경할 수 없음 ❏ ModalBottomSheetLayout을 사용할 수 없음 ❏ 다른 화면에서도 사용할 수 있는 BottomSheet로, 한 화면에 한정X (대부분 XML View) ❏ 어떻게든 컴포즈를 BottomSheet에 적용하고 싶음 BottomSheetDialogFragment
82. 이슈 (BottomSheetDialogFragment + Compose) ❏ BottomSheet 상단 Anchor 이슈 ❏ Compose ModalBottomSheet와 BottomSheetDialogFragment 혼용 이슈
83. Column { ImageView(...) Row { Text(text = "Title") } ... } Title
84. Column { ImageView(...) Row { Text(text = "Title") } LazyColumn { ... } } BottomSheetDialogFragment LazyColumn Title Expandable
85. Column { ImageView(...) Row { Text(text = "Title") } LazyColumn { ... } } BottomSheetDialogFragment LazyColumn Title Expandable
86. Column { ImageView(...) Row { Text(text = "Title") } LazyColumn { ... } } BottomSheetDialogFragment LazyColumn Title Expandable
87. Column { LazyColumn { item { ImageView(...) } item { Text(text = "Title") } } LazyColumn { ... } } BottomSheetDialogFragment LazyColumn Title Expandable
88. ModalBottomSheet/BottomSheetDialogFragment 혼용 ModalBottomSheet BottomSheetDialogFragment Case A 1. ModalBottomSheet 2. BottomSheetDialogFragment.show()
89. ModalBottomSheet/BottomSheetDialogFragment 혼용 ModalBottomSheet BottomSheetDialogFragment Case A 1. ModalBottomSheet 2. BottomSheetDialogFragment.show()
90. ModalBottomSheet/BottomSheetDialogFragment 혼용 Case B 1. BottomSheetDialogFragment.show() 2. ModalBottomSheet BottomSheetDialogFragment ModalBottomSheet
91. ModalBottomSheet/BottomSheetDialogFragment 혼용 Case B 1. BottomSheetDialogFragment.show() 2. ModalBottomSheet BottomSheetDialogFragment ModalBottomSheet
92. ❏ ModalBottomSheet는 ComposeView의 Window 즉, 디바이스 Window하위 ComposeView 내 노출하기 때문? ❏ BottomSheetDialogFragment는 addFragment 형태로 노출되며 ComposeView보다 상위 Window에서 노출하기 때문? ModalBottomSheet/BottomSheetDialogFragment 혼용
93. Wrap Up ❏ Compose, 지난 레이아웃의 다른 형태로 제공 ❏ 트렌드의 변화 (명령형 UI -> 선언형 UI) ❏ 러닝커브가 낮은 편 ❏ 생산성 효율 Up ❏ 한 번만 써본 사람은 없을정도 ❏ 원리는 몰라도 좋지만 도움은 된다 ❏ Compose 첫 걸음은, Migration 부터