Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Devfest 2022 Compose Camp: Unit 4

Devfest 2022 Compose Camp: Unit 4

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

Jaesung Lee

October 27, 2022
Tweet

More Decks by Jaesung Lee

Other Decks in Programming

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 Jaesung

    Lee GDSC HUFS 캠핑지기 @jdoongxx JaesungLeee
  3. 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
  4. 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() }
  5. 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
  6. 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() }
  7. 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() }
  8. 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() }
  9. 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() }
  10. 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() }
  11. 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() }
  12. 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
  13. This work is licensed under the Apache 2.0 License •

    Separation of Concerns (관심사 분리) • Drive UI from a model (Data 모델에서 UI 도출하기) Android App Architecture
  14. This work is licensed under the Apache 2.0 License •

    UI elements (Jetpack Compose) • State Holder (ViewModel) UI Layer
  15. This work is licensed under the Apache 2.0 License •

    Unidirectional Data Flow UDF Pattern
  16. 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
  17. 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
  18. 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
  19. This work is licensed under the Apache 2.0 License •

    Dessert Clicker app • Unscramble app PATHWAY 1 Codelabs
  20. This work is licensed under the Apache 2.0 License Compose

    Navigation 2 3 4 1 Destinations NavHost NavController Route
  21. This work is licensed under the Apache 2.0 License •

    navController • startDestination NavHost
  22. 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()
  23. 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
  24. This work is licensed under the Apache 2.0 License •

    Back button, Up button Back Stack
  25. This work is licensed under the Apache 2.0 License •

    Cupcake app • Lunch Tray Practice PATHWAY 2 Codelabs
  26. This work is licensed under the Apache 2.0 License Material

    Design Breakpoint Range https://m3.material.io/foundations/adaptive-design/large-screens/overview
  27. This work is licensed under the Apache 2.0 License WindowSizeClass

    API // MainActivity.kt setContent { ReplyTheme { val windowSize = calculateWindowSizeClass(this) ReplyApp( windowSize = windowSize.widthSizeClass ) } }
  28. 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 -> { ... } } }
  29. This work is licensed under the Apache 2.0 License •

    https://github.com/gdgand/ComposeCamp202 2-for-Beginners PATHWAY 3 Codelabs
  30. 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 작성도 잊지 마세요!!