Hơn 300 triệu thiết bị Android màn hình lớn, bao gồm máy tính bảng, thiết bị có thể gập lại, Googlebook, thiết bị ChromeOS, màn hình ô tô và TV, đang được sử dụng hiện nay và con số này không ngừng tăng lên. Để mang lại trải nghiệm tối ưu cho người dùng trên số lượng và sự đa dạng ngày càng tăng của các thiết bị màn hình lớn cũng như trên điện thoại tiêu chuẩn, hãy xây dựng các ứng dụng thích ứng.
Ứng dụng thích ứng là gì?
Ứng dụng thích ứng thay đổi bố cục dựa trên các thay đổi trong màn hình ứng dụng, chủ yếu là kích thước của cửa sổ ứng dụng. Tuy nhiên, ứng dụng thích ứng cũng thích ứng với những thay đổi về tư thế của thiết bị có thể gập lại, chẳng hạn như tư thế trên mặt bàn hoặc tư thế quyển sách, cũng như những thay đổi về mật độ màn hình và cỡ chữ.
Thay vì chỉ kéo giãn hoặc thu nhỏ các thành phần trên giao diện người dùng để thích ứng với nhiều kích thước cửa sổ, ứng dụng thích ứng sẽ thay thế các thành phần bố cục và hiện hoặc ẩn nội dung. Ví dụ: trên điện thoại thông thường, một ứng dụng thích ứng có thể hiển thị thanh điều hướng dưới cùng, nhưng trên màn hình lớn, ứng dụng đó sẽ hiển thị thanh điều hướng dọc. Trên màn hình lớn, ứng dụng thích ứng sẽ hiển thị nhiều nội dung hơn, chẳng hạn như bố cục danh sách chi tiết hai ngăn; trên màn hình nhỏ, ít nội dung hơn, danh sách hoặc chi tiết.
Trước đây, các ứng dụng thường chạy ở chế độ toàn màn hình. Hiện nay, các ứng dụng chạy ở chế độ nhiều cửa sổ trong các cửa sổ có kích thước tuỳ ý, không phụ thuộc vào kích thước màn hình thiết bị. Người dùng có thể thay đổi kích thước cửa sổ bất cứ lúc nào. Vì vậy, ngay cả trên một loại thiết bị, ứng dụng cũng phải thích ứng.
Ứng dụng thích ứng có giao diện đẹp mắt và hoạt động tốt trên mọi thiết bị ở mọi cấu hình.
Tại sao nên tạo giao diện người dùng thích ứng?
Người dùng mong đợi ứng dụng của bạn hoạt động hoàn hảo trên tất cả thiết bị của họ và cung cấp các tính năng nâng cao trên màn hình lớn. Người dùng có thể làm nhiều việc cùng lúc ở chế độ nhiều cửa sổ để nâng cao trải nghiệm trong ứng dụng và tăng năng suất.
Các ứng dụng chỉ có thể thực hiện một tác vụ trên điện thoại tiêu chuẩn sẽ bỏ lỡ cơ sở người dùng ngày càng mở rộng với nhiều khả năng.
Google Play
Google Play cung cấp các bộ sưu tập và đề xuất ứng dụng dành riêng cho máy tính bảng và thiết bị gập, giúp người dùng khám phá các ứng dụng chất lượng cao.
Play xếp hạng các ứng dụng và trò chơi được tối ưu hoá cho màn hình lớn cao hơn so với các ứng dụng chưa được tối ưu hoá. Play xếp hạng dựa trên nguyên tắc về chất lượng ứng dụng cho màn hình lớn. Thứ hạng cao hơn giúp tăng khả năng được khám phá bằng cách cho phép người dùng nhiều thiết bị xem điểm xếp hạng và bài đánh giá dành riêng cho màn hình lớn trên điện thoại của họ.
Những ứng dụng không đáp ứng tiêu chuẩn chất lượng của Cửa hàng Play dành cho màn hình lớn sẽ hiển thị cảnh báo trên trang thông tin chi tiết ứng dụng. Cảnh báo này cho người dùng biết rằng ứng dụng có thể không hoạt động hiệu quả trên thiết bị màn hình lớn của họ.
Xây dựng ứng dụng thích ứng để tăng khả năng được khám phá trên Google Play và tối đa hoá số lượng thiết bị có thể tải ứng dụng của bạn xuống.
Cách bắt đầu
Hãy cân nhắc thiết kế thích ứng trong tất cả các giai đoạn phát triển ứng dụng, từ lập kế hoạch đến triển khai. Thông báo cho nhà thiết kế đồ hoạ về thiết kế thích ứng. Thiết kế ứng dụng của bạn sao cho thích ứng và bạn sẽ xây dựng được một ứng dụng dễ quản lý, có thể mở rộng và sẵn sàng cho các kiểu dáng và chế độ cửa sổ trong tương lai.
Để tạo một ứng dụng thích ứng hỗ trợ mọi kích thước và cấu hình màn hình, hãy làm như sau:
- Sử dụng các lớp kích thước cửa sổ để đưa ra quyết định về bố cục
- Xây dựng bằng thư viện Thích ứng Compose Material 3
- Hỗ trợ các phương thức nhập ngoài thao tác chạm
- Kiểm thử trên mọi loại thiết bị
Kỹ năng Android
Xem trên GitHubGiúp ứng dụng thích ứng
adaptive để cập nhật giao diện người dùng của ứng dụng sao cho phù hợp với nhiều thiết bị Android và màn hình Android.android skills add adaptiveCác lớp kích thước cửa sổ
Kích thước cửa sổ ứng dụng có thể khác nhau trên các thiết bị khác nhau (hoặc trên cùng một thiết bị trong trường hợp thiết bị có thể gập lại), ngay cả khi ứng dụng ở chế độ toàn màn hình. Các hướng thiết bị khác nhau sẽ tạo ra tỷ lệ khung hình khác nhau. Ở chế độ nhiều cửa sổ, kích thước, tỷ lệ khung hình và hướng của cửa sổ ứng dụng có thể khác với kích thước, tỷ lệ khung hình và hướng của màn hình thiết bị.
Ứng dụng thích ứng đơn giản hoá và khái quát hoá vấn đề xác định và quản lý kích thước cửa sổ, tỷ lệ khung hình và hướng bằng cách chỉ xem xét cửa sổ ứng dụng khi kết xuất bố cục. Cách này cũng hiệu quả khi cửa sổ ứng dụng chiếm toàn màn hình.
Các lớp kích thước cửa sổ phân loại cửa sổ ứng dụng thành thu gọn, trung bình hoặc mở rộng dựa trên chiều rộng hoặc chiều cao của cửa sổ.
Tính toán WindowSizeClass của ứng dụng bằng hàm cấp cao nhất currentWindowAdaptiveInfo() của thư viện Compose Material 3 Adaptive. Hàm này trả về một thực thể của WindowAdaptiveInfo, chứa windowSizeClass. Ứng dụng của bạn
sẽ nhận được thông tin cập nhật bất cứ khi nào lớp kích thước cửa sổ thay đổi:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Ngăn nội dung
Bố cục của một hoạt động đôi khi được gọi là màn hình. Ví dụ: ứng dụng của bạn có thể có màn hình chính, màn hình danh sách và màn hình chi tiết về mục. Thuật ngữ này ngụ ý rằng mỗi hoạt động sẽ lấp đầy màn hình thiết bị.
Tuy nhiên, trên màn hình thiết bị đủ lớn để hỗ trợ lớp kích thước cửa sổ có chiều rộng mở rộng, nhiều màn hình hoạt động có thể xuất hiện trên màn hình cùng một lúc. Ngăn là thuật ngữ chính xác hơn cho màn hình nội dung của từng hoạt động.
Các lớp kích thước cửa sổ cho phép bạn xác định số lượng ngăn nội dung cần hiển thị trong bố cục nhiều ngăn, như được chỉ định trong Material Design.
Ngăn có thể điều hướng. Trên các lớp kích thước cửa sổ thu gọn và trung bình, ứng dụng sẽ hiển thị một ngăn duy nhất; do đó, thao tác điều hướng đến bất kỳ đích đến nào cũng sẽ hiển thị một ngăn.
Trên lớp kích thước cửa sổ mở rộng, ứng dụng có thể hiển thị nội dung có liên quan trong nhiều ngăn, chẳng hạn như bố cục danh sách-chi tiết. Thao tác điều hướng đến một trong hai ngăn sẽ hiển thị bố cục hai ngăn. Nếu kích thước cửa sổ thay đổi thành nhỏ gọn hoặc trung bình, thì các ứng dụng thích ứng chỉ hiển thị một ngăn, đích đến điều hướng, danh sách hoặc thông tin chi tiết.
|
|
|
Compose Material 3 Thích ứng
Jetpack Compose là phương pháp khai báo hiện đại để xây dựng các ứng dụng thích ứng mà không cần phải sao chép và duy trì nhiều tệp bố cục.
Thư viện thích ứng Material 3 của Compose chứa các thành phần kết hợp quản lý các lớp kích thước cửa sổ, thành phần điều hướng, bố cục nhiều ngăn và tư thế gập cũng như vị trí bản lề, ví dụ:
NavigationSuiteScaffold: Tự động chuyển đổi giữa thanh điều hướng và dải điều hướng tuỳ thuộc vào lớp kích thước cửa sổ ứng dụng và tư thế thiết bị.ListDetailPaneScaffold: Triển khai bố cục chính tắc danh sách-chi tiết.Điều chỉnh bố cục cho phù hợp với kích thước cửa sổ ứng dụng. Trình bày danh sách và thông tin chi tiết của một mục trong danh sách trong các ngăn cạnh nhau trên lớp kích thước cửa sổ mở rộng, nhưng chỉ trình bày danh sách hoặc thông tin chi tiết trên các lớp kích thước cửa sổ thu gọn và trung bình.
SupportingPaneScaffold: Triển khai bố cục chuẩn của ngăn hỗ trợ.Hiển thị ngăn nội dung chính và ngăn bổ trợ trên lớp kích thước cửa sổ mở rộng, nhưng chỉ hiển thị ngăn nội dung chính trên lớp kích thước cửa sổ thu gọn và trung bình.
Thư viện Compose Material 3 Thích ứng là một phần phụ thuộc quan trọng để phát triển ứng dụng thích ứng.
Cấu hình và tính liên tục
Ứng dụng thích ứng duy trì tính liên tục trong quá trình thay đổi cấu hình.
Thay đổi về cấu hình xảy ra khi cửa sổ ứng dụng được đổi kích thước, tư thế của thiết bị có thể gập thay đổi, hoặc mật độ màn hình hay phông chữ thay đổi.
Theo mặc định, các thay đổi về cấu hình sẽ tạo lại hoạt động của ứng dụng và tất cả trạng thái hoạt động sẽ bị mất. Để duy trì tính liên tục, các ứng dụng thích ứng sẽ lưu trạng thái trong phương thức onSaveInstanceState() của hoạt động hoặc trong ViewModel.
Tư thế
Ứng dụng thích ứng phản hồi với các thay đổi về tư thế của thiết bị có thể gập lại. Các tư thế bao gồm tư thế trên mặt bàn và tư thế trang sách.
Giao diện WindowInfoTracker trong Jetpack WindowManager cho phép bạn lấy danh sách các đối tượng DisplayFeature cho thiết bị. Trong số các tính năng hiển thị có FoldingFeature.State, cho biết thiết bị đang mở hoàn toàn hay mở một nửa.
Thư viện Compose Material 3 Adaptive cung cấp hàm cấp cao nhất currentWindowAdaptiveInfo(), trả về một thực thể của WindowAdaptiveInfo chứa windowPosture.
Nhập ngoài thao tác chạm
Người dùng thường kết nối bàn phím, bàn di chuột, chuột và bút cảm ứng bên ngoài với các thiết bị màn hình lớn. Thiết bị ngoại vi giúp nâng cao năng suất của người dùng, độ chính xác của dữ liệu đầu vào, khả năng thể hiện cá nhân và khả năng hỗ trợ tiếp cận. Hầu hết thiết bị ChromeOS đều tích hợp sẵn bàn phím và bàn di chuột.
Ứng dụng thích ứng hỗ trợ các thiết bị đầu vào bên ngoài, nhưng khung Android sẽ thực hiện phần lớn công việc cho bạn:
Jetpack Compose 1.7 trở lên: Thao tác di chuyển bằng phím Tab trên bàn phím và thao tác nhấp, chọn và cuộn bằng chuột hoặc bàn di chuột được hỗ trợ theo mặc định.
Thư viện
androidx.compose.material3của Jetpack: Cho phép người dùng viết vào bất kỳ thành phầnTextFieldnào bằng bút cảm ứng.Trình trợ giúp phím tắt: Giúp người dùng khám phá các phím tắt của nền tảng Android và ứng dụng. Xuất bản phím tắt của ứng dụng trong Trình trợ giúp phím tắt bằng cách ghi đè lệnh gọi lại cửa sổ
onProvideKeyboardShortcuts().
Để hỗ trợ đầy đủ các kiểu dáng ở mọi kích thước, ứng dụng thích ứng hỗ trợ mọi loại phương thức nhập.
Cách kiểm thử ứng dụng thích ứng
Kiểm thử nhiều kích thước màn hình và cửa sổ cũng như nhiều cấu hình thiết bị. Sử dụng ảnh chụp màn hình phía máy chủ và bản xem trước trong Compose để kiểm tra bố cục ứng dụng. Chạy ứng dụng trên trình mô phỏng Android Studio và thiết bị Android từ xa được lưu trữ trong trung tâm dữ liệu của Google.
Nguyên tắc về chất lượng ứng dụng cho màn hình lớn
Nguyên tắc về chất lượng ứng dụng trên màn hình lớn giúp bạn xác minh rằng ứng dụng thích ứng của bạn hoạt động tốt trên máy tính bảng, thiết bị có thể gập lại và thiết bị ChromeOS. Nguyên tắc này bao gồm các bài kiểm thử cho phép bạn xác minh chức năng của ứng dụng cho hành trình quan trọng của người dùng. Mặc dù các nguyên tắc này tập trung vào màn hình lớn, nhưng chúng tương thích với mọi kích thước màn hình.
Nhiều cấu hình
Giao diện DeviceConfigurationOverride trong Compose 1.7 trở lên cho phép bạn ghi đè nhiều khía cạnh của cấu hình thiết bị. API này mô phỏng nhiều cấu hình thiết bị theo cách được bản địa hoá cho bất kỳ nội dung composable nào mà bạn muốn kiểm thử. Ví dụ: bạn có thể kiểm thử nhiều kích thước giao diện người dùng tuỳ ý trong một lần chạy bộ kiểm thử trên một thiết bị hoặc trình mô phỏng.
Với hàm mở rộng DeviceConfigurationOverride.then(), bạn có thể kiểm thử nhiều tham số cấu hình cùng lúc, chẳng hạn như cỡ chữ, ngôn ngữ, giao diện và kích thước bố cục.
Ảnh chụp màn hình phía máy chủ
Kiểm thử ảnh chụp màn hình phía máy chủ là một cách nhanh chóng và có thể mở rộng để xác minh giao diện trực quan của bố cục ứng dụng. Sử dụng ảnh chụp màn hình phía máy chủ để kiểm thử giao diện người dùng cho nhiều kích thước màn hình.
Để biết thêm thông tin, hãy xem bài viết Kiểm thử ảnh chụp màn hình trong bản xem trước của Compose.
Bản xem trước trong Compose
Bản xem trước của Compose cho phép bạn kiểm tra giao diện người dùng của ứng dụng trong chế độ xem thiết kế của Android Studio. Bản xem trước sử dụng các chú thích, chẳng hạn như @PreviewScreenSizes, @PreviewFontScale và @PreviewLightDark để cho phép bạn xem nội dung composable trong nhiều cấu hình. Bạn thậm chí có thể tương tác với các bản xem trước.
Android Studio cũng làm nổi bật các vấn đề thường gặp về khả năng hữu dụng trong bản xem trước, chẳng hạn như các nút hoặc trường văn bản quá rộng.
Để biết thêm thông tin, hãy xem bài viết Xem trước giao diện người dùng bằng bản xem trước composable.
Trình mô phỏng
Android Studio cung cấp nhiều trình mô phỏng để kiểm thử nhiều kích thước bố cục:
- Trình mô phỏng có thể đổi kích thước: Mô phỏng điện thoại, máy tính bảng hoặc thiết bị có thể gập lại và cho phép bạn chuyển đổi giữa các thiết bị này một cách nhanh chóng
- Trình mô phỏng Pixel Fold: Mô phỏng điện thoại gập màn hình lớn Pixel Fold
- Trình mô phỏng Pixel Tablet: Mô phỏng thiết bị màn hình lớn Pixel Tablet
- Trình mô phỏng máy tính: Cho phép bạn kiểm thử cửa sổ tuỳ ý, thao tác di chuột và phím tắt
Truyền trực tuyến thiết bị từ xa
Kết nối an toàn với các thiết bị Android từ xa được lưu trữ trong các trung tâm dữ liệu trên Google và chạy ứng dụng của bạn trên các thiết bị Pixel và Samsung mới nhất. Cài đặt và gỡ lỗi ứng dụng, chạy các lệnh ADB, xoay và gập thiết bị để xác minh rằng ứng dụng của bạn hoạt động tốt trên nhiều thiết bị thực.
Tính năng truyền trực tuyến thiết bị từ xa được tích hợp vào Android Studio. Để biết thêm thông tin, hãy xem bài viết Truyền trực tuyến thiết bị Android, do Firebase cung cấp.
Tài nguyên khác
- Bản trình bày I/O: Xây dựng ứng dụng Android thích ứng