[Android-Compose] 안드로이드 컴포즈 5편 예제를 통한 Scaffold 알아보기! - topBar

이번 포스팅은 Compose에서의 Scaffold라는 컴포저블 함수 중 topBar를 공부해보겠다.

# Scaffold란?

Compose는 머티리얼 구성요소를 일반 화면 패턴으로 결합하는 편리한 레이아웃을 제공합니다. 
Scaffold와 같은 컴포저블은 다양한 구성요소와 기타 화면 요소를 위한 슬롯을 제공합니다.

공식 문서에서는 위와 같이 말하고 있다.

정리를 하자면 Scaffold는 다양한 구성요소(TopBar, BottomBar, Snackbar, FloatingActionButton, drawerContent) 슬롯을 지원한다.

 

# 기본 구조

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
) 

우선 보면 많은 속성들이 있다 하지만 우리가 오늘 공부할 것은 TopBar이다.

 

※ 끝에 보면 content를 적용할 수 있게 람다가 있다.

이제 하나씩 알아보자!

---

# topBar

우선 topBar는 기본적으로 제공해주는 TopAppBar 컴포저블 함수를 사용하거나 커스텀을 할 수 있다.

아래 예제에서는 두 개 다 사용해보겠다.

topBar 사용법은 나중에 포스팅을 하도록 하겠다.

우선 사용법을 정확히 알고 싶으면 공식 링크를 참고하길 바란다.

## TopAppBar 사용

@Composable
fun ScaffoldTest() {
//Scaffold 시작
    Scaffold(
        modifier = Modifier.fillMaxSize(),
        // topBar 적용
    topBar = {
        TopAppBar(
            title = {Text("이것은 topBar 타이틀 입니다")},
            navigationIcon = {
                Icon(
                    imageVector = Icons.Default.Settings,
                    contentDescription = null
                )
            },
            actions = {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = null
                )
                Icon(
                    imageVector = Icons.Default.AddCircle,
                    contentDescription = null
                )
            }
        )
    })
    {
        Text(text = "Content 입니다!")
    }
}

## Custom topBar 사용

@Composable
fun ScaffoldTest() {
    val context = LocalContext.current
    Scaffold(
        modifier = Modifier.fillMaxSize(),
        // topBar 적용
        topBar = {
            CustomTopBar("이것은 CustomTopbar 타이틀 입니다",
            onClickBackButton = {
                Toast.makeText(context, "뒤로가기 클릭", Toast.LENGTH_SHORT).show()
            })
        })
    {
        Text(text = "Content 입니다!")
    }
}

@Composable
fun CustomTopBar(
    title: String = "",
    onClickBackButton: () -> Unit = {}
) {
    Box(
        modifier = Modifier
            .height(56.dp)
            .fillMaxWidth()
            .background(Color.LightGray),
    ) {
        IconButton(
            modifier = Modifier.align(Alignment.CenterStart),
            onClick = {
                onClickBackButton.invoke()
            }
        ) {
            Icon(Icons.Default.ArrowBack, contentDescription = null)
        }
        Text(
            modifier = Modifier.align(Alignment.Center),
            text = title,
            style = MaterialTheme.typography.subtitle1
        )
    }
}

참조
https://developer.android.com/jetpack/compose/layouts/material?hl=ko