Jetpack Compose Glimmer được xây dựng dựa trên Jetpack Compose và bao gồm các thành phần kết hợp, thành phần, hành vi và một giao diện được thiết kế cho kính AI có màn hình. Với Glimmer, bạn có thể tạo giao diện người dùng gốc cho kính AI bằng Compose, giúp trải nghiệm ứng dụng của bạn trở nên sống động hơn với mã ngắn hơn, các công cụ mạnh mẽ và API Kotlin trực quan.
Các thành phần kết hợp Glimmer của Jetpack Compose
Jetpack Compose Glimmer cung cấp các hàm @Composable dành riêng cho màn hình kính AI, chẳng hạn như Text, Button và ListItem. Dưới đây là một số đặc điểm riêng biệt của các thành phần kết hợp Jetpack Compose Glimmer:
- Kiểu đơn giản: Các thành phần
Surface, chẳng hạn như các thành phần mặc định có nền đen hoặc trong suốt để tối ưu hoá khả năng hiển thị. - Màu mặc định được tối ưu hoá: Theo mặc định, Jetpack Compose Glimmer tính toán màu nội dung dựa trên màu nền, vì vậy, hiếm khi nhà phát triển cần đặt màu văn bản theo cách thủ công, giúp tăng khả năng đọc mà không cần thêm bất kỳ thao tác nào.
Tiêu điểm khác biệt: Tiêu điểm được biểu thị bằng thông tin phản hồi trực quan dựa trên đường viền thay vì hiệu ứng gợn sóng, giúp tăng khả năng hiển thị rõ ràng.
Hình 1. 3 trạng thái lấy tiêu điểm trong Jetpack Compose Glimmer, được phân biệt bằng phản hồi trực quan dựa trên đường viền. Độ nâng được tối ưu hoá: Jetpack Compose Glimmer sử dụng số lượng nhỏ hiệu ứng đổ bóng cho hộp để phân tách trực quan
Hình 2. Năm cấp độ nâng trong Jetpack Compose Glimmer, được phân biệt bằng cách sử dụng các bóng đổ giới hạn.
Các thành phần Jetpack Compose Glimmer
Jetpack Compose Glimmer có một bộ thành phần được thiết kế riêng, tương tự như các thành phần trong Jetpack Compose, nhưng được tối ưu hoá đặc biệt cho các yêu cầu riêng về hình ảnh và tính tương tác của kính AI. Các thành phần Jetpack Compose Glimmer có thể tuỳ chỉnh bằng giao diện Jetpack Compose Glimmer và được xây dựng dựa trên các tính năng Compose cấp thấp để hỗ trợ các phương thức nhập của người dùng như nhấn và vuốt theo mặc định.
Để tìm hiểu thêm về cách sử dụng một thành phần cụ thể, hãy xem các hướng dẫn sau:
Nếu một trong những thành phần cấp cao này không phù hợp với trường hợp sử dụng của bạn, thì bạn có thể dùng surface để tạo một thành phần tuỳ chỉnh. Surface là khối xây dựng cơ bản nhất trong Jetpack Compose Glimmer – một canvas trống cho mọi thiết kế hoặc hoạt động tương tác cụ thể, tuỳ chỉnh mà bạn muốn tạo.
Đối tượng sửa đổi Glimmer trong Jetpack Compose
Các đối tượng sửa đổi trong Jetpack Compose Glimmer hoạt động giống hệt như các đối tượng sửa đổi Compose, cho phép bạn tăng cường các thành phần kết hợp bằng cách tuỳ chỉnh bố cục, giao diện và hành vi của chúng. Jetpack Compose Glimmer có thể giới thiệu các đối tượng sửa đổi cụ thể hoặc áp dụng các giá trị mặc định riêng biệt cho hiệu suất và phản hồi trực quan dành riêng cho kính.
Độ sâu của hiệu ứng lấp lánh trong Jetpack Compose
Các thành phần Jetpack Compose Glimmer sử dụng độ sâu để biểu thị hệ phân cấp, giúp phân biệt trực quan các phần tử hiển thị ở trên (nằm trên) các thẻ khác. Độ sâu trên kính AI là sự kết hợp giữa vị trí trong không gian z và bóng đổ. Đối với hầu hết các thành phần cấp cao, chẳng hạn như các mục trong danh sách, độ sâu sẽ tự động được áp dụng dựa trên trạng thái lấy tiêu điểm. Khi một thành phần được lấy làm tiêu điểm, thành phần đó sẽ có chiều sâu; khi mất tiêu điểm, thành phần đó sẽ trở về trạng thái bình thường. Tuy nhiên, để làm việc với các thành phần tuỳ chỉnh, bạn có thể sử dụng tham số độ sâu trên Modifier.surface hoặc Modifier.depth.
Giao diện của Jetpack Compose Glimmer
Jetpack Compose Glimmer có một hệ thống tạo giao diện chuyên dụng cho kính AI.
Giao diện của Jetpack Compose Glimmer triển khai một bảng màu, kiểu chữ và hình dạng đơn giản và được tối ưu hoá. Điều này giúp tăng khả năng hiển thị và tính súc tích tối đa cho kính AI. Tất cả các thành phần Jetpack Compose Glimmer đều được thiết kế để tự động tích hợp với các phương thức nhập cụ thể của kính AI. Giao diện của Jetpack Compose Glimmer được hiển thị bằng lớp GlimmerTheme.
Giống như các giao diện khác trong Jetpack Compose, GlimmerTheme bao gồm một số hệ thống con: màu sắc, hình dạng, kiểu chữ và biểu tượng (symbolography). Giao diện của Jetpack Compose Glimmer cũng bao gồm các thành phần Jetpack Compose Glimmer mà bạn có thể tuỳ chỉnh.
Màu
Hệ thống màu của Jetpack Compose Glimmer có 7 màu trong bảng màu được tối ưu hoá, được thiết kế để có khả năng hiển thị và tính súc tích tối đa trên màn hình kính AI, nơi các giá trị màu đen không hiển thị.
GlimmerTheme.Xin lưu ý rằng các màu "On ..." không được hiển thị thông qua GlimmerTheme. Hệ thống sẽ tự động tính toán các màu này dựa trên màu nền.
Các màu này được hiển thị thông qua GlimmerTheme.colors.primary, với các giá trị cho từng vai trò màu như mô tả trong bảng sau:
Vai trò màu |
Mặc định |
|---|---|
chính |
#A8C7FA |
phụ |
#4C88E9 |
tích cực |
#4CE995 |
âm |
#F57084 |
bề mặt |
#000000 |
outline |
#606460 |
outlineVariant |
#42434A |
Xin lưu ý rằng mặc dù surface, outline và outlineVariant được đánh dấu là có thể tuỳ chỉnh, nhưng bạn không nên tuỳ chỉnh các giá trị này.
Hình dạng
Hệ thống hình dạng của Jetpack Compose Glimmer xác định một bộ các phương pháp xử lý góc tiêu chuẩn và các dạng hình học cho các thành phần, được thiết kế để tạo ra một ngôn ngữ hình ảnh nhất quán và tối giản trên giao diện người dùng của kính AI, với tất cả các hình dạng được hiển thị thông qua GlimmerTheme.shapes.
Kiểu chữ
Hệ thống kiểu chữ của Jetpack Compose Glimmer bao gồm 6 kiểu chữ để dễ đọc và ngắn gọn trên màn hình kính AI. Những kiểu chữ này được thiết kế để tối đa hoá độ tương phản và cải thiện khả năng đọc văn bản thông qua độ dày đậm hơn, khoảng cách giữa các chữ cái rộng hơn và chiều cao dòng phù hợp. Các kiểu này được hiển thị thông qua GlimmerTheme.typography.
Biểu tượng
Hệ thống biểu tượng của Jetpack Compose Glimmer được thiết kế để tích hợp một cách nhất quán với ngôn ngữ hình ảnh đơn giản của giao diện người dùng kính AI, thường tận dụng các hình dạng bo tròn như Material Symbols Rounded để có khả năng đọc tối ưu.