Splash Screen

Splash Screen이란?

Splash Screen은 앱을 켰을 때 가장 먼저 짧게 보여주는 화면입니다.
WatchaPedia 앱을 예로 들면, 앱을 가장 처음 켰을 시

이런 화면이 약 1.5~2초간 나오게 되는데, 그 화면이 바로 Splash Screen입니다.

Composable 생성

이를 활용하기 위해 먼저 다음과 같이 composable을 설정해줍니다.

@Composable
fun SplashScreen(
    navController: NavHostController
) {

}

LaunchedEffect

SplashScreen은 짧은 시간동안 화면을 보여주는 것이기 때문에 delay()를 사용해야 합니다.
또한, delay()함수는 코루틴 범위 내에서 실행이 되어야 하기 때문에 LaunchedEffect를 이용해서 사용합니다.
다음과 같이 작성해줍시다.

@Composable
fun SplashScreen(
    navController: NavHostController
) {
    LaunchedEffect(key1 = true) { 
        delay(2000) // CoroutineScope
    }
}

Screen

스크린 안의 내용은 맘대로 하시면 됩니다. 다만 정해진 시간 안에 다른 화면으로 이동하는 것을 고려해야 합니다.
대부분의 Splash Screen이 있는 앱에서는 앱 로고나 회사의 로고가 들어가는 것 같습니다. 저는 왓챠피디아 클론을 하는 중이기 때문에 그 로고를 그대로 쓰겠습니다.
또한 일정 delay 이후에 어느 화면으로 갈지도 작성해 주어야 합니다.

@Composable
fun SplashScreen(
    navController: NavHostController
) {
    LaunchedEffect(key1 = true) {
        delay(2000)
        navController.navigate("home_root")
    }
    Surface(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.splash_screen),
            contentDescription = "splash"
        )
    }
}

NavHost 등록

이제 이를 사용하기 위해서는 NavHost에 composable로 등록을 해주어야 합니다.

    NavHost(
        navController = navController,
        startDestination = "splash"
    ) {
        composable(route = "splash") {
            SplashScreen(navController = navController)
        }
        // ...

뒤로가기

그런데, 이렇게만 하면 사용자가 뒤로가기를 연타했을 때 Splash Screen을 다시한번 보여주는 예상가능한 일이 발생합니다.
이를 방지하기 위해 다음과 같은 코드를 넣어줍니다.

// Splash Screen Composable
// ...
LaunchedEffect(key1 = true) {
       delay(2000)
       navController.navigate("home_root") {
           popUpTo("splash"){ inclusive = true }
       }
   }
// ...

inclusive = true를 한 이유는, 맨 처음 splash를 제외하고 스택을 비웠을 시 splash로 이동하기 때문입니다.
popUpTo()와 관련된 자세한 설명 -> https://www.youtube.com/watch?v=mLfWvSGG5c8&ab_channel=CodewithJoyce