플로팅 작업 버튼 (FAB)은 사용자가 애플리케이션에서 기본 작업을 수행할 수 있습니다 하나의 집중된 작업을 촉진함 사용자가 취할 수 있는 가장 일반적인 경로이며 일반적으로 화면의 오른쪽 하단에 고정되어 표시됩니다.
FAB를 사용할 수 있는 다음 세 가지 사용 사례를 고려하세요.
- 새 항목 만들기: 메모 앱에서 FAB를 사용하면 새 메모를 만듭니다.
- 새 연락처 추가: 채팅 앱에서 FAB는 인터페이스를 열어 사용자가 대화에 다른 사람을 추가할 때
- 중앙 위치: 지도 인터페이스에서 플로팅 작업 버튼은 사용자의 현재 위치
Material Design에는 다음과 같은 네 가지 유형의 FAB가 있습니다.
- FAB: 일반 크기의 플로팅 작업 버튼입니다.
- 작은 플로팅 작업 버튼: 더 작은 플로팅 작업 버튼입니다.
- 큰 플로팅 작업 버튼: 더 큰 플로팅 작업 버튼입니다.
- 확장 FAB: 아이콘을 클릭합니다.
API 노출 영역
플로팅 작업을 만드는 데 사용할 수 있는 여러 컴포저블이 있지만 버튼의 경우, 매개변수는 크게 다르지 않습니다. 유의해야 할 주요 매개변수는 다음과 같습니다.
onClick
: 사용자가 버튼을 누를 때 호출되는 함수입니다.containerColor
: 버튼의 색상입니다.contentColor
: 아이콘의 색상입니다.
플로팅 작업 버튼
일반적인 플로팅 작업 버튼을 만들려면 기본
FloatingActionButton
컴포저블 함수. 다음 예는
FAB의 기본 구현은 다음과 같습니다.
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
이 구현은 다음과 같이 표시됩니다.
![둥근 모서리, 그림자 및 '추가'가 있는 표준 플로팅 작업 버튼 아이콘을 클릭합니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab.png?authuser=9&hl=ko)
작은 버튼
작은 플로팅 작업 버튼을 만들려면
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.") } }
이 구현은 다음과 같이 표시됩니다.
!['add'가 포함된 SmallfloatActionButton의 구현 아이콘을 클릭합니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?authuser=9&hl=ko)
큰 버튼
큰 플로팅 작업 버튼을 만들려면
LargeFloatingActionButton
컴포저블 함수. 이 컴포저블은
다른 예시와 크게 다르다는 점은
버튼이 커집니다.
다음은 큰 FAB를 간단하게 구현한 것입니다.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
이 구현은 다음과 같이 표시됩니다.
!['add'를 포함하는 LargefloatActionButton의 구현입니다. 아이콘을 클릭합니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?authuser=9&hl=ko)
확장 버튼
ExtendedFloatingActionButton
컴포저블 함수. 두 모델의 가장 큰 차이점은
FloatingActionButton
은 전용 icon
및 text
가 있다는 것을 의미합니다.
매개변수입니다. 이 버튼을 사용하면 더 복잡한 콘텐츠로 확장되는 버튼을 만들 수 있습니다.
콘텐츠를 적절하게 맞춥니다.
다음 스니펫은
ExtendedFloatingActionButton
, icon
및
text
입니다.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
이 구현은 다음과 같이 표시됩니다.
!['extended button'이라는 텍스트를 표시하는 ExtendedfloatActionButton의 구현 수정 아이콘이 있습니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-extended.png?authuser=9&hl=ko)