플로팅 작업 버튼 (FAB)은 사용자가 애플리케이션에서 기본 작업을 실행할 수 있는 높은 강조 버튼입니다. 사용자가 취할 수 있는 가장 일반적인 경로인 집중된 단일 작업을 촉진하며 일반적으로 화면 오른쪽 하단에 고정되어 있습니다.
FAB를 사용할 수 있는 다음 세 가지 사용 사례를 고려하세요.
- 새 항목 만들기: 메모 작성 앱에서 FAB를 사용하여 새 메모를 빠르게 만들 수 있습니다.
- 새 연락처 추가: 채팅 앱에서 FAB는 사용자가 다른 사람을 대화에 추가할 수 있는 인터페이스를 열 수 있습니다.
- 중앙 위치: 지도 인터페이스에서 FAB는 사용자의 현재 위치에 지도의 중심을 맞출 수 있습니다.
Material Design에는 다음과 같은 네 가지 유형의 FAB가 있습니다.
- FAB: 일반 크기의 플로팅 작업 버튼입니다.
- 작은 플로팅 작업 버튼: 더 작은 플로팅 작업 버튼입니다.
- 큰 플로팅 작업 버튼: 더 큰 플로팅 작업 버튼입니다.
- 확장 FAB: 아이콘 외에도 다양한 항목이 포함된 플로팅 작업 버튼입니다.
API 노출 영역
Material Design과 일치하는 플로팅 작업 버튼을 만드는 데 사용할 수 있는 컴포저블이 여러 개 있지만 매개변수는 크게 다르지 않습니다. 유의해야 할 주요 매개변수는 다음과 같습니다.
onClick: 사용자가 버튼을 누를 때 호출되는 함수입니다.containerColor: 버튼의 색상입니다.contentColor: 아이콘의 색상입니다.
플로팅 작업 버튼
일반적인 플로팅 작업 버튼을 만들려면 기본 FloatingActionButton 컴포저블을 사용합니다. 다음 예는 FAB의 기본 구현을 보여줍니다.
@Composable
fun Example(onClick: () -> Unit) {
FloatingActionButton(
onClick = { onClick() },
) {
Icon(Icons.Filled.Add, "Floating action button.")
}
}
이 구현은 다음과 같이 표시됩니다.
작은 버튼
작은 플로팅 작업 버튼을 만들려면 SmallFloatingActionButton 컴포저블을 사용합니다. 다음 예에서는 맞춤 색상을 추가하여 이 작업을 실행하는 방법을 보여줍니다.
@Composable
fun SmallExample(onClick: () -> Unit) {
SmallFloatingActionButton(
onClick = { onClick() },
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.secondary
) {
Icon(Icons.Filled.Add, "Small floating action button.")
}
}
이 구현은 다음과 같이 표시됩니다.
큰 버튼
큰 플로팅 작업 버튼을 만들려면 LargeFloatingActionButton 컴포저블을 사용합니다. 이 컴포저블은 버튼이 더 커진다는 점을 제외하면 다른 예와 크게 다르지 않습니다.
다음은 큰 FAB를 간단하게 구현한 것입니다.
@Composable
fun LargeExample(onClick: () -> Unit) {
LargeFloatingActionButton(
onClick = { onClick() },
shape = CircleShape,
) {
Icon(Icons.Filled.Add, "Large floating action button")
}
}
이 구현은 다음과 같이 표시됩니다.
확장 버튼
ExtendedFloatingActionButton 컴포저블을 사용하여 더 복잡한 플로팅 작업 버튼을 만들 수 있습니다. 이 매개변수와 FloatingActionButton의 주요 차이점은 전용 icon 및 text 매개변수가 있다는 점입니다. 콘텐츠에 맞게 조정되는 더 복잡한 콘텐츠로 버튼을 만들 수 있습니다.
다음 스니펫은 icon 및 text에 전달된 예시 값과 함께 ExtendedFloatingActionButton를 구현하는 방법을 보여줍니다.
@Composable
fun ExtendedExample(onClick: () -> Unit) {
ExtendedFloatingActionButton(
onClick = { onClick() },
icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
text = { Text(text = "Extended FAB") },
)
}
이 구현은 다음과 같이 표시됩니다.
