[Android Kotlin] Scaffold

1. Scaffold

Scaffold는 Jetpack Compose에서 머티리얼 디자인의 기본 레이아웃 구조를 제공하는 컴포저블 함수이다. Scaffold를 사용하면 상단바(TopBar), 하단바(BottomBar), 플로팅 액션 버튼(FloatingActionButton), 스낵바(Snackbar) 등을 쉽게 배치할 수 있다.
 
Scaffold 함수 주요 파라미터:

• topBar: 상단바를 정의하는 컴포저블
• bottomBar: 하단바를 정의하는 컴포저블
• floatingActionButton: 플로팅 액션 버튼을 정의하는 컴포저블
• snackbarHost: 스낵바를 호스트하는 컴포저블
• content: Scaffold의 주요 콘텐츠를 정의하는 컴포저블

 

CODE

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp {
                ScaffoldExample()
            }
        }
    }
}

@Composable
fun MyApp(content: @Composable () -> Unit) {
    MaterialTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            content()
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Top Content", fontSize = 20.sp) },
                modifier = Modifier.padding(16.dp)
            )
        },
        bottomBar = {
            BottomAppBar(
                modifier = Modifier.padding(16.dp)
            ) {
                Text("Bottom Content", fontSize = 20.sp)
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { /* TODO: Handle FAB click */ }) {
                Text("+")
            }
        }
    ) { innerPadding ->
        // 중앙 콘텐츠
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)) {
            Text(
                text = "Center Content",
                fontSize = 20.sp,
                modifier = Modifier.align(Alignment.Center)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApp {
        ScaffoldExample()
    }
}

 
Scaffold를 사용하면 TopBar와 BottomBar를 쉽게 배치할 수 있다. CustomTopBar와 CustomBottomBar를 사용하여 상단과 하단에 xml자리를 만들어 코드 구현 하던 방법에서 벗어나 이젠 컴포저블화 되어 있는 Scaffold를 사용하여 손쉽게 커스텀 하고 배치할 수 있다.
 

• Scaffold: 앱의 기본 레이아웃 구조를 정의한다.
• TopAppBar: Scaffold의 topBar 슬롯에 상단바를 배치한다.
• BottomAppBar: Scaffold의 bottomBar 슬롯에 하단바를 배치한다.
• FloatingActionButton: 플로팅 액션 버튼을 Scaffold에 추가한다.
• innerPadding: Scaffold의 콘텐츠 영역에 패딩을 적용하여 상단바와 하단바와의 간격을 유지한다.

 
코드는 Surface에 ScaffoldExample()을 담아 배경테마를 설정하고 Scaffold에서 정의가 가능한 컴포저블 각 함수를 사용한 예시코드 이다. Scaffold를 사용하면 유연성은 조금 떨어질 수 있지만 좀 더 편하게 앱을 구성할 수 있는 장점이 있는 것 같다.