Jetpack Compose Glimmer được xây dựng 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 hiển thị bằng Compose, giúp trải nghiệm ứ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 làm gì thêm.
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 nhỏ bóng đổ.
Các thành phần Glimmer của Jetpack Compose
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 có màn hình. 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út
- Thẻ
- Chế độ phân trang ngang
- 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
- Chỉ báo nhập bằng giọng nói
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. Các đối tượng này 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 Glimmer trong Jetpack Compose
Jetpack Compose Glimmer có một hệ thống tạo giao diện chuyên dụng cho kính có màn hình.
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 có màn hình. Tất cả các thành phần Jetpack Compose Glimmer đều được thiết kế để tích hợp tự động 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 này 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 kính có màn hình. 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.
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 có màn hình, 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 có màn hình 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 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 có màn hình, 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.