Biểu tượng trong Jetpack Compose Glimmer

Các thiết bị XR được hỗ trợ

Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.

Tìm hiểu về các loại thiết bị XR →

Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, thành phần Icon là một phần tử trên giao diện người dùng để kết xuất các biểu tượng đơn sắc. Các biểu tượng xử lý thông minh việc tô màu và điều chỉnh tỷ lệ để vẫn dễ đọc và nhất quán về mặt hình ảnh với GlimmerTheme.

Kích thước

Mặc dù biểu tượng mặc định có kích thước do LocalIconSize cung cấp, nhưng bạn cũng có thể sử dụng 3 kích thước biểu tượng được cung cấp để đặt một kích thước cụ thể. Theo mặc định, các kích thước này cũng được dùng cho những ngữ cảnh sau:

Nguồn biểu tượng

Biểu tượng có thể chấp nhận ImageVector, ImageBitmap hoặc Painter làm nguồn. Khi xác định biểu tượng của riêng bạn, hãy sử dụng ImageVector nếu có thể để tăng cường khả năng kết xuất sắc nét ở mọi tỷ lệ trên kính hiển thị.

Màu sắc và phủ màu

• Tự động tạo sắc thái màu: Biểu tượng sẽ xác định màu dựa trên LocalContentColor do vùng hiển thị mẹ cung cấp, chẳng hạn như surface hoặc Button.LocalContentColor
• Tô màu thủ công: Sử dụng tham số tint để áp dụng một màu cụ thể.
• Tài sản nhiều màu: Đối với những biểu tượng không được tô màu (chẳng hạn như biểu trưng thương hiệu nhiều màu), hãy đặt tint = Color.Unspecified.
• Hình ảnh chung chung: Đối với ảnh chụp hoặc hình ảnh chung chung không tuân theo các quy tắc về kích thước và màu sắc của biểu tượng, hãy sử dụng androidx.compose.foundation.Image tiêu chuẩn.

Ví dụ: Biểu tượng cơ bản trong một thành phần

Đoạn mã sau đây tạo một biểu tượng được đặt bên trong một bề mặt hình tròn, sử dụng màu chính của giao diện:

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

Ví dụ: Biểu tượng có nhiều kích thước

Đoạn mã sau đây minh hoạ các kích thước biểu tượng khác nhau:

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

Các điểm chính về mã

• Kích thước của mỗi biểu tượng được tuỳ chỉnh bằng cách sử dụng GlimmerTheme.iconSizes với một giá trị sửa đổi. Đối với biểu tượng, giá trị mặc định là GlimmerTheme.iconSizes.medium. Hãy sử dụng các kích thước này thay vì mã hoá cứng các giá trị để duy trì tính nhất quán trên giao diện người dùng.
• Cung cấp một contentDescription được bản địa hoá cho từng biểu tượng. Luôn cung cấp những nội dung mô tả này, trừ phi biểu tượng chỉ mang tính chất trang trí.