Hơn 300 triệu thiết bị Android có màn hình lớn, bao gồm cả máy tính bảng, thiết bị có thể gập lại, thiết bị ChromeOS, màn hình ô tô và TV đang được sử dụng ngày nay cùng nhiều tính năng khác đến liên tục. Để mang lại trải nghiệm người dùng tối ưu khi số lượng người dùng ngày càng tăng và sự đa dạng của thiết bị màn hình lớn—như cũng như trên điện thoại chuẩn — bản dựng các ứng dụng thích ứng.
Ứng dụng thích ứng là gì?
Bố cục đổi mới ứng dụng thích ứng dựa trên các thay đổi trên màn hình ứng dụng, chủ yếu những thay đổi về kích thước của cửa sổ ứng dụng. Tuy nhiên, các ứng dụng thích ứng cũng thích ứng với 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ư thay đổi về mật độ màn hình cũng như kích thước phông chữ.
Thay vì chỉ kéo giãn hoặc thu gọn các phần tử trên giao diện người dùng để phản hồi các 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 tiêu chuẩn, ứng dụng thích ứng có thể hiển thị thanh điều hướng, nhưng trên màn hình lớn, sẽ là một dải điều hướng. Trên màn hình lớn, ứng dụng thích ứng hiển thị thêm nội dung, chẳng hạn như bố cục hai ngăn, danh sách-chi tiết; về 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 đã chạy trên toàn màn hình nhanh chóng và tập trung vào điện thoại. Hiện nay, các ứng dụng chạy trong chế độ nhiều cửa sổ trong các cửa sổ có kích thước tuỳ ý, độc lập với màn hình thiết bị kích thước. 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 thiết bị loại, ứng dụng phải thích ứng.
Ứng dụng thích ứng trông rất đẹp và hoạt động tốt trên mọi thiết bị ở mọi cấu hình.
Tại sao bạn nên tạo giao diện người dùng thích ứng?
Người dùng mong muốn ứ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 chức năng nâng cao trên màn hình lớn. Người dùng làm nhiều việc cùng lúc ở chế độ nhiều cửa sổ trong trải nghiệm ứng dụng nâng cao và năng suất làm việc tăng lên.
Các ứng dụng bị giới hạn làm một nhiệm vụ trên điện thoại tiêu chuẩn sẽ bỏ lỡ một lượng người dùng mở rộng cơ sở của những khả năng đa dạng.
Google Play
Google Play cung cấp bộ sưu tập ứng dụng dành riêng cho máy tính bảng và thiết bị có thể gập lại, đồng thời các đề xuất, giúp người dùng khám phá các ứng dụng chất lượng cao.
Play xếp hạng cao hơn cho những ứng dụng và trò chơi chưa được tối ưu hoá cho màn hình lớn của chúng tôi. Thứ hạng dựa trên nguyên tắc về chất lượng ứng dụng có màn hình lớn. Cao hơn làm tăng khả năng được phát hiện bằng cách cho phép người dùng nhiều thiết bị xem xếp hạng và đánh giá cụ thể cho màn hình lớn trên điện thoại của họ.
Ứng dụng không đáp ứng tiêu chuẩn chất lượng màn hình lớn của Cửa hàng Play sẽ hiển thị trên trang 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 tốt trên các thiết bị có màn hình lớn.
Xây dựng ứng dụng thích ứng để mở rộng khả năng phát hiện 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
Suy nghĩ về 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 sao cho thích ứng, đồng thời xây dựng một ứng dụng sẵn sàng, dễ quản lý và có thể mở rộng cho các kiểu dáng trong tương lai và chế độ cửa sổ.
Để tạo một ứng dụng thích ứng hỗ trợ tất cả các kích thước và cấu hình hiển thị, hãy 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
- Dùng thư viện thích ứng Compose Material 3 để tạo bản dựng
- Hỗ trợ nhập dữ liệu ngoài thao tác chạm
- Kiểm thử trên mọi loại thiết bị
Cá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ị 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. Trong chế độ nhiều cửa sổ, kích thước cửa sổ ứng dụng, tỷ lệ khung hình và hướng có thể khác với màn hình thiết bị.
Ứng dụng thích ứng giúp đơ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. Tính năng này cũng hoạt động khi cửa sổ ứng dụng ở chế độ 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 là nhỏ 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 cách sử dụng
currentWindowAdaptiveInfo() Hàm cấp cao nhất của Compose
Thư viện thích ứng Material 3. Hàm trả về một thực thể của
WindowAdaptiveInfo chứa windowSizeClass. Ứng dụng của bạn
nhận 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ó 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. Chiến lược phát hành đĩa đơn 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ợ chiều rộng mở rộng lớp kích thước cửa sổ, 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. Pane là một thuật ngữ chính xác hơn dùng để chỉ nội dung hiển thị các hoạt động riêng lẻ.
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 sẽ hiển thị bố cục nhiều ngăn, như chỉ định trong Material Design.
Các ngăn có thể điều hướng. Trên các lớp có kích thước cửa sổ nhỏ và trung bình, ứng dụng hiển thị một ngăn; và cứ như vậy, thao tác điều hướng đến bất kỳ đích đến nào sẽ hiển thị một ngăn.
Trên lớp kích thước cửa sổ mở rộng, các ứng dụng có thể hiển thị nội dung liên quan trong nhiều các 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ổ chuyển thành thu gọn hoặc trung bình, ứng dụng thích ứng chỉ hiển thị một ngăn, đích điều hướng, danh sách hoặc thông tin chi tiết.
|
|
|
Tính năng thích ứng của Compose Material 3
Jetpack Compose là phương pháp khai báo hiện đại để xây dựng ứng dụng thích ứng mà không phải chịu gánh nặng sao chép và bảo trì của nhiều tệp bố cục.
Thư viện thích ứng Compose Material 3 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à các tư thế của thiết bị có thể gập lại và 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 phiên bản chuẩn hoá danh sách-chi tiết bố cục.Điều chỉnh bố cục theo kích thước cửa sổ ứng dụng. Trình bày một danh sách và thông tin chi tiết về một mục danh sách trong các ngăn cạnh nhau trên kích thước cửa sổ mở rộng mà chỉ là danh sách hoặc thông tin chi tiết về kích thước cửa sổ nhỏ gọn và trung bình khác.
SupportingPaneScaffold: Triển khai phiên bản chuẩn của ngăn hỗ trợ bố cục.Trình bày ngăn nội dung chính và ngăn bổ trợ trên cửa sổ mở rộng lớp kích thước, mà chỉ là ngăn nội dung chính trên kích thước cửa sổ nhỏ gọn và trung bình khác.
Thư viện thích ứng Compose Material 3 là phần phụ thuộc bắt buộc phải có cho đang phát triển các ứ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 cấu hình xảy ra khi cửa sổ ứng dụng được đổi kích thước, tư thế của các thay đổi của thiết bị có thể gập lại hoặc thay đổi mật độ màn hình hay phông chữ.
Theo mặc định, các thay đổi về cấu hình sẽ tạo lại hoạt động trong ứng dụng và tất cả hoạt động
bị mất trạng thái. Để 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 những thay đổi về tư thế của thiết bị có thể gập lại. Các tư thế bao gồm chế độ trên mặt bàn và chế độ quyển sách.
Giao diện WindowInfoTracker trong Jetpack WindowManager cho phép bạn
lấy danh sách đối tượng DisplayFeature cho thiết bị. Trong số các màn hình
là FoldingFeature.State, cho biết liệu thiết bị có đang
mở hoàn toàn hoặc một nửa.
Thư viện thích ứng Compose Material 3 cung cấp
Hàm cấp cao nhất currentWindowAdaptiveInfo() trả về một giá trị
bản sao của WindowAdaptiveInfo chứa windowPosture.
Nhập dữ liệu không cần 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 màn hình lớn màn hình thiết bị. Các 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 đầu vào, biểu hiện cá nhân và khả năng tiếp cận. Hầu hết thiết bị ChromeOS đều đi kèm với bàn phím và bàn di chuột tích hợp.
Ứng dụng thích ứng hỗ trợ các thiết bị đầu vào bên ngoài, nhưng phần lớn công việc cần làm cho bạn theo khung Android:
Jetpack Compose 1.7 trở lên: Di chuyển qua thẻ Bàn phím và dùng chuột hoặc các tính năng nhấp, chọn và cuộn bằng bàn di chuột được hỗ trợ theo mặc định.
Thư viện Jetpack
androidx.compose.material3: Cho phép người dùng ghi vào thành phầnTextFieldbất kỳ bằng bút cảm ứng.Trình trợ giúp phím tắt: Tạo bàn phím ứng dụng và nền tảng Android các lối tắt mà người dùng có thể phát hiện được. 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 thiết bị ở mọi kích thước, ứng dụng thích ứng hỗ trợ nhập mọi dữ liệu đầu vào loại.
Cách kiểm thử ứng dụng thích ứng
Thử nghiệm 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 của ứng dụng. Chạy ứng dụng của bạn 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 đối với ứng dụng trên màn hình lớn
Nguyên tắc về chất lượng đối với ứng dụng có màn hình lớn đảm bảo ứ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 thử nghiệm cho phép bạn xác minh chức năng của ứng dụng đối với các hành trình trọng yếu của người dùng. Mặc dù tập trung vào màn hình lớn, các nguyên tắc này 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
mô phỏng nhiều cấu hình thiết bị theo cách đã bản địa hoá để
nội dung có thể kết hợp mà bạn muốn kiểm thử. Ví dụ: bạn có thể thử nghiệm nhiều,
kích thước giao diện người dùng tuỳ ý trong một lần chạy bộ thử nghiệm trên một thiết bị hoặc
trình mô phỏng.
Với hàm tiện ích DeviceConfigurationOverride.then(), bạn có thể
kiểm thử nhiều thông số cấu hình, chẳng hạn như cỡ chữ, ngôn ngữ, giao diện và
kích thước bố cục, tất cả cùng một lú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 hình ảnh giao diện 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 nhiều kích thước hiển thị.
Để biết thêm thông tin, hãy xem nội dung Kiểm thử ảnh chụp màn hình của tính năng xem trước trong Compose.
Tính năng xem trước trong Compose
Tính năng xem trước trong Compose cho phép bạn kiểm tra giao diện người dùng của ứng dụng ở chế độ xem thiết kế của Android
Studio. Các bản xem trước sử dụng chú thích, chẳng hạn như @PreviewScreenSizes,
@PreviewFontScale và @PreviewLightDark để xem thành phần kết hợp
nội dung ở nhiều cấu hình. Bạn thậm chí có thể tương tác với 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 thành phần kết hợp.
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ể thay đổ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 nhanh chóng giữa chúng
- Trình mô phỏng Pixel Fold: Mô phỏng điện thoại Pixel Fold màn hình lớn có thể gập lại
- Trình mô phỏng Pixel Tablet: Mô phỏng thiết bị Pixel Tablet màn hình lớn
- Trình mô phỏng máy tính: Bật thử nghiệm cửa sổ dạng tự do, di chuột và phím tắt
Truyền trực tuyến bằng 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 của Google và chạy ứng dụng của bạn trên các thiết bị Samsung và Pixel mới nhất. Cài đặt và gỡ lỗi ứng dụng, chạy ADB cũng như xoay và gập thiết bị để đảm bảo ứng dụng của bạn hoạt động tốt trên nhiều thiết bị thực khác nhau.
Tính năng truyền trực tuyến trên thiết bị từ xa được tích hợp vào Android Studio. Để biết thêm thông tin, xem Truyền trực tuyến trên thiết bị Android, do Firebase cung cấp.
Tài nguyên khác
- Bản trình bày tại I/O: Xây dựng ứng dụng Android thích ứng