This work is licensed under the Apache 2.0 License Unit 4. Navigation and App Architecture Jaesung Lee GDSC HUFS #android

This work is licensed under the Apache 2.0 License

This work is licensed under the Apache 2.0 License Jaesung Lee GDSC HUFS 캠핑지기 @jdoongxx JaesungLeee

This work is licensed under the Apache 2.0 License 캠핑지기

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

PATHWAY 1 Architecture Components

This work is licensed under the Apache 2.0 License Lifecycle

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() }

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

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() }

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() }

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() }

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() }

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() }

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() }

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

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

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

This work is licensed under the Apache 2.0 License ● Unidirectional Data Flow UDF Pattern

This work is licensed under the Apache 2.0 License // GameViewModel.kt private val _uiState = MutableStateFlow(GameUiState()) val uiState: StateFlow = _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

This work is licensed under the Apache 2.0 License // GameViewModel.kt private val _uiState = MutableStateFlow(GameUiState()) val uiState: StateFlow = _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

This work is licensed under the Apache 2.0 License // GameViewModel.kt private val _uiState = MutableStateFlow(GameUiState()) val uiState: StateFlow = _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

This work is licensed under the Apache 2.0 License ● Dessert Clicker app ● Unscramble app PATHWAY 1 Codelabs

PATHWAY 2 Navigation in Jetpack Compose

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

This work is licensed under the Apache 2.0 License Destinations

This work is licensed under the Apache 2.0 License ● navController ● startDestination NavHost

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()

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

This work is licensed under the Apache 2.0 License ● Back button, Up button Back Stack

This work is licensed under the Apache 2.0 License ● Cupcake app ● Lunch Tray Practice PATHWAY 2 Codelabs

PATHWAY 3 Adapt for different screen sizes

This work is licensed under the Apache 2.0 License Adaptive Layout

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

This work is licensed under the Apache 2.0 License WindowSizeClass API // MainActivity.kt setContent { ReplyTheme { val windowSize = calculateWindowSizeClass(this) ReplyApp( windowSize = windowSize.widthSizeClass ) } }

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 -> { ... } } }

This work is licensed under the Apache 2.0 License ● https://github.com/gdgand/ComposeCamp202 2-for-Beginners PATHWAY 3 Codelabs

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 작성도 잊지 마세요!!