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

Ứng dụng Android đóng vai trò quan trọng trong việc định nghĩa lại hình 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 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 mà 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 có thể chuyển đổi. Hãy xem danh sách đầy đủ các kiểm thử của chúng tôi để tìm hiểu thêm về việc kiểm thử ứng dụng của bạn để đảm bảo khả năng tương thích trên các thiết bị này.

Tận dụng sự hỗ trợ cho chế độ nhiều cửa sổ dạng tự do

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 trong các vùng chứa cửa sổ dạng tự do. Cách này 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 cửa sổ dạng tuỳ ý của bạn đổi kích thước mượt mà và hiển thị toàn bộ nội dung của các cửa sổ đó 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 liên 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ổ được lấy làm tiêu điểm trên cùng.
• Đảm bảo ứng dụng điều chỉnh bố cục 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 trong ứng dụng ảnh hưởng đến tất cả các cửa sổ của ứng dụng.

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

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

colorPrimaryDark dùng để tô màu 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 ở 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 vật lý 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ể sử 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 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 một cách phù hợp đối với chuột, cũng như hỗ trợ và phân biệt giữa phương thức nhập bằng chuột và bằng cách chạm.

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

• Bạn có thể nhấp chuột vào mọi mục tiêu.
• Tất cả các bề mặt cuộn bằng thao tác chạm đều cuộn khi thao tác cuộ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 một cách 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.

Nếu 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 thao tác nhấp chuột phải vào 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 tương tá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 tất cả những mục sau:

• Con trỏ tia 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ỏ đóng và mở đối với nội dung 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 các 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ợ tính năng in, thì bạn có thể dùng tổ hợp phím Control + P để mở hộp thoại in.

Tương tự, hãy xử lý tất cả thành phần quan trọng trên giao diện người dùng bằng tính năng điều hướng bằng thẻ. Điều này đặc biệt quan trọng đối với khả năng 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ả giao diện người dùng phải có trạng thái tập trung rõ ràng và tuân thủ chính sách hỗ trợ tiếp cận, như trong các hình sau:

Đừng quên 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 cốt lõi bị ẩ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ư 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 nền tảng 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 bài viết Khả năng tương thích đầu vào trên màn hình lớn.

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

Để ứng dụng của bạn có được chức năng cấp máy tính để bàn, hãy cân nhắc các đầu vào hướng đến năng suất sau đây.

Menu ngữ 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 cách nhấp chuột hoặc nút phụ trên 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 bằng thao tác kéo và thả như trong hình sau có thể mang lại chức năng năng suất hiệu quả và 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

Tính 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 tính năng hỗ trợ nâng cao cho Chromebook và máy tính bảng 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 những biến thể có thể có trong từng phần cứng bút cảm ứng khi thiết kế các thao tác tương tác với bút cảm ứng. Để nắm được thông tin sơ lược về các API bút cảm ứng, vui lòng xem nội dung 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

Hãy tận dụng 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 là gì (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 hiệu quả:

• Cấu trúc ứng dụng hiển thị.
• Giới hạn độ dài văn bản và kích thước hình ảnh ở độ rộng tối đa.
• Tận dụng không gian trang web trong thanh công cụ của ứng dụng.
• Cải thiện vị trí của các thành phần giao diện người dùng bằng cách điều chỉnh ứng dụng theo việc sử dụng chuột thay vì sử 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 tập hợp 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à chỉnh sửa giao diện người dùng nếu cần bằng cách sử dụng hệ thống cột. Tránh mở cửa sổ mới khi có thể.
• Xoá hoặc giảm mức độ quan trọng của các thành phần cuộn theo chiều ngang.
• Tránh giao diện người dùng phương thức 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ư các chỉ báo tiến trình và cảnh báo, cho mọi 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 cũng như trình đơn được thiết kế cho chuột, bàn phím và 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ương thức thay vì một hoạt động mới cho tính năng chỉnh sửa từ nhỏ đến trung bình.
• Loại bỏ hoặc sửa đổi các nút hành động nổi (FAB) để thao tác bằng bàn phím tốt hơn. Theo mặc định, vị trí FAB nằm cuối cùng theo thứ tự gắn thẻ ngang. 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 hành động tương tác khác có cấp cao hơn.

Thay đổi các 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 – mẫu này không phù hợp với ngữ cảnh của máy tính để bàn.

Khi ứ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 chuyển sang mẫu điều hướng ít 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 các nút quay lại trong ứng dụng, breadcrumb (tập hợp liên kết phân cấp) hoặc các tuyến thoát khác như nút đóng hoặc nút huỷ trong 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ó cho thấy nút quay lại trong cửa sổ hay không bằng cách đặt một lựa chọn ưu tiên bên trong thẻ <activity>. Chế độ cài đặt của 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ới 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 lại 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 bạn dùng máy ảnh ở chế độ sai hướng. Để bật chế độ tương thích, bạn cần đáp ứng các tiêu chí sau:

• Nhắm đế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 của thiết bị

Hãy xem xét các chế độ cài đặt sau đây trên thiết bị đối với các ứng dụng chạy trên ChromeOS.

Thay đổi âm lượng

Thiết bị ChromeOS là thiết bị âm lượng cố định: các ứng dụng phát âm thanh có bộ điều khiển âm lượng riêng. Tuân theo nguyên tắc Làm việc với thiết bị có dung 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:

• Đọc bài đăng Đưa ứng dụng Android của bạn lên Chromebook trong Blog dành cho nhà phát triển Android.
• Xem phiên trình bày về Ứ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.