Android발행일 2024. 11. 20.원본 https://blog.naver.com/jword_/223667331083 ↗

[Jetpack Compose] navigation 구조 및 적용

[Jetpack Compose] navigation 구조 및 적용 — #개발자의도구들 🚨📝 📖 📒✏️💡🔍 AI스쿨 msa기반 java 백엔드 코스 중에 공부한 내용을 ...

#Android Studio#Naver Blog

#개발자의도구들

🚨📝 📖 📒✏️💡🔍

​

AI스쿨 msa기반 java 백엔드 코스 중에 공부한 내용을 작성하였습니다

\* 현재 Spring x 프로젝트를 진행하고 있습니다. 전체 목차를 보시려면 여기를 눌러주세요.

\* 해당 프로젝트 이전에 공부한 내용을 보시려면 여기를 눌러주세요.

안드로이드에서 화면간 이동 설정

Jetpack compose

웹이든 앱이든 프론트의 화면간 전환은 필수 요소입니다. 웹에서는 보통 html태그에 url을 연결해서 구현하건, SPA의 경우에는 JS로 UI를 변경하기도 합니다. 안드로이드에서도 마찬가지인데 어떤 버튼을 클릭하면 홈면이라던가, 로그인, 회원가입 화면 등을 사용자에게 화면으로 띄어줘야 하는데, 이 때 navigatin 기능을 사용할 수 잇습니다.

💡 현재 Jetpack compose를 사용하여 앱 화면을 구현하고 잇습니다. Jetpack compose에 대한 내용은 차후 글을작성하도록 하겠습니다.

Android에서 화면간 이동을 구현하기 위해 compose에서 지원하는 naviagion 기능의 설정, 구조, 그리고 적용까지 해보겠습니다.

Index

  • Purpose
  • Navigation Structure
  • Code
  • Setting
  • XNavHost
  • Question
  • Answer
  • Feedback
💡 Tips

Purpose

navigation기능을 이용하여 Jetpack compose의 화면간 이동을 구현한다.

Navigation Structure

compose내의 라이브러리를 사용하기 때문에 해당 구조에 대해 공부할 필요성이 있습니다.

이미지

​

  • Navigation Component: Libary 그 자체

​

  • Nav Controller: library에서 구현된 Controller class Host를 구현하기 위해 필수로 넘겨줘야 합니다.(네비게이션 상태관리, 백 스택관리)
  • Nav Host: 실제 화면을 표시하는 컨테이너 입니다. Nav Graph와 Controller를 연결해준다.
  • NavGraph: 개발자가 앱의 모든 Destination을 등록하면 이 Graph에 등록된다. Controller는 이 Graph를 참고하여 Host를 통해 화면을 표시한다.

Code

🧑‍💻 build.gradle
javascript 코드 예제
                                    implementation("androidx.navigation:navigation-compose:2.7.3") // 최신 버전
🧑‍💻 XNavHost
javascript 코드 예제
                                    package com.example.myapplication.navigation

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun XNavHost(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(), // liabrary에서 Controller 가져옴
    startDestination: String = "home"
) {
    NavHost(   // compose에 구현된 NavHost이다.
        modifier = modifier,
        navController = navController, // NavHost를 사용하려면 Controller를 필수로 넘겨줘야 한다.
        startDestination = startDestination
    ) {
        // nav graph
        composable("home") { HomeScrren() }      // Graph를 생성 : detination을 명시-표시할 Screen
        composable("log-in") { LogInScreen() }
        composable("sign-up") { SignUpScreen() }

    }
}

NavHost를 보시면 router(destination)를 등록하면 Scrre()컴포저블(개발자가 만든 UI)을 받아와서 화면에 뿌려줍니다.

🧑‍💻 MainActivity
javascript 코드 예제
                                    class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                XNavHost()
            }
        }
    }
}
javascript 코드 예제
                                    @Composable
fun MyApp() {
    MyApplicationTheme {
        XNavHost()
    }
}

일반적으로 앱의 메인 UI구조를 정의하는 곳에서 사용됩니다. 혹은 MyApp에 사용해도 됩니다.

​

처음에는 class가 많아서 조금 헷갈렸는데 익숙해지면 편하게 사용할 수 잇습니다.

Question

🤔 write Question

Question

🙋‍♂️

​