[Android][Kotlin][Jetpack] 화면 전환 | Activity 전환 (혼자 앱 개발 #2)

8월에 한 내용을 이제야 정리하는 나..

 

Jetpack Compose 개발을 처음 해봐서 화면 전환 ( Activity 이동) 하는 것 부터 완전 어려웠다.

여러가지 설명을 봐도 이해가 안되서 어려워 하던 중 codelab 을 발견했다!

구글에서 제공해주는 소스로 시도하기 어려운 것에 대해 자세한 설명 + 예시 소스 가 있다.

천천히 따라하다 보면은 이해도 쏙쏙 되고, 바로 내 소스에 적용 할 수 있어서 좋다.

 

내가 따라한 code lab 은 

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#6

Jetpack Compose 기초  |  Android Developers

---

구현한 소스를 공유해보겠습니다!

나는 버튼 클릭 시 화면 전환이 동작하도록 구현!

 

버튼 구현 및 리스너 등록 (LoginScreen.kt)

@Composable
fun LoginScreenDisplay(
    modifier: Modifier = Modifier,
    onLoginButtonClicked: (Int) -> Unit // 버튼 클릭 리스너
) {
    Column(
    ...
    ) {
    ...
        Button(
            onClick = {
                onLoginButtonClicked(1) // 리스너 등록
            },
            ...
        ) {
           ...
        }
    }
}

 

불필요한 소스는 다 제거했음

 

버튼 이벤트 동작 시 화면 전환 (DoneListScreen.kt)

@Composable
fun DoneListApp(
    modifier: Modifier = Modifier,
    viewModel: DoneListViewModel = viewModel(),
) {
    val navController = rememberNavController()
    Scaffold(
        topBar = {
            DoneListAppBar(
                canNavigateBack = false,
                navigateUp = { /* TODO: implement back navigation */ }
            )
        }
    ) { innerPadding ->
        val uiState by viewModel.uiState.collectAsState()

        NavHost(navController = navController,
            startDestination = DoneListScreen.Login.name,
            modifier = modifier.padding(innerPadding)) {
            composable(route = DoneListScreen.Login.name) {
                LoginScreenDisplay(
                    onLoginButtonClicked = {
                        1
                        navController.navigate(DoneListScreen.List.name) // 화면 전환
                    }
                )
            }
            composable(route = DoneListScreen.List.name) {
                ListScreen(
                )
            }
        }
    }
}

 

NavHost에서 버튼 이벤트에 대한 동작을 정의해주고

버튼 이벤트가 발생하면 해당 동작이 실행되는 것!

 

전체 소스는 gitHub에 있습니다!

아래 커밋을 확인하면 됩니다~!

https://github.com/leehy0321/DoneList/commit/5e055cda14c3302e2b75efb89bb03721c94d2309

add list screen (empty). · leehy0321/DoneList@5e055cd

 

---

개발하면서 매일매일 간단하게라도 일기를 적었었다.

화면 전환 하는 것에서 엄청난 시간이 걸렸는데, 개발 당시 내가 정리했던 개발 일기를 보면

- 2023-08-10 예제 소스

   - 샘플 소스 찾아 둠. 일단 샘플 소스 이해 먼저 하는게 좋을 것 같아서 보는 중

    - https://androidexample365.com/todo-application-made-with-jetpack-compose/

- 2023-08-11

    - 먼저 버튼을 누르면 리스트 화면으로 넘어가는 것을 구현하고 싶은데.. 어떻게 화면 전환을 해야할지 모르겠다.. Jetpack 쓰는 샘플 코드 찾았다. ㅠ_ㅠ 어렵고만..

    - https://androidexample365.com/a-simple-android-application-containing-login-and-registration-built-using-jetpack-compose/ 

    - https://developer.android.com/codelabs/basic-android-kotlin-compose-navigation?hl=ko#3 따라하기 하는 중 

- 2023-08-28

    - 오늘도 버튼 클릭하면 화면 전환을 이해하기 위해 code lab에서 열심히 서칭중..

    - UI 관련 찾아보다가 리스트에서 보면 좋을만한 코드랩 있길래 가져와봄

    - UI 만드는 완전 Compose 기본!! → 만약에 리스트 항목 클릭 시 확장 동작 작업이 필요하면 참고하면 좋을 듯! https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#6 

- 2023-11-05 화면 전환 테스트 성공..! 

    - 드디어 화면 전환 성공했다…. 미쳐따… 후후 일단 로그인 버튼 누르면 화면 전환 되는 것 까지는 성공! 근데 그냥 로그인 화면 없앨까………………….. 로그인까지 하는 것은 오바인가. 쩝.. 일단 이렇게 결정!

희희 그래도 성공했다!!