[Compose] 컴포즈 공부하기 12 - BottomAppBar

BottomAppBar도 TopAppBar와 동일하게 기본적으로 AppBar를 구현하여 만든다.

@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    cutoutShape: Shape? = null,
    elevation: Dp = AppBarDefaults.BottomAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
){
    val fabPlacement = LocalFabPlacement.current
    val shape = if (cutoutShape != null && fabPlacement?.isDocked == true) {
        BottomAppBarCutoutShape(cutoutShape, fabPlacement)
    } else {
        RectangleShape
    }
    AppBar(
        backgroundColor,
        contentColor,
        elevation,
        contentPadding,
        shape,
        modifier,
        content
    )
}

 

TopAppBar에 비하면 조금 더 단순한 느낌이다.

BottomAppbar를 넣는다고 자동으로 bottom에 붙지는 않는다.

scaffold를 사용하거나 BottomAppBar(modifier = Modifier.align(Alignment.Bottom)) 이런 식으로 align을 주어야 bottom에 위치하게 된다.

 

예시는 간편하게 Scaffold를 사용하여 보여주겠다😁

코드를 참고하여 하나씩 확인해보자!

 

[기본 예시 코드]

val scaffoldState = rememberScaffoldState()

Scaffold (
    scaffoldState = scaffoldState,
    bottomBar = {
        BottomAppBar{
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)) {
                Text("메뉴1")
            }
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)
            ){
                Text("메뉴2")
            }
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)
            ){
                Text("메뉴3")
            }
        }
    }
) {}

 

1. backgroundColor, contentColor

   val scaffoldState = rememberScaffoldState()
   Scaffold (
        scaffoldState = scaffoldState,
        bottomBar = {
            BottomAppBar(
                backgroundColor = Color.Blue,
                contentColor = Color.Red
            ){
                Text("메뉴 : ")
                IconButton(onClick = {}) {
                    Icon(Icons.Filled.Send,null)
                }
                Button(
                    onClick = {},
                    modifier = Modifier.weight(1f)) {
                    Text("메뉴1")
                }
                Button(
                    onClick = {},
                    modifier = Modifier.weight(1f)
                ){
                    Text("메뉴2")
                }
                Button(
                    onClick = {},
                    modifier = Modifier.weight(1f)
                ){
                    Text("메뉴3")
                }

            }
        }
    ) {}

backgroundColor와 contentColor는 말 그대로 뒤의 색과 내용물의 색으로 이해해주면 되고, 

Text나 Icon은 contentColor에 따라 색이 변하는데  Button은 그대로 Material 형식 그대로 나오게 된다.

(위의 이유는 차후 링크를 추가해놓겠다!!)

 

2. cutoutShape

cuotoutShape으로 넣은 shape이 BottomAppBar에 더해지는 것으로 FloatingActionButton을 안에 넣는 등을 구현할 수 있습니다.

Scaffold (
    scaffoldState = scaffoldState,
    bottomBar = {
        BottomAppBar(
            cutoutShape = CircleShape
        ){
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)) {
                Text("메뉴1")
            }
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)
            ){
                Text("메뉴2")
            }
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)
            ){
                Text("메뉴3")
            }

        }
    },
    floatingActionButton = {
           IconButton(onClick = {}, modifier = Modifier.background(Color.Blue)) {
                Icon(Icons.Filled.Send,null)
            }
    },
    isFloatingActionButtonDocked = true,
    floatingActionButtonPosition = FabPosition.Center
) {}

RoundedConnerShape(50)으로 이미 구현되어 있는 CircleShape을 가져와서 넣어주었고, 

floatingActionButton에 IconButton, isFloatingActionButtonDocked을 true로 해주고 position도 center로 바꿔주었다.

position은 필요에 따라 선택해주면 될 것이다!

 

cutoutShape = RoundedCornerShape(10)

위의 코드처럼 바꾸면 아래와 같이 나온다!

 

필요한 모양에 따라 변경해주면 된다 😁

 

 

++ 참고

contentShape을 넣지 않거나 isFloatingActionButtonDocked = false (default)로 두었을 경우는 아래와 같이 나온다!

cutoutShape을 넣지 않았을 경우 &&  (isFloatingActionButtonDocked = true)

 

isFloatingActionButtonDocked = false 일 경우 (default)

위의 예시를 통해 docked되고 shape을 넣어줘야 제대로 원하는 결과값을 얻을 수있다는 것을 알 수 있다!

 

3. elelvation, contentPadding

Scaffold (
    scaffoldState = scaffoldState,
    bottomBar = {
        BottomAppBar(
            elevation = 30.dp,
            contentPadding = PaddingValues(20.dp)
        ){
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)) {
                Text("메뉴1")
            }
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)
            ){
                Text("메뉴2")
            }
            Button(
                onClick = {},
                modifier = Modifier.weight(1f)
            ){
                Text("메뉴3")
            }

        }
    }
) {}

 

TopAppBar와 동일하게 여기서도 elevation을 넣으면 원하는 대로 나오지 않는다...😅

언젠간 찾으면 수정시켜 놓겠다!