Compose FloatingActionButton 알아보기

본 게시글은 Material3를 기준으로 작성되었습니다.

FloadingActionButton

오늘은 다양하게 사용되는 FAB에 대해서 알아보겠습니다.

FAB

FloatingActionButton(
    onClick = {
    	/* ... */
    },
    containerColor = Color.Red,
    shape = CircleShape,
) {
    Icon(
        imageVector = Icons.Rounded.Add,
        contentDescription = "This is Add Fab",
        tint = Color.White,
    )
}

Large FAB

패드같이 큰 화면이나 눈에 잘 띄게 하기 위해 사용합니다.
기본 Fab보다 크기가 큽니다.

LargeFloatingActionButton(
    onClick = {
    	/* ... */
    },
    containerColor = Color.Red,
    shape = CircleShape,
) {
    Icon(
        imageVector = Icons.Rounded.Add,
        contentDescription = "This is Add Fab",
        tint = Color.White,
    )
}

Small FAB

보조 Fab으로 사용합니다.

LargeFloatingActionButton(
    onClick = {
    	/* ... */
    },
    containerColor = Color.Red,
    shape = CircleShape,
) {
    Icon(
        imageVector = Icons.Rounded.Add,
        contentDescription = "This is Add Fab",
        tint = Color.White,
    )
}

Extended FAB

확장되는 Fab 입니다.
text 속성은 필수입니다.

var isExtended = // 확장되는 조건

ExtendedFloatingActionButton(
    Icon(
        imageVector = Icons.Rounded.Add,
        contentDescription = "This is Add Fab",
        tint = Color.White,
    ),
	text = {
    	Text(text = "Add Fab", color = Color.White)
    },
    onClick = {
    	/* ... */
    },
    expanded = isExtended,
    containerColor = Color.Red,
)

하지만 위의 Fab은 가로로 길어지는 확장형으로 세부적인 동작을 위한 세로로 확장되는 Fab은 다음과 같이 사용할 수 있습니다.

CustomExpanded FAB

var isExpanded by remember { mutableStateOf(false) }

Column(horizontalAlignment = Alignment.End) {
	if (isExpanded) {
		Column(
			modifier = Modifier
				.wrapContentSize()
				.background(color = Color.White, shape = RoundedCornerShape(10.dp))
				.padding(20.dp)
		) {
			FabItem(
				title = "세부항목2",
				icon = Icons.Default.MyLocation,
				onClicked = { /* ... */ }
			)
			Spacer(modifier = Modifier.height(20.dp))
			FabItem(
				title = "세부항목1",
				icon = Icons.Default.AddIcCall,
				onClicked = { /* ... */ }
			)
		}
	}
    Spacer(modifier = Modifier.height(15.dp))
    FloatingActionButton(
    	onClick = { isExpanded = !isExpanded },
        shape = CircleShape,
        containerColor = if (isExpanded) Color.Red else Color.White
    ) {
		Icon(
			imageVector = if (isExpanded) Icons.Default.Close else Icons.Defaults.Add,
			colorFilter = ColorFilter.tint(color = if (isExpanded) Color.White else Color.Red),
			contentDescription = "This is Expand Button"
		)
	}
}
    

@Composable
fun FabItem(title: String, icon: ImageVector, onClicked: () -> Unit) {
	Row(modifier = Modifier.clickable {
		onClicked()
	}, verticalAlignment = Alignment.CenterVertically) {
		Icon(
			imageVector = icon,
			contentDescription = "FabItem Icon"
		)
		Spacer(modifier = Modifier.width(10.dp))
		Text(title)
	}
}

하단 Fab을 누르면 그 위로 Column이 펼쳐지며 Custom한 탭들이 나오고 한번 더 누르면 닫히게 됩니다.

마치며 🦊

오늘은 Scaffold에서 사용할 수 있는 FloatingActionButton의 사용법에 대해 알아보았습니다.
다양하게 커스텀하여 사용할 수 있고 bottomBar와 Scaffold의 속성인 isFloatingActionButtonDocked를 사용한다면 bottomBar와 FAB을 겹치게 만들수도 있습니다.

혹시나 잘못된 부분이나 부족한 부분이 있다면 댓글로 알려주시면 열심히 배우겠습니다.
읽어주셔서 감사합니다.