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 diện mạo của đ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 di động trên Chromebook không mang lại cho người dùng trải nghiệm tốt nhất.

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

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

Quá trình triển khai ứng dụng Android trên ChromeOS bao gồm tính năng hỗ trợ nhiều cửa sổ cơ bản. Thay vì luôn chiếm toàn màn hình, Android sẽ hiển thị các ứng dụng trên ChromeOS vào các 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ửa sổ dạng tự do đổi kích thước suôn sẻ và hiển thị toàn bộ nội dung cho người dùng, hãy đọc nguyên tắc trong phần Quản lý cửa sổ.

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 các phương pháp hay nhất sau đây:

• Xử lý vòng đời hoạt động đúng cách ở 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 không phải là cửa sổ được 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 của cửa sổ.
• Lưu ý rằng hướng của 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. Thanh này sẽ 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. Để giao diệ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ể, hãy dùng các giá trị 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ỉ xác định colorPrimary, ChromeOS sẽ sử dụng phiên bản tối hơn của 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ũng 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 là bạn nên tuỳ chỉnh hành vi của ứng dụng sao cho phù hợp với chuột, đồng thời hỗ trợ và phân biệt giữa phương thức nhập bằng chuột và phương thức nhập bằng cách 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 theo các sự kiện con lăn chuột, như 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ả năng khám phá giao diện người dùng mà không làm người dùng bị choáng ngợp, như minh hoạ trong hình 3.

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. Ví dụ: thao tác chạm và 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 con trỏ chuột của ứng dụng để cho biết người dùng có thể tương tác với thành phần nào trên giao diện người dùng và cách thức. 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 bằ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ể 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 vật lý, 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, thì 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 về khả năng hỗ trợ tiếp cận, tất cả nền tảng giao diện người dùng đều phải có trạng thái tập trung rõ ràng và tuân thủ khả năng hỗ trợ tiếp cận, như trong các hình sau:

Hãy nhớ triển khai các lựa chọn thay thế bàn phím hoặc chuột cho các tính năng chính ẩn trong các hoạt động tương tác cụ thể bằng thao tác chạm, chẳng hạn như các thao tác chạm và giữ, 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 một khu vực khi di chuột.

Để biết thêm thông tin về việc hỗ trợ bàn phím, bàn di chuột và chuột, hãy xem bài viết Khả năng tương thích phương thức nhập 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 các đầu vào dựa trên năng suất sau đây.

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 để đư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 cách nhấp chuột hoặc nút phụ của bàn di chuột hoặc thông qua thao tác chạm và giữ trên màn hình cảm ứng:

Kéo và thả

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

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 khả năng hỗ trợ nâng cao cho 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 hoạt động tương tác phù hợp với việc sử dụng phương thức nhập bằng bút cảm ứng.

Hãy cân nhắc đến các biến thể có thể có trong từng phần cứng bút cảm ứng khi thiết kế các hoạt động tương tác với bút cảm ứng. Để biết sơ lược về các API phông chữ, hãy xem bài viết 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 hiện có cho ứng dụng bất kể trạng thái hình ảnh của ứng dụng (toàn màn hình, dọc, ngang hay cửa sổ). Sau đây là một số ví dụ về cách sử dụng dung lượng hợp lý:

• 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 tương tác 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 thay vì dùng ngón cái.
• Tối ưu hoá kích thước của video và hình ảnh, thiết lập bộ chiều rộng và chiều cao tối đa cho tất cả nội dung nghe nhìn, đồng thời tăng tối đa 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 Lưới bố cục thích ứng.
• Đổ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à cảnh báo) cho tất cả các thao tác 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 cũng như 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.
• Hãy 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ì hoạt động mới cho một 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) để thao tác bằng bàn phím hiệu quả hơn. Theo mặc định, các vị trí FAB sẽ nằm cuối cùng theo thứ tự tab đảo ngược. Thay vào đó, hãy thực hiện trước vì đây là hành động chính hoặc thay thế bằng một thành phần cấp cao khác.

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

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

Khi ứng dụng của bạn ngày càng được tuỳ chỉnh cho môi trường máy tính xách tay, hãy cân nhắc chuyển sang mẫu điều hướng không nhấn mạnh nút quay lại. Cho phép ứng dụng tự xử lý ngăn xếp nhật ký bằng cách cung cấp nút quay lại, đường dẫn hoặc các tuyến thoát khác trong ứng dụng như nút đóng hoặc huỷ trong giao diện người dùng trên 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 thiết lập một lựa chọn ưu tiên bên trong thẻ <activity>. Việc thiết lập true sẽ ẩ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 ở hướng dọc nhưng người dùng chạy ứng dụng trên màn hình ngang. Trong trường hợp này, bản xem trước hoặc kết quả được 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. Điều này giúp ngăn chặn các sự cố khi máy ảnh được sử dụng không đúng 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. 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 có các nút điều khiển âm lượng riêng. Làm theo hướng dẫn về Làm việc 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. Các lệnh gọi đến system settings và WindowManager.LayoutParams sẽ bị bỏ qua.

Tài liệu học tập bổ sung

Để tìm hiểu thêm về cách tối ưu hoá ứng dụng Android cho Chromebook, hãy tham khảo các tài nguyên sau:

• Hãy đọc bài đăng Đưa ứng dụng Android của bạn lên Chromebook trên Blog dành cho nhà phát triển Android.
• Xem phiên hội thảo Ứng dụng Android dành cho Chromebook và thiết bị có màn hình lớn tại Google I/O năm 2017.