Android(Kotlin), Compose의 NavController 활용하기 Splash, Fragment만들기

0. 개요

기존의 Android Studio에선 AndroidManifest.xml에서 Theme를 무엇을 쓸 지 정해주고 res폴더에서 layout폴더를 만들어 xml로 UI를 작성해주고 MainActivity에서 바인딩을 하든 FindbyId()를 사용하든 하여 UI의 요소들을 제어했다. Compose는 이러한 절차들을 가볍게해주는 라이브러리이다.(xml이 아닌 kotlin으로 UI를 만들 수 있다.)

https://developer.android.com/jetpack/compose/documentation?hl=ko

• 위의 공식문서에서 Compose의 모든 것을 살펴볼 수 있다.
• 이 글에선 Compose를 설치하고 화면을 구현하고 화면을 전환되는데 사용되는 NavController에 대해서 다룰 것이다.

1. NavController 구현

1) build.grade(module: modulename)

dependencies {
    def nav_version = "2.5.3"
    def comopose_version = " 1.5.3"

	implementation "androidx.compose.ui:ui:$comopose_version"
    implementation "androidx.navigation:navigation-compose:$nav_version"
    // 이외 compose관련 라이브러리와 화면이동에 따른 객체, 변수, 상태등을 관리하기 위해 
    // 추가적으로 설치할 것이 필요할 수 있다. 특히 코루틴 관련 잘 고려하시길
}

2) MainActivity.kt

class MainActivity : ComponentActivity() {

	override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController() //앱의 화면과 각 화면상태를 구성하는 컴포저블의 백스택을 추척

            NavHost(navController = navController, startDestination = "splash_screen") // 각 화면의 고유링크를 지정, String으로 작성해야함.
            {
                composable("splash_screen") {
                    SplashView().SplashScreen(navController = navController)
                }
                composable("main_screen") {
                    MainView().Maincreen(navController = navController)
                }
            }
        }
    }
}

2. Splash화면

1) Splash화면이란?

• 스플래쉬화면이란 어플리케이션이 켜지기 전 나오는 화면을 지칭합니다.
• 이는 브랜딩의 목적이 있으며 필요할 수도있고 아닐 수도 있는 구성요소
• https://brunch.co.kr/@kangsigner/1 <- 이분께서 좋은글을 작성해 주셨다.

2) Splash 구현

class SplashView{
    @Composable
    fun SplashScreen(navController: NavController) {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            // 여기에는 로고나 스플래시 이미지를 추가할 수 있습니다.
            Image(
                painter = painterResource(id = R.drawable.splash_image),
                contentDescription = "splash_image"
            )

            LaunchedEffect(key1 = true) { // key1 = true이기 때문에 LuanchedEffedt가 항상 실행된다.
                delay(2000) // 2초후 
                navController.navigate("main_screen") // main_screem으로 이동
            }
        }
    }
}

이제 MainView().MainScreen을 Compose를 활용하여 구현해주시면 됩니다.

3. Fragment 만들기

1) Fragment란?

• 동작 또는 Activity 내에서 UI의 일부를 나타낸다. 전통적인 Android Ui개발에선 Frgment를 생성하기위해 여러가지 설정을 해주어야하지만 Compose를 활용한다면 NavCotrller로 해결이 가능하다.
• 급하지 않다면 https://junghun0.github.io/2019/06/08/android-fragment/ <- 이 분의 글을 읽어보셔서 Fragment에 대해 알아보시길 바랍니다. 자체적인 생명주기가 있기 때문에 중요한 개념입니다.

2) Fragment 구현

• MainActivity.kt(만약 viewModel없다면 viewModel을 매개변수로 받지 않으면 된다.)

class MainActivity : ComponentActivity(){
	private lateinit var viewModel: MyViewModel
    
	override fun onCreate(savedInstanceState: Bundle?){
    	super.onCreate(savedInstanceState)
        viewModel = MyViewModel
        
        setContent{
        	val navController = rememberNavController()
            MyApp(navController)
        }
        
    }
    
  	@Composable
  	fun MyApp(navController: NavHostController) {
  		NavHost(navController, startDestination = "first") {
          	composable("first"){ FirstFragment().FirstView(navController, viewModel)}
        	composable("second"){ SecondFragment().SecondView(navController, viewModel)}
        }
    }
 }

• Fragment 화면 구현

// FirstFragment
class FirstFragment{
	@Comosable
    fun FirstView(navCotroller:NavController, viewModel: MyViewModel){
      val viewModelValue by viewModel..... // 당신이 viewModel에서 관리할 변수
      
      	// viwModel 관련 로직
        // ...
    
       // 당신이 구현할 첫번째 프래그먼트 UI
      Column(){
		...
        
        Button(// 프래그먼트를 이동하기 위한 버튼
        	onClick = { navController.navigate("second") },
            colors = ButtonDefaults.buttonColors(backgroundColor = Color.Gray))
                { Text("두번째 프래그먼트") }
      	}
    }
}

//SecondFragment
class SecondFagement{
	@Comosable
    fun SecondView(navCotroller:NavController, viewModel: MyViewModel){
      val viewModelValue by viewModel..... // 당신이 viewModel에서 관리할 변수
      
      	// viwModel 관련 로직
        // ...
    
       // 당신이 구현할 두번째 프래그먼트 UI
      Column(){
        Row( // 상단의 뒤로가기 버튼
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ){
                IconButton(onClick = { navController.popBackStack() }) {// 이전화면으로 이동
                    Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "뒤로 가기")
                    viewModel.updateSelectedCurrency(viewModel.lastSelectedCurrency)
                }

            }
        }     
        
        // 두번째 프래그먼트 UI
        // ...
    }
}

4. 결론

• Compose로 UI구현에 있어서 NavController는 단순한 화면 전환 뿐만이 아니라 화면 전환에서의 여러가지 상태를 관리하는데 있어서 강력한 도구이다.