플로팅 작업 버튼

플로팅 작업 버튼 (FAB)은 사용자가 애플리케이션에서 기본 작업을 수행할 수 있습니다 하나의 집중된 작업을 촉진함 사용자가 취할 수 있는 가장 일반적인 경로이며 일반적으로 화면의 오른쪽 하단에 고정되어 표시됩니다.

FAB를 사용할 수 있는 다음 세 가지 사용 사례를 고려하세요.

• 새 항목 만들기: 메모 앱에서 FAB를 사용하면 새 메모를 만듭니다.
• 새 연락처 추가: 채팅 앱에서 FAB는 인터페이스를 열어 사용자가 대화에 다른 사람을 추가할 때
• 중앙 위치: 지도 인터페이스에서 플로팅 작업 버튼은 사용자의 현재 위치

Material Design에는 다음과 같은 네 가지 유형의 FAB가 있습니다.

• FAB: 일반 크기의 플로팅 작업 버튼입니다.
• 작은 플로팅 작업 버튼: 더 작은 플로팅 작업 버튼입니다.
• 큰 플로팅 작업 버튼: 더 큰 플로팅 작업 버튼입니다.
• 확장 FAB: 아이콘 외에도 다른 항목이 포함된 플로팅 작업 버튼입니다.

그림 1. 네 가지 플로팅 작업 버튼 유형

API 노출 영역

플로팅 작업을 만드는 데 사용할 수 있는 여러 컴포저블이 있지만 버튼의 경우, 매개변수는 크게 다르지 않습니다. 유의해야 할 주요 매개변수는 다음과 같습니다.

• onClick: 사용자가 버튼을 누를 때 호출되는 함수입니다.
• containerColor: 버튼의 색상입니다.
• contentColor: 아이콘의 색상입니다.

플로팅 작업 버튼

일반적인 플로팅 작업 버튼을 만들려면 기본 FloatingActionButton 컴포저블 함수. 다음 예는 FAB의 기본 구현은 다음과 같습니다.

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

이 구현은 다음과 같이 표시됩니다.

그림 2. 플로팅 작업 버튼

작은 버튼

작은 플로팅 작업 버튼을 만들려면 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.")
    }
}
FloatingActionButton.kt

참고: 다양한 FAB 컴포저블은 많은 매개변수를 공유하므로 이 예의 접근 방식을 사용하여 다른 컴포저블로 색상을 맞춤설정할 수 있습니다.

이 구현은 다음과 같이 표시됩니다.

그림 3. 작은 플로팅 작업 버튼

큰 버튼

큰 플로팅 작업 버튼을 만들려면 LargeFloatingActionButton 컴포저블 함수. 이 컴포저블은 다른 예시와 크게 다르다는 점은 버튼이 커집니다.

다음은 큰 FAB를 간단하게 구현한 것입니다.

참고: 이 예에서는 CircleShape을 shape 매개변수의 값으로 전달하므로 모서리가 둥근 정사각형이 아닌 원형 버튼이 생성됩니다. 다음을 수행할 수 있습니다. Shape의 인스턴스를 전달하거나 MaterialTheme.shape.large의 값을 조정할 수 있습니다.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

이 구현은 다음과 같이 표시됩니다.

그림 4. 큰 플로팅 작업 버튼

확장된 버튼

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") },
    )
}
FloatingActionButton.kt

이 구현은 다음과 같이 표시됩니다.

그림 5. 텍스트와 아이콘이 모두 있는 플로팅 작업 버튼

추가 리소스

• 일반 버튼
• Material UI 문서