[Jetpack Compose] TopAppBar(Toolbar) 구현하기

안녕하세요.

 

오늘은 Jetpack Compose내 TopAppBar 컴포넌트를 구현해 보도록 하겠습니다.

 

TopAppBar는 이전에 안드로이드 어플리케이션에서 Toolbar/AppBar라고 불리는 컴포넌트입니다.

 

 

TopAppBar 컴포넌트는 아래와 같이 다양한 매개변수를 받습니다.

 

title : 제목을 나타내는 변수입니다. 필수값입니다.

backgroundColor : 툴바 색상을 지정합니다.

contentColor: 툴바 내 아이템의 색상을 지정합니다.

navigationIcon: 툴바 첫번째 아이콘을 지정합니다.

actions: 툴바에 여러 메뉴들을 만들 수 있습니다.

 

 

STEP 01: 제목

@Composable
fun ToolbarWithTitle(name: String) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = name) },
            )
        }
    ) {

    }
}

@Preview(showBackground = true)
@Composable
fun ToolbarWithTitlePreview() {
    JetToolbarTheme {
        ToolbarWithTitle(name = "Toolbar With Title")
    }
}

 

 

 

 

STEP 02: 네비게이션 아이콘 

@Composable
fun ToolbarWithTitleAndNavigationIcon(name: String) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = name) },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Menu"
                        )
                    }
                },
            )
        }
    ) {

    }
}

@Preview(showBackground = true)
@Composable
fun ToolbarWithTitleAndNavigationIconPreview() {
    JetToolbarTheme {
        ToolbarWithTitleAndNavigationIcon(name = "Toolbar With Title And NavigationIcon")
    }
}

 

 

STEP 03: 툴바 메뉴

@Composable
fun ToolbarWithMenu(name: String) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = name) },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Menu"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.Share,
                            contentDescription = "Share",
                            tint = Color.White
                        )
                    }
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.MoreVert,
                            contentDescription = "MoreVert",
                            tint = Color.White
                        )
                    }
                }
            )
        }
    ) {

    }
}

@Preview(showBackground = true)
@Composable
fun ToolbarWithMenuPreview() {
    JetToolbarTheme {
        ToolbarWithMenu(name = "Toolbar With Menu")
    }
}

 

 

STEP 04: 색상 적용하기

@Composable
fun ToolbarSample(name: String) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = name) },
                contentColor = MaterialTheme.colors.primary,
                backgroundColor = Color.Yellow,
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Menu"
                        )
                    }
                },
                elevation = 12.dp,
                actions = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.Share,
                            contentDescription = "Share",
                            tint = MaterialTheme.colors.primary
                        )
                    }
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.MoreVert,
                            contentDescription = "MoreVert",
                            tint = MaterialTheme.colors.primary
                        )
                    }
                }
            )
        }
    ) {

    }
}

@Preview(showBackground = true)
@Composable
fun ToolbarSamplePreview() {
    JetToolbarTheme {
        ToolbarSample(name = "Toolbar Sample")
    }
}