Việc nên làm và không nên làm của quảng cáo thích ứng

Các ứng dụng thích ứng hỗ trợ màn hình ở mọi kích thước: toàn bộ màn hình thiết bị, cửa sổ có thể đổi kích thước ở chế độ nhiều cửa sổ, hướng dọc và hướng ngang, màn hình gập và mở của thiết bị có thể gập lại.

Một danh sách ngắn các chế độ cài đặt cấu hình và API cho phép bạn tạo các ứng dụng thích ứng. Tuy nhiên, một số chế độ cài đặt và API cũ không tương thích với các ứng dụng thích ứng và bạn phải tránh dùng.

Khả năng đổi kích thước

Các ứng dụng thích ứng hỗ trợ khả năng thay đổi kích thước ứng dụng và chế độ nhiều cửa sổ.

Thuộc tính resizeableActivity của các phần tử tệp kê khai <activity> và <application> cho phép bật hoặc tắt chế độ nhiều cửa sổ trên Android 11 (cấp độ API 30) trở xuống. Trên Android 12 (cấp độ API 31) trở lên, màn hình lớn hỗ trợ chế độ nhiều cửa sổ bất kể thuộc tính. Để biết thêm thông tin, hãy xem phần Hỗ trợ chế độ nhiều cửa sổ.

✓ Nên

Cho phép ứng dụng của bạn tham gia vào các trường hợp đa nhiệm, nhiều cửa sổ để tăng năng suất và mức độ hài lòng của người dùng.

Đặt resizeableActivity="true" nếu ứng dụng của bạn nhắm đến API cấp thấp hơn 24; nếu không, hãy quên nó đi – theo mặc định, giá trị này là true trên Android 7.0 (API cấp 24) trở lên.

✗ Không nên

Không đặt resizeableActivity="false" cho bất kỳ cấp độ API nào. Đừng loại trừ ứng dụng của bạn khỏi các trường hợp sử dụng liên quan đến chế độ nhiều cửa sổ.

Hướng

Các ứng dụng thích ứng hỗ trợ hướng dọc và hướng ngang bất kể kích thước màn hình hoặc chế độ cửa sổ.

Chế độ cài đặt tệp kê khai screenOrientation hạn chế hướng hoạt động.

✓ Nên

Loại bỏ chế độ cài đặt screenOrientation khỏi tệp kê khai ứng dụng.

Việc khoá hướng của ứng dụng không ngăn được các thay đổi về kích thước cửa sổ. Các ứng dụng được đổi kích thước khi chuyển sang chế độ nhiều cửa sổ, khi thiết bị được gập lại hoặc mở ra, hoặc khi cửa sổ kiểu máy tính được đổi kích thước. Ứng dụng của bạn phải hỗ trợ các thay đổi về kích thước cửa sổ bất kể chế độ cài đặt thuộc tính screenOrientation.

✗ Không nên

Đừng hạn chế hướng hoạt động. Những ứng dụng khoá hướng sẽ có giao diện dạng hòm thư (letterboxed) trên các thiết bị có màn hình lớn và kích thước cửa sổ không tương thích.

Các ứng dụng có hiệu ứng hòm thư sẽ khó được người dùng tìm thấy hơn trên Google Play đối với máy tính bảng, thiết bị có thể gập lại và thiết bị ChromeOS.

Tỷ lệ khung hình

Khi kích thước màn hình và cửa sổ thay đổi, tỷ lệ khung hình của chúng cũng thay đổi – từ cao và hẹp, đến vuông, đến ngắn và rộng.

Chế độ cài đặt tệp kê khai minAspectRatio và maxAspectRatio hạn chế tỷ lệ khung hình của ứng dụng thành các giá trị được mã hoá cứng.

✓ Nên

Điều chỉnh ứng dụng cho phù hợp với màn hình bất kể kích thước tương đối.

Loại bỏ các chế độ cài đặt minAspectRatio và maxAspectRatio khỏi tệp kê khai ứng dụng của bạn. Hoặc đảm bảo ứng dụng của bạn có thể đổi kích thước và tỷ lệ khung hình sẽ tự động điều chỉnh (xem phần Khả năng đổi kích thước).

✗ Không nên

Đừng cố gắng kiểm soát kích thước tương đối của ứng dụng. Nếu ứng dụng của bạn chạy trên một màn hình hoặc trong một cửa sổ có tỷ lệ khung hình không tương thích với tỷ lệ khung hình của ứng dụng, thì ứng dụng sẽ được tạo hòm thư.

Trên Android 14 (cấp độ API 34) trở lên, người dùng có thể ghi đè tỷ lệ khung hình của ứng dụng để mở rộng các ứng dụng dạng hòm thư nhằm lấp đầy vùng hiển thị có sẵn. Xem bài viết Chế độ tương thích với thiết bị.

Kích thước cửa sổ

Tối ưu hoá bố cục cho nhiều kích thước màn hình là tiền đề cốt lõi của thiết kế thích ứng. Các ứng dụng thích ứng tập trung vào kích thước cửa sổ ứng dụng thay vì kích thước màn hình thiết bị. Khi ứng dụng ở chế độ toàn màn hình, cửa sổ ứng dụng sẽ là màn hình thiết bị.

Các lớp kích thước cửa sổ cung cấp một cách có hệ thống để xác định và phân loại kích thước cửa sổ ứng dụng. Điều chỉnh ứng dụng bằng cách thay đổi bố cục khi lớp kích thước cửa sổ của ứng dụng thay đổi.

✓ Nên

Đánh giá kích thước cửa sổ ứng dụng dựa trên các lớp kích thước cửa sổ.

Để xác định lớp kích thước cửa sổ, hãy sử dụng hàm cấp cao currentWindowAdaptiveInfoV2() của thư viện Thích ứng Material 3 của Compose (thay thế hàm currentWindowAdaptiveInfo() không dùng nữa). Để biết thêm thông tin, hãy xem bài viết Tạo ứng dụng thích ứng.

✗ Không nên

Đừng bỏ qua tính hữu ích của các định nghĩa về lớp kích thước cửa sổ và các API tích hợp sẵn. Đừng sử dụng các API không dùng nữa để tính kích thước cửa sổ.

API không dùng nữa

Các API nền tảng cũ không đo lường chính xác cửa sổ ứng dụng; một số đo lường màn hình thiết bị, một số loại trừ phần trang trí hệ thống.

✓ Nên

Sử dụng WindowManager#getCurrentWindowMetrics() và WindowMetrics#getBounds() để lấy kích thước cửa sổ ứng dụng. Sử dụng WindowMetrics#getDensity() để lấy mật độ hiển thị.

✗ Không nên

Đừng sử dụng các API Display không dùng nữa sau đây để xác định kích thước cửa sổ:

  • getSize(): Không dùng nữa trong Android 11 (cấp độ API 30)
  • getMetrics(): Không dùng nữa trong Android 11 (cấp độ API 30)
  • getRealSize(): Không dùng nữa trong Android 12 (cấp độ API 31)
  • getRealMetrics(): Không dùng nữa trong Android 12 (cấp độ API 31)

Soạn thư

Jetpack Compose được thiết kế để phát triển giao diện người dùng thích ứng. Không có XML, không có tệp bố cục, không có trình đủ tiêu chuẩn tài nguyên. Chỉ các thành phần kết hợp không trạng thái dựa trên Kotlin như Column, Row và Box mô tả giao diện người dùng của bạn, cũng như các đối tượng sửa đổi như offset, padding và size giúp thêm hành vi vào các phần tử giao diện người dùng.

✓ Nên

Xây dựng bằng Compose. Luôn nắm bắt thông tin về các tính năng và bản phát hành mới nhất.

✗ Không nên

Đừng dựa vào công nghệ lỗi thời. Đừng để ứng dụng của bạn trở nên lỗi thời.

Thư viện Compose Material 3 Adaptive

Thư viện Thích ứng Compose Material 3 cung cấp các thành phần và API giúp phát triển các ứng dụng thích ứng.

✓ Nên

Sử dụng các API sau để giúp ứng dụng của bạn thích ứng:

  • NavigationSuiteScaffold: Chuyển đổi giữa thanh điều hướng và thanh điều hướng dọc tuỳ thuộc vào lớp kích thước cửa sổ ứng dụng.
  • ListDetailPaneScaffold: Triển khai bố cục chuẩn danh sách-chi tiết. Điều chỉnh bố cục theo kích thước cửa sổ ứng dụng.
  • SupportingPaneScaffold: Triển khai bố cục chuẩn của ngăn bổ trợ.
✗ Không nên

Đừng phát minh lại bánh xe. Đừng bỏ lỡ những lợi ích về hiệu suất của nhà phát triển do tất cả các thư viện Jetpack Compose mang lại.

Bố cục

Người dùng mong muốn các ứng dụng tận dụng tối đa không gian hiển thị hiện có bằng nội dung bổ sung hoặc các chế độ điều khiển nâng cao.

Các ứng dụng thích ứng tối ưu hoá bố cục dựa trên những thay đổi về màn hình, đặc biệt là những thay đổi về kích thước cửa sổ ứng dụng hoặc những thay đổi về tư thế thiết bị.

✓ Nên

Thay đổi các thành phần giao diện người dùng khi kích thước cửa sổ thay đổi để tận dụng không gian hiển thị có sẵn. Ví dụ: thay thế thanh điều hướng dưới cùng được dùng trên các kích thước cửa sổ thu gọn bằng một dải điều hướng dọc trên các cửa sổ có kích thước trung bình và mở rộng. Định vị lại các hộp thoại để có thể truy cập trên tất cả màn hình.

Sắp xếp nội dung thành các ngăn để bật bố cục nhiều ngăn như danh sách chi tiết và ngăn bổ trợ cho màn hình hiển thị nội dung động.

✓ Nên: Sắp xếp các hoạt động danh sách và chi tiết trong bố cục hai ngăn.
✗ Không nên

Nếu bạn không sử dụng ngăn nội dung, đừng chỉ kéo dài các phần tử trên giao diện người dùng để lấp đầy không gian hiển thị có sẵn. Các dòng văn bản dài rất khó đọc. Các nút bị kéo giãn trông có vẻ được thiết kế kém. Nếu bạn sử dụng Modifier.fillMaxWidth, đừng cho rằng đó là hành vi phù hợp cho mọi kích thước màn hình.

✗ Không: Bố cục bị kéo giãn để lấp đầy cửa sổ đang mở rộng.

Thiết bị đầu vào

Người dùng không chỉ sử dụng màn hình cảm ứng để tương tác với các ứng dụng.

Các ứng dụng thích ứng hỗ trợ bàn phím, chuột và bút cảm ứng bên ngoài để mang lại trải nghiệm người dùng nâng cao và giúp người dùng làm việc hiệu quả hơn trên mọi loại hệ số hình dạng.

✓ Nên

Tận dụng chức năng tích hợp của khung Android để điều hướng bằng phím tab trên bàn phím và nhấp, chọn và cuộn bằng chuột hoặc bàn di chuột. Xuất bản các phím tắt của ứng dụng trong Trình trợ giúp phím tắt.

Sử dụng thư viện Material 3 của Jetpack để cho phép người dùng viết vào bất kỳ thành phần TextField nào bằng bút cảm ứng.

✗ Không nên

Đừng khiến người dùng không thể sử dụng các phương thức nhập thay thế. Không gây ra các vấn đề về khả năng tiếp cận.

Tóm tắt

  • Tạo ứng dụng bằng Compose và thư viện Thích ứng Material 3
  • Dựa vào các lớp kích thước cửa sổ để tạo bố cục
  • Tạo bố cục nhiều ngăn
  • Làm cho ứng dụng có thể thay đổi kích thước
  • Không bao giờ khoá hướng hoạt động
  • Không hạn chế tỷ lệ khung hình
  • Hỗ trợ các phương thức nhập khác ngoài thao tác chạm
  • Tránh dùng các API không còn được hỗ trợ

✓ Nên làm những gì người dùng mong đợi: tối ưu hoá ứng dụng cho tính đa dạng của thiết bị mà người dùng sử dụng hằng ngày.

✗ Đừng chờ đợi. Hãy bắt đầu ngay hôm nay!