배지

배지를 사용하여 다른 컴포저블에서 상태 또는 숫자 값을 나타내는 작은 시각적 요소를 표시합니다. 배지를 사용할 수 있는 몇 가지 일반적인 시나리오는 다음과 같습니다.

• 알림: 앱 아이콘 또는 알림 종 모양 아이콘에 읽지 않은 알림 수를 표시합니다.
• 메시지: 채팅 애플리케이션 내에서 새 메시지 또는 읽지 않은 메시지를 나타냅니다.
• 상태 업데이트: '완료됨', '진행 중', '실패함'과 같은 작업 상태를 표시합니다.
• 장바구니 수량: 사용자의 장바구니에 있는 상품 수를 표시합니다.
• 새 콘텐츠: 사용자가 사용할 수 있는 새 콘텐츠 또는 기능을 강조 표시합니다.

API 노출 영역

BadgedBox 컴포저블을 사용하여 애플리케이션에 배지를 구현합니다. 궁극적으로 컨테이너입니다. 다음 두 가지 기본 매개변수를 사용하여 모양을 제어합니다.

• content: BadgedBox에 포함된 컴포저블 콘텐츠입니다. 일반적으로 Icon입니다.
• badge: 콘텐츠 위에 배지로 표시되는 컴포저블입니다. 일반적으로 전용 Badge 컴포저블입니다.

기본 예

다음 코드 스니펫은 BadgedBox의 기본 구현을 보여줍니다.

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

이 예에서는 제공된 Icon 컴포저블과 겹치는 배지를 표시합니다. 코드에서 다음을 확인합니다.

• BadgedBox는 전체 컨테이너 역할을 합니다.
• BadgedBox의 badge 매개변수 인수는 Badge입니다. Badge에는 자체 인수가 없으므로 앱은 작은 빨간색 원이 표시되는 기본 배지를 표시합니다.
• Icon는 BadgedBox의 content 매개변수의 인수 역할을 합니다. 배지가 표시되는 아이콘입니다. 이 경우 이메일 아이콘입니다.

다음과 같이 표시됩니다.

자세한 예시

다음 스니펫은 배지에 사용자 작업에 응답하는 값을 표시하는 방법을 보여줍니다.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}
Badges.kt

이 예에서는 사용자의 장바구니에 있는 상품 수를 표시하는 배지가 있는 장바구니 아이콘을 구현합니다.

• BadgedBox는 항목 수가 0보다 클 때만 표시됩니다.
• containerColor 및 contentColor의 인수는 배지의 모양을 제어합니다.
• Badge의 콘텐츠 슬롯용 Text 컴포저블이 배지 내에 표시됩니다. 이 경우 장바구니에 있는 상품 수를 표시합니다.

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

추가 리소스

• 자료 3 - 배지
• BadgedBox
• Badge