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 mắt kính hiển thị bằng Compose, giúp trải nghiệm trong ứng dụng của bạn trở nên sống động hơn nhờ 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 được thiết kế 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 số lượng ít bóng đổ.
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 độc đáo về hình ảnh và tính tương tác của kính hiển thị. Các thành phần Jetpack Compose Glimmer có thể tuỳ chỉnh bằng chủ đề của 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ơn để hỗ trợ hoạt động đầu vào 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út
- Thẻ
- Biểu tượng
- Nút biểu tượng
- Danh sách
- Các mục trong danh sách
- Nền tảng
- Văn bản
- Nút bật tắt
- Khối tiêu đề
- Ngăn xếp dọc
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à thành phần cơ bản nhất trong Jetpack Compose Glimmer – một canvas trống cho mọi thiết kế hoặc lượt tương tác tuỳ chỉnh cụ thể 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 trong 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 bao gồm các đối tượng sửa đổi và 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.
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 hiển thị.
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 tối đa khả năng hiển thị và tính ngắn gọn cho kính hiển thị. 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 dành riêng cho kính. 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 được trình bày ngắn gọn trong các phần sau cùng với các thuộc tính có thể tuỳ chỉnh của chúng:
- Màu
- Kiểu chữ
- Giá trị khoảng cách giữa các thành phần
- Hình dạng
- Các mức hiệu ứng chiều sâu
- Kích thước biểu tượng
Màu
Hệ thống màu sắc của Jetpack Compose Glimmer được thiết kế cho màn hình bổ sung và môi trường thực. Không giống như các giao diện Android tiêu chuẩn, GlimmerTheme
Colors ưu tiên nền tối có độ trong suốt một phần và các điểm nhấn sống động để đảm bảo nội dung dễ đọc trong điều kiện ánh sáng thực tế khó đoán.
Hệ thống sử dụng bảng màu gồm 3 phần với màu chính, màu phụ và màu trung tính. Màu trung tính thường đóng vai trò là bề mặt vật lý của giao diện người dùng không gian, trong khi màu chính và màu phụ cung cấp các tín hiệu trực quan rõ ràng để tương tác và xây dựng thương hiệu.
GlimmerTheme.Kiểu chữ
Hệ thống kiểu chữ của Jetpack Compose Glimmer bao gồm nhiều kiểu chữ để dễ đọc và ngắn gọn trên mắt kính hiển thị. 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 độ đậ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.
Giá trị khoảng cách giữa các thành phần
Các giá trị này được dùng để đảm bảo khoảng cách nhất quán giữa các thành phần Glimmer của Jetpack Compose. Điều này bao gồm khoảng đệm của thành phần, khoảng cách giữa các thành phần và các phần tử khoảng cách khác. Xin lưu ý rằng việc thay đổi các giá trị này sẽ ảnh hưởng đến kích thước mặc định của hầu hết các thành phần.
Hình dạng
Hệ thống hình dạng của Jetpack Compose Glimmer xác định một tập hợp 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ữ trực quan nhất quán và tối giản trên giao diện người dùng của kính hiển thị, với tất cả các hình dạng được hiển thị thông qua GlimmerTheme.shapes.
Các mức hiệu ứng chiều sâu
Các thành phần Jetpack Compose Glimmer sử dụng chiều 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 hiển thị 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 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ố depthEffect trên Modifier.surface hoặc depthEffect.
Kích thước 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 hiển thị, 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.