Jetpack Compose에서 UI 화면 구성과 전환(scaffold, box, navHost)

안녕하세요. 오늘은 Jetpack Compose에서의 UI화면 구성과 전환 그리고 디자인에 관하여 작성해보겠습니다.

 

오늘 알아볼 내용을 요약하자면

1. scaffold를 이용한 기본적인 화면 구조만들기

2. 만든 화면에 대하여 modifier을 이용한 각 composable 스타일과 동작 정의

3. box를 이용한 UI구성

4. navController와 navHost를 이용한 화면 전환 제어

 

이제 본격적으로 시작해보겠습니다.

 

1. Scaffold

참조문서(android developer 공식문서)

https://developer.android.com/develop/ui/compose/components/scaffold?hl=ko

Jetpack Compose  |  Android Developers

 

Scaffold는 Jetpack Compose의 기본적인 화면 구조를 쉽게 만들 수 있게 해줍니다. 

일반적으로 앱의 상단 바, 하단 내비게이션 바, 플로팅 액션 버튼 등을 포함한 UI 레이아웃을 구성하는 데 사용됩니다.

 

주요 구성요소

- topBar: 상단 앱 바를 정의합니다.
- bottomBar: 하단 바를 정의합니다.
- floatingActionButton: 플로팅 액션 버튼을 추가합니다.
- drawerContent: 드로어 메뉴를 정의합니다.
- content: 화면의 주요 내용을 담습니다.

 

아래는 Scaffold의 사용 예시입니다.

@Composable
fun SDScreen(
    viewModel: SecurityViewModel
) {
    val navController = rememberNavController()

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            if(currentRoute != "securityNav" && currentRoute != "login" && currentRoute != "join"){
                MainTopAppBar(navController = navController)
            }
        },
        bottomBar = {
            MyBottomNavigation(
                containerColor = mediumBlue,//Color.Red,
                contentColor = Color.White,
                indicatorColor = lightBlue,
                navController = navController
            )
        }
    ) { 
    }
}

 

 

2. Modifier

이번에는 Scaffold에서 사용한 Modifier에 대하여 알아보겠습니다.
여기서 Modifier는 Jetpack Compsoe의 핵심 UI 구성 요소입니다.

 

Modifier는 각 컴포저블의 스타일과 동작을 정의하는 데 사용됩니다. 

Modifier은 다양한 함수와 속성들을 체이닝하여 컴포저블의 크기, 위치, 배경색, 클릭 가능성, 패딩 등을 지정할 수 있습니다.

 

 

주요 Modifier 함수

-  padding(): 컴포저블에 패딩을 추가합니다.
- fillMaxSize(): 부모 레이아웃의 전체 크기를 채웁니다.
- background(): 배경색을 지정합니다.
- clickable(): 클릭 가능한 동작을 추가합니다.
- border(): 테두리를 추가합니다.
- size(): 고정된 크기를 설정합니다.

 

아래는 Modifier의 사용 예시입니다.

Text(
    text = "Hello, World!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.LightGray)
        .clickable { /* 클릭 시 동작 */ }
)

 

 

3. Box 

참조문서(android developer 공식문서)

https://developer.android.com/develop/ui/compose/layouts/basics?hl=ko

Compose 레이아웃 기본사항  |  Jetpack Compose  |  Android Developers

 

Box는 겹치는 UI 요소를 배치할 때 유용한 컴포저블입니다.

여러 자식 컴포저블을 쌓을 수 있으며, 자식 간의 위치를 쉽게 조정할 수 있습니다.

 

 

주로 Box는 'a'라는 요소를 'b'라는 요소 위에 놓는(겹쳐서) 상황에 주로 사용합니다.

 

아래는 Box의 사용 예시입니다.

@Composable
fun SDScreen(
    viewModel: SecurityViewModel
) {
    val navController = rememberNavController()

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            if(currentRoute != "securityNav" && currentRoute != "login" && currentRoute != "join"){
                MainTopAppBar(navController = navController)
            }
        },
        bottomBar = {
            MyBottomNavigation(
                containerColor = mediumBlue,//Color.Red,
                contentColor = Color.White,
                indicatorColor = lightBlue,
                navController = navController
            )
        }
    ) { innerPadding ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)) {

            RootNavHost(
                navController = navController,
                startDestination = "securityNav",
                usersRepository = usersRepository
            )

        }
    }
}

 

저의 경우 Box를 BottomNavigation에 따라 view를 다르게 해주기 위해 사용하였습니다.

 

 

4. NavController

NavController는 화면 간의 탐색을 제어하는 역할을 합니다. 

NavHost와 함께 사용되며, 화면 이동, 뒤로가기, 인자 전달 등을 처리할 수 있습니다.

 

val navController = rememberNavController()

 

저의 경우 SDScreen에 위 코드를 사용하여 navController를 사용하였습니다.

 

 

5. NavHost

NavHost는 Jetpack Compose에서 화면 간의 탐색을 관리하는 컴포저블입니다. 

NavController를 사용해 현재 화면 상태를 추적하고, 여러 화면으로의 이동을 처리합니다.

 

 

 

4번과 5번에서 말한 NavHost와 NavController를 이용하여 Jetpack Compose에서 화면 전환을 합니다.

 

우선 MyNavHost라는 composable을 만들어 각 화면의 route를 지정해줍니다.

 

@Composable
fun MyNavHost(
    modifier: Modifier = Modifier,
    navController: NavHostController,
    startDestination: String,
){
    val context = LocalContext.current

    NavHost(
        modifier = modifier,
        navController = navController,
        startDestination = startDestination
    ){
        composable(route = "security"){
            SecurityScreen(navController = navController)
        }

        composable(route = SecurityNav.Login.title){
            LoginScreen(
                navController = navController,
                viewModel = SecurityViewModel(context, usersRepository),
                modifier = Modifier
                    .fillMaxSize()

            )
        }

        composable(route = SecurityNav.Join.title){
            JoinScreen(
                navController = navController,
                modifier = Modifier
                    .fillMaxSize()
            )
        }
    }

}

 

이후 MyNavHost 안에 등록된 composable끼리 화면 이동을 하고 싶다면

navController.navigate("원하는 composable route")

 

이 코드를 사용하면 됩니다.

 

만약 현재 화면에서 이전화면으로 이동하고 싶다면

navController.popBackStack()

 

이 코드를 사용하면 됩니다.

 

 

 

여기까지 Jetpack Compose에서의 UI화면 구성과 전환 그리고 디자인에 관하여 알아보았습니다.

다음 글은 Kotlin coroutine과 비동기에 관한 주제로 돌아오겠습니다.