Làm quen với màn hình lớn

Màn hình lớn giúp làm tăng cơ hội phát triển ứng dụng. Màn hình lớn của máy tính bảng, thiết bị có thể gập lại và thiết bị ChromeOS làm nổi bật nội dung, hỗ trợ nhiều thao tác cũng như mang lại trải nghiệm giao diện mà người dùng không có được trên thiết bị có màn hình nhỏ.

Để làm quen với quá trình phát triển trên màn hình lớn, hãy làm theo nguyên tắc về chất lượng đối với ứng dụng có màn hình lớn. Hướng dẫn này là bộ yêu cầu toàn diện được thiết kế để giúp ứng dụng của bạn hoạt động tốt nhất có thể trên màn hình lớn.

Nguyên tắc về chất lượng được sắp xếp theo ba bậc: Phù hợp với màn hình lớn, Tối ưu hoá cho màn hình lớn và Dành riêng cho màn hình lớn. Thêm các chức năng cho màn hình lớn vào ứng dụng bằng cách triển khai từng cấp độ, bắt đầu từ cấp độ Phù hợp với màn hình lớn. Nếu hiện tại bạn đang có một ứng dụng, hãy kiểm thử theo nguyên tắc về chất lượng để xác định cấp độ mà ứng dụng của bạn đang hỗ trợ, rồi triển khai cấp tính năng theo cấp độ cho đến khi ứng dụng của bạn dành riêng cho màn hình lớn.

Phù hợp với màn hình lớn

Ứng dụng của bạn phù hợp với màn hình lớn khi người dùng có thể truy cập tất cả chức năng trên thiết bị màn hình lớn. Ứng dụng phải hỗ trợ hướng dọc và ngang cũng như chế độ nhiều cửa sổ, nhưng bố cục ứng dụng và giao diện người dùng có thể chưa tối ưu.

Cấu hình và tính liên tục

Các thay đổi về cấu hình như xoay thiết bị, thay đổi kích thước cửa sổ trong chế độ nhiều cửa sổ cũng như đóng hoặc mở thiết bị có thể gập lại có thể khiến người dùng mất ngữ cảnh hoặc thậm chí tệ nhất là mất dữ liệu.

Hãy đảm bảo ứng dụng của bạn giữ lại hoặc khôi phục trạng thái trong quá trình thay đổi cấu hình và tiếp tục tác vụ đang diễn ra, chẳng hạn như phát nội dung đa phương tiện.

Để biết thêm thông tin chi tiết, vui lòng xem hướng dẫn dưới đây dành cho nhà phát triển:

Chế độ nhiều cửa sổ

Màn hình lớn giúp chế độ nhiều cửa sổ trở nên hữu dụng và hiệu quả hơn. Hãy cho phép ứng dụng của bạn chạy ở chế độ nhiều cửa sổ cùng với các ứng dụng khác ở chế độ chia đôi màn hình hoặc chế độ dạng thức tuỳ ý.

Khi ứng dụng của bạn ở chế độ nhiều cửa sổ, hãy sử dụng API WindowMetrics để xác định chính xác kích thước của cửa sổ ứng dụng.

Hãy xem phần Hỗ trợ nhiều cửa sổ.

Tiếp tục nhiều lần (multi-resume)

Trên Android 10 (API cấp 29) trở lên, tất cả hoạt động vẫn ở trạng thái RESUMED khi thiết bị ở chế độ nhiều cửa sổ. Trước Android 10, các hoạt động không tập trung vẫn ở trạng thái STARTED, nhưng không phải ở trạng thái RESUMED.

Hãy đảm bảo ứng dụng hỗ trợ chế độ tiếp tục nhiều lần bằng cách liên tục duy trì các quy trình đang diễn ra (chẳng hạn như phát nội dung đa phương tiện hoặc tải tệp xuống khi ứng dụng không còn là tiêu điểm). Ứng dụng cũng phải xử lý trường hợp mất tài nguyên riêng biệt như máy ảnh và micrô của thiết bị.

Vui lòng xem nội dung Vòng đời chế độ nhiều cửa sổ trong phần Hỗ trợ chế độ nhiều cửa sổ.

Bản xem trước của máy ảnh

Nếu ứng dụng của bạn có bản xem trước của máy ảnh, hãy kiểm tra bản xem trước để biết hướng và tỷ lệ khung hình trên màn hình lớn. Màn hình lớn của thiết bị có thể gập lại theo hướng dọc có thể có tỷ lệ khung hình ngang, đồng thời, chế độ nhiều cửa sổ có thể cho thấy ứng dụng theo hướng dọc trong cửa sổ có thể đổi kích thước khi thiết bị ở chế độ ngang.

Xem các mục sau đây:

Chiếu nội dung nghe nhìn

Một phép chiếu nội dung đa phương tiện tạo ra màn hình ảo dựa trên ranh giới của màn hình (gốc) thực tế. Màn hình thực tế là toàn bộ màn hình của thiết bị, ngay cả khi thiết bị ở chế độ nhiều cửa sổ và ứng dụng tạo phép chiếu nội dung đa phương tiện đang chạy trong cửa sổ.

Để có được ranh giới chính xác cho phép chiếu nội dung nghe nhìn trên màn hình lớn, hãy sử dụng API WindowMetrics được giới thiệu trong Android 11 (API cấp 30), hoặc để tương thích xuống đến API cấp 14, API Jetpack WindowsManager WindowMetrics.

Xem Phép chiếu nội dung nghe nhìn trên màn hình lớn.

Hỗ trợ cơ bản cho các thiết bị đầu vào bên ngoài

Người dùng thường kết nối bàn phím ngoài hoặc chuột với máy tính bảng. Chromebook tích hợp sẵn bàn phím và bàn di chuột. Hỗ trợ thiết bị đầu vào bên ngoài bằng cách cho phép ứng dụng xử lý thao tác qua bàn phím, chuột và bàn di chuột, chẳng hạn như:

  • Chọn nút, trường nhập dữ liệu và biểu tượng điều hướng
  • Chọn mục trong trình đơn, nút chọn, hộp đánh dấu và văn bản
  • Di chuyển theo chiều dọc và chiều ngang trong các phần tử có thể cuộn được (chẳng hạn như danh sách)

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ối ưu hoá cho màn hình lớn

Trải nghiệm người dùng sẽ sống động, hiệu quả và hấp dẫn khi ứng dụng của bạn được tối ưu hoá cho màn hình lớn. Người dùng sẽ thích trải nghiệm ứng dụng của bạn trên thiết bị có màn hình lớn.

Bố cục thích ứng/thích ứng

Để hỗ trợ cho cả màn hình lớn và nhỏ, hãy thiết kế bố cục đáp ứng/thích ứng nhằm cung cấp trải nghiệm người dùng tối ưu cho mọi loại thiết bị.

Hãy bắt đầu bằng cách tự làm quen với các nội dung sau:

Các lớp kích thước cửa sổ

Lớp kích thước cửa sổ là tập hợp điểm ngắt khung nhìn được cố định giúp bạn triển khai thiết kế đáp ứng/thích ứng. Hãy sử dụng lớp kích thước cửa sổ để phân loại khu vực hiển thị có sẵn cho ứng dụng ở dạng nhỏ gọn, trung bình hoặc mở rộng, rồi áp dụng bố cục đã được tối ưu hoá.

Vui lòng xem nội dung Các loại kích thước cửa sổ trong phần Hỗ trợ nhiều kích thước màn hình.

Điều hướng trong ứng dụng thích ứng

Trên các màn hình nhỏ, thanh điều hướng dưới cùng hoạt động khá ổn, nhưng ở màn hình lớn, dải điều hướng hoặc ngăn điều hướng được tận dụng tốt hơn với không gian màn hình rộng hơn. Điều chỉnh cách điều hướng trong ứng dụng theo những thay đổi kích thước màn hình.

Xem Material Design – Áp dụng bố cục.

Thành phần thích ứng trên giao diện người dùng

Định dạng các thành phần trên giao diện người dùng dựa vào kích thước màn hình. Giới hạn chiều rộng của nút, thẻ và trường văn bản có chiều rộng đầy đủ trên màn hình nhỏ thành kích thước phù hợp về mặt chức năng trên màn hình lớn. Vui lòng tránh để hộp thoại và các cửa sổ phụ khác lấp đầy toàn bộ màn hình. Xác định vị trí của các trình đơn theo bối cảnh và cửa sổ bật lên khác liên quan đến phần tử bên cạnh thành phần mà người dùng đã chọn, không được căn giữa trên màn hình.

Vui lòng xem Thành phần trong Material Design, bao gồm các Nút, Trường văn bản, Trình đơn và Hộp thoại.

Hỗ trợ tiếp cận

Tối ưu hoá ứng dụng để hỗ trợ tiếp cận các tính năng (a11y) như Thẻ và lệnh điều hướng bằng mũi tên. Cung cấp phím tắt cho các thao tác thường dùng như chọn, sao chép, cắt và dán. Kích hoạt chế độ điều khiển bằng bàn phím cho việc phát nội dung đa phương tiện; ví dụ: bật thanh dấu cách để phát và tạm dừng nội dung đa phương tiện hoặc phím Enter để gửi tin nhắn trong ứng dụng giao tiếp.

Xem phần Xây dựng một ứng dụng dễ tiếp cận hơn.

Hỗ trợ nâng cao cho các thiết bị đầu vào bên ngoài

Ứng dụng được tối ưu hoá cho màn hình lớn cung cấp dịch vụ hỗ trợ nâng cao cho nội dung đầu vào của bàn phím, chuột và bàn di chuột. Trình đơn tuỳ chọn có thể truy cập được bằng hành vi nhấp chuột phải trên chuột và bàn di chuột. Bạn có thể thu phóng nội dung ứng dụng bằng con lăn chuột và cử chỉ chụm bàn di chuột. Thành phần trên giao diện người dùng có các trạng thái di chuột.

Dành riêng cho màn hình lớn

Ứng dụng dành riêng cho màn hình lớn nổi bật hơn so với các ứng dụng khác trên cửa hàng ứng dụng. Ứng dụng dành riêng cho màn hình lớn mang lại trải nghiệm mà người dùng không có được trên màn hình nhỏ.

Đa nhiệm

Màn hình lớn dễ dàng hơn cho việc xử lý hoạt động đa nhiệm. Chế độ nhiều cửa sổ cho phép bạn làm nhiều việc cùng lúc, nhưng các chế độ hiển thị đặc biệt cũng có thể là chế độ hình trong hình và nhiều chế độ.

Chế độ Hình trong hình

Nếu ứng dụng đang phát nội dung video, hãy triển khai chế độ hình trong hình để video tiếp tục được phát khi người dùng đang tương tác với một ứng dụng khác.

Vui lòng xem nội dung phần Hỗ trợ chế độ hình trong hình (PiP).

Chế độ nhiều phiên bản

Tăng hiệu suất trong các ứng dụng như trình chỉnh sửa tài liệu hoặc trình quản lý nội dung bằng cách cho phép hai hoặc nhiều phiên bản ứng dụng chạy cùng lúc.

Vui lòng xem nội dung Nhiều phiên bản trong phần Hỗ trợ nhiều cửa sổ.

Thiết bị có thể gập lại

Có thể nói các thiết bị gập có màn hình lớn là sự kết hợp giữa một chiếc điện thoại và một máy tính bảng. Các tính năng gấp chẳng hạn như chế độ trên mặt bàn (gập theo chiều ngang) và chế độ sách (gập theo chiều dọc) mang đến cho người dùng những trải nghiệm mới mẻ. Tạo sự khác biệt cho ứng dụng bằng cách hỗ trợ các tính năng độc đáo của thiết bị gập.

Xem các mục sau đây:

Kéo và thả

Màn hình lớn rất phù hợp để tương tác kéo và thả – trong một ứng dụng hoặc trên Android 7.0 (API cấp 24) trở lên, giữa các ứng dụng ở chế độ nhiều cửa sổ.

Tăng hiệu suất và mức độ tương tác của người dùng bằng cách thêm các tính năng kéo và thả vào ứng dụng của bạn.

Vui lòng xem nội dung phần Kéo và thả.

Hỗ trợ riêng biệt cho các thiết bị đầu vào bên ngoài

Cung cấp dịch vụ hỗ trợ giống máy tính cho các thiết bị đầu vào bên ngoài. Tạo một bộ phím tắt toàn diện và tuỳ chỉnh được. Bật tổ hợp bàn phím và chuột hoặc bàn phím và bàn di chuột, chẳng hạn như Ctrl + nhấp/Ctrl + nhấn và Shift + nhấp/Shift + nhấn để mang lại khả năng mở rộng.

Hiện thanh cuộn trong khi người dùng cuộn nội dung bằng chuột hoặc bàn di chuột. Hiện thành phần nội dung bị ẩn như trình đơn fly-out hoặc chú giải công cụ trên chuột hoặc bàn di chuột. Bao gồm các trình đơn kiểu màn hình và trình đơn theo bối cảnh. Giúp bạn thay đổi kích thước bảng điều khiển giao diện người dùng bằng chuột hoặc bàn di chuột. Dùng tính năng nhấp nhiều lần bằng chuột, nhấn nhiều lần bằng bàn di chuột.

Bút cảm ứng

Ứng dụng cao cấp hỗ trợ thiết bị màn hình lớn được trang bị bút cảm ứng. Bút cảm ứng cho phép người dùng vẽ, ghi, xoá, kéo và thả cũng như thực hiện nhiều thao tác chạm và cử chỉ khác.

Hỗ trợ bút cảm ứng nâng cao bao gồm độ nhạy áp lực, khả năng phát hiện độ nghiêng cũng như từ chối lòng bàn tay và ngón tay (theo đó, thao tác chạm không được ghi nhận).

Mang lại trải nghiệm người dùng đặc biệt trên các thiết bị cao cấp bằng cách hỗ trợ đầy đủ tính năng nhập bằng bút cảm ứng.

Vui lòng xem phần Bút cảm ứng trong phần Khả năng tương thích đầu vào trên màn hình lớn.

Bước tiếp theo

Xem nguyên tắc về chất lượng của ứng dụng trên màn hình lớn để bắt đầu xây dựng ứng dụng của bạn sao cho phù hợp với màn hình lớn, tối ưu hoá cho màn hình lớn hoặc dành riêng cho màn hình lớn.

Tài nguyên khác