Tối ưu hoá ứng dụng cho ChromeOS

Ứng dụng Android đóng vai trò quan trọng trong việc định hình lại cách thức điện toán hiện đại trên màn hình lớn. Tuy nhiên, việc chỉ chạy ứng dụng dành cho thiết bị di động trên Chromebook sẽ không mang lại trải nghiệm tốt nhất cho người dùng.

Trang này trình bày chi tiết một số cách giúp bạn điều chỉnh trải nghiệm của mình hướng tới máy tính xách tay và các kiểu dáng thiết bị có thể chuyển đổi. Xem danh sách thử nghiệm đầy đủ để tìm hiểu thêm về việc thử nghiệm ứng dụng của bạn cho tương thích trên các thiết bị này.

Tận dụng tính năng hỗ trợ cho chế độ nhiều cửa sổ tuỳ ý

Quy trình triển khai ứng dụng Android trên ChromeOS bao gồm chế độ nhiều cửa sổ cơ bản của Google. Thay vì luôn chiếm toàn màn hình, Android sẽ hiển thị trên ChromeOS vào vùng chứa cửa sổ dạng tự do, phù hợp hơn với các thiết bị này.

Người dùng có thể đổi kích thước cửa sổ chứa ứng dụng Android của bạn, như minh hoạ trong hình 1. Để đảm bảo rằng các cửa sổ dạng tự do của bạn thay đổi kích thước một cách mượt mà và hiển thị toàn bộ nội dung của chúng cho người dùng, hãy đọc nguyên tắc trong phần Quản lý cửa sổ.

Hình 1. Cửa sổ ứng dụng có thể đổi kích thước.

Bạn có thể cải thiện trải nghiệm người dùng khi ứng dụng chạy trên ChromeOS bằng cách làm theo những phương pháp hay nhất sau đây thực tiễn:

• Xử lý vòng đời hoạt động đúng cách trong chế độ nhiều cửa sổ và đảm bảo bạn đang tiếp tục cập nhật giao diện người dùng, ngay cả khi ứng dụng của bạn không phải là cửa sổ lấy tiêu điểm ở trên cùng.
• Hãy đảm bảo ứng dụng của bạn điều chỉnh bố cục một cách phù hợp bất cứ khi nào người dùng đổi kích thước cửa sổ.
• Tuỳ chỉnh kích thước ban đầu của cửa sổ ứng dụng bằng cách chỉ định kích thước khởi chạy.
• Xin lưu ý rằng hướng hoạt động gốc của ứng dụng ảnh hưởng đến tất cả cửa sổ của ứng dụng đó.

Tuỳ chỉnh màu của thanh trên cùng

ChromeOS dùng giao diện của ứng dụng để tô màu cho thanh trên cùng ở đầu ứng dụng, dòng này xuất hiện khi người dùng giữ các chế độ điều khiển cửa sổ và nút quay lại. Để thực hiện ứng dụng của bạn trông đẹp mắt và được tuỳ chỉnh cho ChromeOS, hãy xác định colorPrimary và nếu có thể colorPrimaryDark trong giao diện của ứng dụng.

colorPrimaryDark được dùng để tô màu cho thanh trên cùng. Nếu chỉ colorPrimary đã được xác định, ChromeOS sử dụng một phiên bản tối hơn trong thanh trên cùng. Để biết thêm thông tin, hãy xem phần Kiểu và giao diện.

Hỗ trợ bàn phím, bàn di chuột và chuột

Tất cả Chromebook đều có bàn phím thực và bàn di chuột, một số Chromebook có màn hình cảm ứng. Một số thiết bị có thể chuyển đổi từ dạng máy tính xách tay thành máy tính bảng.

Trong các ứng dụng dành cho ChromeOS, hãy hỗ trợ phương thức nhập bằng chuột, bàn di chuột và bàn phím để có thể dùng ứng dụng mà không cần màn hình cảm ứng. Nhiều ứng dụng đã hỗ trợ chuột và bàn di chuột mà không cần phải làm gì thêm. Tuy nhiên, tốt nhất bạn nên tuỳ chỉnh hành vi thích hợp cho chuột cũng như để hỗ trợ và phân biệt giữa chuột và thao tác chạm.

Hãy đảm bảo rằng:

• Có thể nhấp vào tất cả các mục tiêu bằng chuột.
• Tất cả bề mặt cuộn bằng thao tác chạm sẽ cuộn trên các sự kiện con lăn chuột, như minh hoạ trong hình 2.
• Các trạng thái di chuột được triển khai với sự đánh giá cẩn thận để cải thiện Khám phá giao diện người dùng mà không làm người dùng cảm thấy choáng ngợp, như minh hoạ trong hình 3.

Hình 2. Cuộn bằng con lăn chuột.

Hình 3. Trạng thái di chuột qua nút.

Khi thích hợp, hãy phân biệt giữa thao tác nhập bằng chuột và thao tác chạm. Cho ví dụ: chạm & giữ một mục có thể kích hoạt giao diện người dùng chọn nhiều mục trong khi Việc nhấp chuột phải vào cùng một mục có thể kích hoạt trình đơn tuỳ chọn.

Con trỏ tuỳ chỉnh

Tuỳ chỉnh ứng dụng con trỏ chuột để cho người dùng biết phần tử nào trên giao diện người dùng của ứng dụng có thể tương tác và tương tác như thế nào. Bạn có thể đặt PointerIcon để sử dụng khi người dùng tương tác với một khung hiển thị bằng cách gọi phương thức setPointerIcon().

Trong ứng dụng của bạn, hãy hiển thị tất cả các thông tin sau:

• Con trỏ trỏ chữ I cho văn bản
• Ô điều khiển thay đổi kích thước ở các cạnh của lớp phủ có thể thay đổi kích thước
• Con trỏ mở và đóng đối với nội dung mà bạn có thể kéo hoặc kéo dùng cử chỉ nhấp và kéo
• Vòng quay cho biết đang xử lý

Lớp PointerIcon cung cấp hằng số mà bạn có thể sử dụng để triển khai con trỏ tuỳ chỉnh.

Phím tắt và điều hướng

Vì mọi Chromebook đều có bàn phím thực, hãy cung cấp phím nóng để giúp người dùng làm việc hiệu quả hơn. Ví dụ: nếu ứng dụng của bạn hỗ trợ in, bạn có thể dùng tổ hợp phím Control+P để mở hộp thoại in.

Tương tự, xử lý tất cả các phần tử quan trọng trên giao diện người dùng bằng tính năng điều hướng thẻ. Điều này đặc biệt quan trọng đối với khả năng hỗ trợ tiếp cận. Để đáp ứng các tiêu chuẩn hỗ trợ người khuyết tật, tất cả các nền tảng giao diện người dùng phải có tiêu điểm rõ ràng và tuân thủ khả năng hỗ trợ tiếp cận trạng thái, được thể hiện trong các hình sau:

Hình 4. Thanh ngang.

Hình 5. Thay thế cử chỉ vuốt bằng một thành phần điều khiển xuất hiện khi di chuột.

Hãy nhớ triển khai lựa chọn thay thế bàn phím hoặc chuột cho chính các tính năng ẩn trong hoạt động tương tác cụ thể bằng thao tác chạm, chẳng hạn như chạm và giữ thao tác, vuốt hoặc các cử chỉ nhiều điểm chạm khác. Một giải pháp mẫu là cung cấp các nút xuất hiện trên bề mặt khi di chuột.

Để biết thêm thông tin về tính năng hỗ trợ bàn phím, bàn di chuột và chuột, hãy xem Khả năng tương thích đầu vào trên màn hình lớn.

Nâng cao hơn nữa hoạt động đầu vào của người dùng

Để đạt được chức năng cấp máy tính cho ứng dụng của bạn, hãy cân nhắc những điều sau đầu vào dựa trên năng suất.

Trình đơn theo bối cảnh

Trình đơn theo bối cảnh của Android là một trình tăng tốc khác giúp đưa người dùng đến các tính năng của ứng dụng, có thể được kích hoạt bằng một cú nhấp chuột hoặc hoặc thông qua thao tác chạm và giữ trên màn hình cảm ứng:

Hình 6. Một trình đơn theo bối cảnh sẽ xuất hiện khi bạn nhấp chuột phải.

Kéo và thả

Xây dựng tương tác kéo và thả, như trong hình sau, có thể mang lại năng suất hiệu quả, trực quan cho ứng dụng của mình. Để biết thêm thông tin, hãy xem phần Kéo và thả.

Hình 7. Kéo và thả trong giao diện cây tệp.

Hỗ trợ bút cảm ứng

Khả năng hỗ trợ bút cảm ứng rất quan trọng đối với các ứng dụng vẽ và ghi chú. Cung cấp nâng cao hỗ trợ Chromebook và máy tính bảng được trang bị bút cảm ứng bằng cách triển khai các tính năng tương tác được điều chỉnh cho phù hợp với cách sử dụng phương thức nhập bằng bút cảm ứng.

Chú ý đến các biến thể có thể có trên phần cứng bút cảm ứng khác nhau khi thiết kế các hoạt động tương tác của bút cảm ứng. Để biết sơ lược về API bút cảm ứng, hãy xem Khả năng tương thích đầu vào trên màn hình lớn.

Tạo bố cục thích ứng

Tận dụng hiệu quả không gian màn hình có sẵn cho ứng dụng của bạn bất kể trạng thái hình ảnh (toàn màn hình, dọc, ngang hoặc cửa sổ). Một số ví dụ về chẳng hạn như sau:

• Hiển thị cấu trúc ứng dụng.
• Giới hạn độ dài văn bản và kích thước hình ảnh ở chiều rộng tối đa.
• Tận dụng hiệu quả hơn không gian màn hình trong thanh công cụ của ứng dụng.
• Cải thiện vị trí của các thành phần trên giao diện người dùng bằng cách điều chỉnh ứng dụng cho phù hợp với việc sử dụng chuột thumb.
• Tối ưu hoá kích thước của video và hình ảnh, thiết lập nhóm chiều rộng tối đa và chiều cao cho tất cả nội dung nghe nhìn, đồng thời tối đa hoá khả năng đọc và quét.
• Triển khai hệ thống cột thích ứng. Để biết thêm thông tin, hãy xem bài viết Thích ứng lưới bố cục.
• Đổi kích thước và sửa đổi giao diện người dùng khi cần thông qua hệ thống cột. Tránh mở cửa sổ mới khi có thể.
• Xoá hoặc giảm tầm quan trọng của các thành phần cuộn ngang.
• Tránh sử dụng giao diện người dùng ở chế độ toàn màn hình. Sử dụng giao diện người dùng cùng dòng, chẳng hạn như chỉ báo tiến trình và cho tất cả các hành động không quan trọng.
• Sử dụng các thành phần giao diện người dùng cải tiến, chẳng hạn như bộ chọn ngày và giờ, trường văn bản và trình đơn được thiết kế cho chuột, bàn phím và các màn hình lớn hơn.
• Sử dụng tính năng chỉnh sửa cùng dòng, cột bổ sung hoặc giao diện người dùng phụ thay vì một hoạt động mới cho tính năng chỉnh sửa từ nhỏ đến trung bình.
• Xoá hoặc sửa đổi các nút hành động nổi (FAB) để cải thiện bàn phím điều hướng. Theo mặc định, các vị trí FAB sẽ nằm cuối cùng trong thẻ dọc đơn đặt hàng. Thay vào đó, hãy đặt đây là hành động chính, hoặc hãy thay thế nó bằng một thuộc tính tương tác cấp cao hơn khác.

Hình 8. Bản mô phỏng bố cục thích ứng trên màn hình kích thước của điện thoại và máy tính.

Thay đổi mẫu điều hướng

Nút quay lại ở cấp hệ thống là một mẫu mang theo từ gốc thiết bị cầm tay của Android – một thiết bị không phù hợp bằng trong một bối cảnh trên máy tính để bàn.

Vì ứng dụng của bạn ngày càng được tuỳ chỉnh cho phù hợp với môi trường máy tính xách tay, hãy cân nhắc di chuyển về mẫu điều hướng không nhấn mạnh nút quay lại. Hãy để ứng dụng xử lý ngăn xếp nhật ký riêng bằng cách cung cấp lại các nút, đường dẫn hoặc các tuyến thoát khác như nút đóng hoặc nút huỷ của giao diện người dùng màn hình lớn.

Bạn có thể kiểm soát việc ứng dụng có hiện nút quay lại trong cửa sổ hay không bằng cách đặt một tùy chọn bên trong <activity> . Một chế độ cài đặt là true bị ẩn nút quay lại:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

Khắc phục vấn đề với hình ảnh xem trước của máy ảnh

Các sự cố về máy ảnh có thể phát sinh khi ứng dụng chỉ có thể chạy theo hướng dọc nhưng người dùng chạy trên màn hình ngang. Trong trường hợp này, bản xem trước hoặc kết quả đã chụp có thể bị xoay không chính xác.

Chế độ tương thích thay đổi cách hệ thống xử lý các sự kiện, chẳng hạn như thay đổi về hướng, trong ChromeOS. Việc này giúp ngăn chặn các vấn đề khi dùng camera sai cách chế độ hướng. Để bật chế độ tương thích, hãy đáp ứng các tiêu chí sau:

• Nhắm mục tiêu đến Android 7.0 (API cấp 24) trở lên. Chiến lược phát hành đĩa đơn cấp SDK tối thiểu có thể thấp hơn.
• Ứng dụng phải có thể thay đổi kích thước.

Xử lý chế độ cài đặt thiết bị

Hãy cân nhắc các chế độ cài đặt thiết bị sau đây cho ứng dụng chạy trên ChromeOS.

Thay đổi âm lượng

Thiết bị ChromeOS là thiết bị có âm lượng cố định: các ứng dụng phát âm thanh sẽ có âm lượng riêng các nút điều chỉnh âm lượng. Làm theo các hướng dẫn về Đang hoạt động với các thiết bị có âm lượng cố định.

Thay đổi độ sáng màn hình

Bạn không thể điều chỉnh độ sáng của thiết bị trên ChromeOS. Lệnh gọi đến system settings và WindowManager.LayoutParams sẽ bị bỏ qua.