[Compose] BottomAppBar

 

원하는 ref들은 content를 사용해 추가해야함을 알 수 있다 

보통 scaffold와 함께 사용한다, 자주 사용하는 bottombar의 형식인 5가지 버튼을 공부했던 내용들을 사용해 생성해보자

 

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun WholeTest() {
    Scaffold(
        bottomBar = { MyBottomAppBar() }
    ) {  innerPadding ->

    }
}

@Composable
fun MyBottomAppBar() {
    BottomAppBar {
        ConstraintLayout(
            modifier = Modifier.fillMaxWidth()
        ) {

            val (button1, button2, button3, button4, button5) = createRefs()
            
            IconButton(
                onClick = {  },
                modifier = Modifier.constrainAs(button1) {
                    start.linkTo(parent.start)
                    end.linkTo(button2.start)
                    width = Dimension.wrapContent
                }
            ) {
                Icon(Icons.Filled.Home, contentDescription = "Home")
            }
            
            IconButton(
                onClick = {  },
                modifier = Modifier.constrainAs(button2) {
                    start.linkTo(button1.end)
                    end.linkTo(button3.start)
                    width = Dimension.wrapContent
                }
            ) {
                Icon(Icons.Filled.Favorite, contentDescription = "Favorite")
            }
            
            IconButton(
                onClick = {  },
                modifier = Modifier.constrainAs(button3) {
                    start.linkTo(button2.end)
                    end.linkTo(button4.start)
                    width = Dimension.wrapContent
                }
            ) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
            
            IconButton(
                onClick = {  },
                modifier = Modifier.constrainAs(button4) {
                    start.linkTo(button3.end)
                    end.linkTo(button5.start)
                    width = Dimension.wrapContent
                }
            ) {
                Icon(Icons.Filled.Notifications, contentDescription = "Notifications")
            }
            
            IconButton(
                onClick = {  },
                modifier = Modifier.constrainAs(button5) {
                    start.linkTo(button4.end)
                    end.linkTo(parent.end)
                    width = Dimension.wrapContent
                }
            ) {
                Icon(Icons.Filled.Settings, contentDescription = "Settings")
            }

            // 각 버튼 사이에 균등한 간격을 주기 위해 chain을 설정
            createHorizontalChain(button1, button2, button3, button4, button5)
        }
    }
}

 

화면엔 이렇게 보인ㄷㅏ ~