Devfest 2022 Compose Camp: Unit 4

GDG Korea Android Compose Camp 비기너 코스 Unit 4 발표 자료 입니다.

Transcript

1. This work is licensed under the Apache 2.0 License Unit 4. Navigation and App Architecture Jaesung Lee GDSC HUFS #android
2. This work is licensed under the Apache 2.0 License
3. This work is licensed under the Apache 2.0 License Jaesung Lee GDSC HUFS 캠핑지기 @jdoongxx JaesungLeee
4. This work is licensed under the Apache 2.0 License 캠핑지기
5. This work is licensed under the Apache 2.0 License TOPIC - Unit 4 PATHWAY 1: Architecture Components PATHWAY 2: Navigation in Jetpack Compose PATHWAY 3: Adapt for different screen sizes Today’s Schedule
6. PATHWAY 1 Architecture Components
7. This work is licensed under the Apache 2.0 License Lifecycle
8. This work is licensed under the Apache 2.0 License Activity Lifecycle // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() }
9. This work is licensed under the Apache 2.0 License Activity Lifecycle // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() } Called once during the Activity Lifecycle
10. This work is licensed under the Apache 2.0 License Case 1: Open, Close In Activity // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() }
11. This work is licensed under the Apache 2.0 License Case 1: Open, Close In Activity // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() }
12. This work is licensed under the Apache 2.0 License Case 2: Navigate back to Activity // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() }
13. This work is licensed under the Apache 2.0 License Case 2: Navigate back to Activity // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() }
14. This work is licensed under the Apache 2.0 License Case 3: Partially hide the Activity // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() }
15. This work is licensed under the Apache 2.0 License Case 3: Partially hide the Activity // MainActivity.kt override fun onCreate() { super.onCreate() } override fun onStart() { super.onStart() } override fun onResume() { super.onResume() } override fun onRestart() { super.onRestart() } override fun onPause() { super.onPause() } override fun onStop() { super.onStop() } override fun onDestroy() { super.onDestroy() }
16. This work is licensed under the Apache 2.0 License // MainActivity.kt ... override fun onDestroy() { super.onDestroy() } 1. Activity#finish 2. Configuration Changes in Compose: rememberSaveable
17. This work is licensed under the Apache 2.0 License • Separation of Concerns (관심사 분리) • Drive UI from a model (Data 모델에서 UI 도출하기) Android App Architecture
18. This work is licensed under the Apache 2.0 License • UI elements (Jetpack Compose) • State Holder (ViewModel) UI Layer
19. This work is licensed under the Apache 2.0 License • Unidirectional Data Flow UDF Pattern
20. This work is licensed under the Apache 2.0 License // GameViewModel.kt private val _uiState = MutableStateFlow(GameUiState()) val uiState: StateFlow<GameUiState> = _uiState.asStateFlow() _uiState.value = GameUiState( currentScrambledWord = pickRandomWordAndShuffle() ) // GameScreen.kt @Composable fun GameScreen( modifier: Modifier = Modifier, gameViewModel: GameViewModel = viewModel() ) { val gameUiState by gameViewModel.uiState.collectAsState() // ... } UI State with StateFlow
21. This work is licensed under the Apache 2.0 License // GameViewModel.kt private val _uiState = MutableStateFlow(GameUiState()) val uiState: StateFlow<GameUiState> = _uiState.asStateFlow() _uiState.value = GameUiState( currentScrambledWord = pickRandomWordAndShuffle() ) // GameScreen.kt @Composable fun GameScreen( modifier: Modifier = Modifier, gameViewModel: GameViewModel = viewModel() ) { val gameUiState by gameViewModel.uiState.collectAsState() // ... } UI State with StateFlow
22. This work is licensed under the Apache 2.0 License // GameViewModel.kt private val _uiState = MutableStateFlow(GameUiState()) val uiState: StateFlow<GameUiState> = _uiState.asStateFlow() _uiState.value = GameUiState( currentScrambledWord = pickRandomWordAndShuffle() ) // GameScreen.kt @Composable fun GameScreen( modifier: Modifier = Modifier, gameViewModel: GameViewModel = viewModel() ) { val gameUiState by gameViewModel.uiState.collectAsState() // ... } UI State with StateFlow
23. This work is licensed under the Apache 2.0 License • Dessert Clicker app • Unscramble app PATHWAY 1 Codelabs
24. PATHWAY 2 Navigation in Jetpack Compose
25. This work is licensed under the Apache 2.0 License Compose Navigation 2 3 4 1 Destinations NavHost NavController Route
26. This work is licensed under the Apache 2.0 License Destinations
27. This work is licensed under the Apache 2.0 License • navController • startDestination NavHost
28. This work is licensed under the Apache 2.0 License NavController // CupcakeScreen.kt @Composable fun CupcakeApp( modifier: Modifier = Modifier, viewModel: OrderViewModel = viewModel(), navController: NavHostController = rememberNavController() ) { Scaffold( ... ) { innerPadding -> ... NavHost( navController = navController, startDestination = CupcakeScreen.Start.name, modifier = modifier.padding(innerPadding) ) { composable(route = CupcakeScreen.Start.name) { ... } } } } • rememberNavController()
29. This work is licensed under the Apache 2.0 License // CupcakeScreen.kt NavHost( navController = navController, startDestination = CupcakeScreen.Start.name, modifier = modifier.padding(innerPadding) ) { composable(route = CupcakeScreen.Start.name) { StartOrderScreen( quantityOptions = quantityOptions, onNextButtonClicked = { ... navController.navigate( CupcakeScreen.Flavor.name ) } ) } ... } Routes
30. This work is licensed under the Apache 2.0 License • Back button, Up button Back Stack
31. This work is licensed under the Apache 2.0 License • Cupcake app • Lunch Tray Practice PATHWAY 2 Codelabs
32. PATHWAY 3 Adapt for different screen sizes
33. This work is licensed under the Apache 2.0 License Adaptive Layout
34. This work is licensed under the Apache 2.0 License Material Design Breakpoint Range https://m3.material.io/foundations/adaptive-design/large-screens/overview
35. This work is licensed under the Apache 2.0 License WindowSizeClass API // MainActivity.kt setContent { ReplyTheme { val windowSize = calculateWindowSizeClass(this) ReplyApp( windowSize = windowSize.widthSizeClass ) } }
36. This work is licensed under the Apache 2.0 License WindowSizeClass API // ReplyApp.kt @Composable fun ReplyApp( windowSize: WindowWidthSizeClass, ... ) { ... when (windowSize) { WindowWidthSizeClass.Compact -> { ... } WindowWidthSizeClass.Medium -> { ... } WindowWidthSizeClass.Expanded -> { ... } else -> { ... } } }
37. This work is licensed under the Apache 2.0 License • https://github.com/gdgand/ComposeCamp202 2-for-Beginners PATHWAY 3 Codelabs
38. This work is licensed under the Apache 2.0 License Unit 4 코드랩을 시작해주세요. https://developer.android.com/courses/android-basics-co mpose/unit-4 Compose Camp 비기너 코스 최종 수료를 위한 PR 작성도 잊지 마세요!!