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 →
Kính hiển thị
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ý việc tô màu và điều chỉnh tỷ lệ một cách thông minh để 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 các ngữ cảnh sau:

Mã thông báo kích thước Sử dụng mặc định

small

Đối với các mục trong danh sách chuẩn hoặc các khối nhỏ.

medium

Đối với các biểu tượng độc lập và các chip tiêu đề.

large

Đối với các thành phần có độ nhấn mạnh cao như thẻ.

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 hiển thị sắc nét ở mọi tỷ lệ trên kính có màn hình.

Màu sắc và sắc thái

  • 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 LocalContentColor, chẳng hạn như surface hoặc Button.
  • Tô màu thủ công: Sử dụng tham số tint để áp dụng một màu cụ thể.
  • Thành phầ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

Đoạn mã sau đây tạo một biểu tượng cơ bản:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

Ví dụ: Biểu tượng có màu

Đoạn mã sau đây tạo một biểu tượng có màu bằng cách sử dụng màu chính của giao diện:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

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

Mã sau đây tạo một biểu tượng được sửa đổi thành một kích thước cụ thể:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

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

  • Kích thước của biểu tượng được tuỳ chỉnh bằng cách sử dụng GlimmerTheme.iconSizes với một đối tượng 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 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í.