Bố cục thích ứng mang lại trải nghiệm người dùng được tối ưu hoá bất kể kích thước màn hình. Triển khai các bố cục thích ứng để cho phép dựa trên chế độ xem để hỗ trợ mọi kích thước màn hình, hướng và các cấu hình, bao gồm cả các cấu hình có thể đổi kích thước như nhiều cửa sổ chế độ xem.
Thiết kế đáp ứng
Bước đầu tiên để hỗ trợ nhiều hệ số hình dạng thiết bị là tạo một bố cục thích ứng với các biến thể về lượng không gian hiển thị có sẵn cho ứng dụng của bạn.
ConstraintLayout
Cách tốt nhất để tạo bố cục thích ứng là sử dụng
ConstraintLayout
làm bố cục cơ sở cho giao diện người dùng. ConstraintLayout
cho phép bạn chỉ định
vị trí và kích thước của mỗi thành phần hiển thị theo mối quan hệ không gian với
thành phần hiển thị trong bố cục. Sau đó, tất cả khung hiển thị có thể di chuyển và đổi kích thước cùng nhau dưới dạng
các thay đổi về không gian hiển thị.
Cách dễ nhất để tạo bố cục với ConstraintLayout
là sử dụng Layout Editor (Trình chỉnh sửa bố cục) trong Android Studio. Layout Editor cho phép bạn kéo các thành phần hiển thị mới vào
bố cục, áp dụng các điều kiện ràng buộc tương ứng với khung hiển thị mẹ và khung hiển thị đồng cấp, cũng như thiết lập khung hiển thị
thuộc tính—tất cả mà không cần chỉnh sửa bất kỳ XML nào một cách thủ công.
![](https://developer.android.com/static/images/screens_support/layout-editor_2x.png?authuser=9&hl=vi)
ConstraintLayout
.
Để biết thêm thông tin, hãy xem bài viết Tạo giao diện người dùng thích ứng bằng ConstraintLayout.
Chiều rộng và chiều cao đáp ứng
Để đảm bảo bố cục của bạn thích ứng với nhiều kích thước hiển thị, hãy sử dụng
wrap_content
, match_parent
hoặc 0dp (match constraint)
cho chiều rộng và
chiều cao của thành phần khung hiển thị thay vì giá trị được cố định giá trị trong mã:
wrap_content
: Thành phần hiển thị này thiết lập kích thước để phù hợp với nội dung của thành phần hiển thị đó.match_parent
: Thành phần hiển thị này mở rộng nhiều nhất có thể trong thành phần hiển thị mẹ.0dp (match constraint)
: TrongConstraintLayout
, tương tự nhưmatch_parent
. Chế độ xem này sẽ chiếm tất cả không gian có sẵn trong hạn chế.
Ví dụ:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum" />
Hình 4 cho thấy cách chiều rộng và chiều cao của TextView
điều chỉnh khi màn hình
thay đổi chiều rộng theo hướng thiết bị.
![](https://developer.android.com/static/images/screens_support/layout-match-parent_2x.png?authuser=9&hl=vi)
TextView
thích ứng.
TextView
đặt chiều rộng để lấp đầy tất cả không gian có sẵn (match_parent
) và
chiều cao của nó chính xác bằng chiều cao của ngăn chứa
văn bản (wrap_content
), cho phép khung hiển thị thích ứng với các màn hình khác nhau
và số lượng văn bản khác nhau.
Nếu đang sử dụng LinearLayout
, bạn
cũng có thể mở rộng các chế độ xem con dựa trên bố cục
trọng số để các thành phần hiển thị được lấp đầy theo tỷ lệ
không gian có sẵn. Tuy nhiên, việc sử dụng các trọng số trong LinearLayout
lồng nhau đòi hỏi
hệ thống thực hiện nhiều lần truyền bố cục để xác định kích thước của mỗi lần truyền
làm chậm hiệu suất của giao diện người dùng.
ConstraintLayout
có thể tạo gần như tất cả các bố cục có thể bằng
LinearLayout
mà không ảnh hưởng đến hiệu suất, nên hãy chuyển đổi các biến đổi được lồng
LinearLayout
đến
ConstraintLayout
. Sau đó, bạn
có thể xác định bố cục có trọng số kèm quy tắc ràng buộc
.
Thiết kế thích ứng
Bố cục của ứng dụng phải luôn thích ứng với nhiều kích thước hiển thị. Tuy nhiên, ngay cả bố cục thích ứng cũng không thể cung cấp trải nghiệm người dùng tốt nhất mọi thiết bị hoặc màn hình ở chế độ nhiều cửa sổ. Ví dụ: giao diện người dùng mà bạn cho điện thoại, có thể không cung cấp trải nghiệm người dùng tối ưu trên máy tính bảng. Thiết kế thích ứng cung cấp bố cục thay thế được tối ưu hoá cho những thứ nguyên hiển thị.
SlidingPaneLayout cho các giao diện người dùng dạng danh sách-chi tiết
Giao diện người dùng chi tiết về danh sách thường cung cấp trải nghiệm người dùng khác trên màn hình có kích thước khác nhau. Trên màn hình lớn, danh sách và ngăn chi tiết thường nằm cạnh nhau. Khi một mục trong danh sách được chọn, thông tin của mục đó sẽ hiện trong ngăn chi tiết mà không làm thay đổi giao diện người dùng (hai ngăn vẫn được giữ nguyên) cạnh nhau. Tuy nhiên, trên màn hình nhỏ, hai ngăn này được hiển thị riêng biệt, mỗi ngăn chiếm toàn bộ khu vực hiển thị. Khi một mục trong ngăn danh sách đã chọn, ngăn chi tiết (chứa thông tin của mục đã chọn) sẽ thay thế ngăn danh sách. Thao tác quay lại thay thế ngăn chi tiết bằng danh sách.
SlidingPaneLayout
quản lý logic để xác định trải nghiệm nào trong số hai trải nghiệm người dùng
phù hợp với kích thước cửa sổ hiện tại:
<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/item_navigation" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
Thuộc tính layout_width
và layout_weight
của hai khung hiển thị có trong
SlidingPaneLayout
xác định hành vi của SlidingPaneLayout
. Trong ví dụ này,
nếu cửa sổ đủ lớn (ít nhất là 580 dp) để hiển thị cả hai chế độ xem, thì
các ngăn được hiển thị cạnh nhau. Tuy nhiên, nếu chiều rộng cửa sổ nhỏ hơn
580 dp, các ngăn trượt lên nhau để chiếm toàn bộ ứng dụng
cửa sổ.
Nếu chiều rộng cửa sổ lớn hơn tổng chiều rộng tối thiểu đã chỉ định (580 dp),
Bạn có thể dùng các giá trị layout_weight
để định kích thước hai ngăn theo tỷ lệ. Trong
Ví dụ: ngăn danh sách luôn rộng 280dp vì không có trọng số.
Tuy nhiên, ngăn chi tiết luôn lấp đầy bất kỳ không gian ngang nào vượt quá 580dp vì
về chế độ cài đặt layout_weight
của khung hiển thị.
Tài nguyên bố cục thay thế
Để điều chỉnh thiết kế giao diện người dùng cho phù hợp với nhiều kích thước màn hình, hãy dùng các bố cục thay thế được xác định theo resource bộ hạn định.
![](https://developer.android.com/static/images/screens_support/sizes-phone-tablet_2x.png?authuser=9&hl=vi)
Bạn có thể cung cấp bố cục thích ứng, dành riêng cho màn hình bằng cách tạo thêm
res/layout/
thư mục trong mã nguồn của ứng dụng. Tạo một thư mục cho mỗi
cấu hình màn hình yêu cầu bố cục khác. Sau đó, hãy thêm một màn hình
bộ hạn định cấu hình thành tên thư mục layout
(ví dụ:
layout-w600dp
cho màn hình có chiều rộng trống là 600 dp).
Những chuỗi định cấu hình đại diện cho không gian hiển thị có sẵn cho giao diện người dùng ứng dụng của bạn. Hệ thống xem xét mọi thành phần trang trí hệ thống (chẳng hạn như thanh điều hướng) và các thay đổi về cấu hình cửa sổ (chẳng hạn như nhiều cửa sổ) chế độ) khi chọn bố cục cho ứng dụng.
Để tạo bố cục thay thế trong Android Studio, hãy xem phần Sử dụng biến thể bố cục để tối ưu hoá cho nhiều loại màn hình Phát triển giao diện người dùng bằng Khung hiển thị.
Bộ hạn định có chiều rộng nhỏ nhất
Bộ hạn định kích thước màn hình có chiều rộng nhỏ nhất cho phép bạn cung cấp lựa chọn thay thế bố cục cho màn hình có chiều rộng tối thiểu được đo bằng giá trị không phụ thuộc vào mật độ pixel (dp).
Bằng cách mô tả kích thước màn hình là số đo dp, Android cho phép bạn tạo được thiết kế cho các kích thước hiển thị cụ thể mà không cần quan tâm đến mật độ pixel khác nhau.
Ví dụ: bạn có thể tạo một bố cục có tên là main_activity
được tối ưu hoá để
điện thoại và máy tính bảng bằng cách tạo các phiên bản khác nhau của tệp trong các phiên bản khác nhau
thư mục:
res/layout/main_activity.xml # For phones (smaller than 600dp smallest width) res/layout-sw600dp/main_activity.xml # For 7" tablets (600dp wide or wider)
Bộ hạn định chiều rộng nhỏ nhất chỉ định kích thước nhỏ nhất trong số hai cạnh của màn hình, bất kể hướng hiện tại của thiết bị là gì, vì vậy đây là một cách để chỉ định kích thước hiển thị tổng thể có sẵn cho bố cục của bạn.
Dưới đây là cách các giá trị chiều rộng nhỏ nhất tương ứng với kích thước màn hình thông thường:
- 320dp: Màn hình điện thoại nhỏ (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, v.v.)
- 480dp: Màn hình điện thoại lớn ~5 inch (480x800 mdpi).
- 600dp: 7 inch máy tính bảng (600 x 1024 mdpi)
- 720dp: 10 inch máy tính bảng (720x1280 mdpi, 800x1280 mdpi, v.v.)
Hình sau đây cung cấp thông tin chi tiết hơn về mức độ khác nhau về dp trên màn hình chiều rộng tương ứng với các kích thước và hướng màn hình khác nhau.
![](https://developer.android.com/static/images/screens_support/layout-adaptive-breakpoints_2x.png?authuser=9&hl=vi)
Giá trị cho bộ hạn định chiều rộng nhỏ nhất là dp vì điều quan trọng là lượng không gian hiển thị có sẵn sau khi hệ thống tính đến mật độ pixel (không phải độ phân giải pixel thô).
Kích thước bạn chỉ định bằng cách sử dụng bộ hạn định tài nguyên như chiều rộng nhỏ nhất là chứ không phải kích thước màn hình thực tế. Thay vào đó, các kích thước chỉ định chiều rộng hoặc chiều cao theo đơn vị dp có sẵn cho cửa sổ ứng dụng. Hệ thống Android có thể sử dụng một số màn hình hiển thị giao diện người dùng hệ thống (chẳng hạn như thanh hệ thống ở cuối hoặc thanh trạng thái ở trên cùng), vì vậy, một số màn hình có thể không có sẵn cho bố cục của bạn. Nếu bạn dùng ứng dụng ở chế độ nhiều cửa sổ, ứng dụng chỉ có quyền truy cập vào kích thước của cửa sổ chứa ứng dụng. Khi cửa sổ được đổi kích thước, nó sẽ kích hoạt cấu hình thay đổi với kích thước cửa sổ mới, điều này cho phép hệ thống chọn tệp bố cục phù hợp. Vì vậy, nguồn lực kích thước bộ hạn định mà bạn khai báo chỉ nên xác định không gian mà ứng dụng của bạn cần. Hệ thống tính đến mọi không gian mà giao diện người dùng hệ thống sử dụng khi cung cấp không gian cho bố cục của mình.
Bộ hạn định chiều rộng có sẵn
Thay vì thay đổi bố cục dựa trên chiều rộng nhỏ nhất của màn hình, bạn có thể muốn thay đổi bố cục dựa trên chiều rộng hoặc chiều cao hiện có. Ví dụ: bạn có thể muốn sử dụng bố cục hai ngăn bất cứ khi nào màn hình cung cấp chiều rộng tối thiểu là 600dp. Chiều rộng này có thể thay đổi tuỳ thuộc vào theo hướng ngang hoặc dọc. Trong trường hợp đó, bạn nên sử dụng chiều rộng có sẵn như sau:
res/layout/main_activity.xml # For phones (smaller than 600dp available width) res/layout-w600dp/main_activity.xml # For 7" tablets or any screen with 600dp available width # (possibly landscape phones)
Nếu bạn lo ngại về chiều cao có sẵn cho ứng dụng của mình, bạn có thể sử dụng
chiều cao có sẵn. Ví dụ: layout-h600dp
cho các màn hình có tại
chiều cao màn hình tối thiểu là 600dp.
Bộ hạn định hướng
Mặc dù bạn có thể hỗ trợ tất cả các biến thể kích thước bằng cách chỉ sử dụng tổ hợp bộ hạn định chiều rộng nhỏ nhất và chiều rộng có sẵn, bạn có thể cũng muốn thay đổi trải nghiệm người dùng khi người dùng chuyển đổi giữa chế độ màn hình dọc và hướng ngang.
Do đó, bạn có thể thêm bộ hạn định port
hoặc land
vào thư mục bố cục của mình
tên. Chỉ cần đảm bảo bộ hạn định hướng xuất hiện sau bộ hạn định kích thước.
Ví dụ:
res/layout/main_activity.xml # For phones res/layout-land/main_activity.xml # For phones in landscape res/layout-sw600dp/main_activity.xml # For 7" tablets res/layout-sw600dp-land/main_activity.xml # For 7" tablets in landscape
Để biết thêm thông tin về tất cả các bộ hạn định cấu hình màn hình, hãy xem phần Ứng dụng tổng quan về các tài nguyên.
Các lớp kích thước cửa sổ
Các lớp kích thước cửa sổ là các điểm ngắt khung nhìn giúp bạn tạo thích ứng của bạn. Điểm ngắt xác định khu vực hiển thị có sẵn cho ứng dụng là nhỏ gọn, trung bình hoặc mở rộng. Chiều rộng và chiều cao được chỉ định riêng, vì vậy, ứng dụng của bạn luôn có lớp kích thước cửa sổ cho chiều rộng và lớp kích thước cửa sổ cho chiều cao.
Để áp dụng bố cục thích ứng theo phương thức lập trình, hãy làm như sau:
- Tạo tài nguyên bố cục dựa trên điểm ngắt lớp kích thước cửa sổ
- Tính toán các lớp kích thước cửa sổ chiều rộng và chiều cao của ứng dụng bằng cách sử dụng
WindowSizeClass#compute()
qua Jetpack WindowManager thư viện - Tăng cường tài nguyên bố cục cho các lớp kích thước cửa sổ hiện tại
Để biết thêm thông tin, hãy xem phần Kích thước cửa sổ lớp học.
Thành phần giao diện người dùng được mô-đun hóa sử dụng mảnh
Khi thiết kế ứng dụng cho nhiều kích thước màn hình, hãy dùng các mảnh để trích xuất logic giao diện người dùng thành các thành phần riêng biệt để đảm bảo bạn hành vi trùng lặp trên giao diện người dùng trên các hoạt động. Sau đó, bạn có thể kết hợp các mảnh để tạo bố cục nhiều ngăn trên màn hình lớn hoặc bạn có thể đặt các mảnh trong các hoạt động riêng biệt trên màn hình nhỏ.
Ví dụ: mẫu danh sách-chi tiết (xem SlidingPaneLayout ở trên) có thể được triển khai bằng một mảnh chứa danh sách và một mảnh khác chứa mục danh sách chi tiết. Trên màn hình lớn, các mảnh có thể hiển thị cạnh nhau; về các màn hình nhỏ riêng lẻ, lấp đầy màn hình.
Để tìm hiểu thêm, hãy xem thông tin tổng quan về Mảnh.
Nhúng hoạt động
Nếu ứng dụng bao gồm nhiều hoạt động, tính năng nhúng hoạt động cho phép bạn dễ dàng tạo giao diện người dùng thích ứng.
Tính năng nhúng hoạt động hiển thị nhiều hoạt động hoặc nhiều thực thể của cùng một hoạt động đồng thời trong cửa sổ tác vụ của ứng dụng. Trên màn hình lớn, các hoạt động có thể hiển thị cạnh nhau; trên các màn hình nhỏ, xếp chồng một ứng dụng lên trên của mục khác.
Bạn sẽ xác định cách ứng dụng hiển thị các hoạt động bằng cách tạo một XML tệp cấu hình mà hệ thống sử dụng để xác định tệp cấu hình phù hợp. dựa trên kích thước hiển thị. Ngoài ra, bạn có thể thực hiện các thao tác Jetpack API WindowManager cuộc gọi.
Tính năng nhúng hoạt động hỗ trợ các thay đổi về hướng thiết bị và thiết bị có thể gập lại, xếp chồng và huỷ xếp các hoạt động khi thiết bị xoay hoặc gập lại và mở ra.
Để biết thêm thông tin, hãy xem phần Hoạt động nhúng.
Kích thước màn hình và tỷ lệ khung hình
Kiểm thử ứng dụng trên nhiều kích thước màn hình và tỷ lệ khung hình để đảm bảo giao diện người dùng điều chỉnh theo tỷ lệ một cách chính xác.
Android 10 (API cấp 29) trở lên hỗ trợ nhiều tỷ lệ khung hình. Các kiểu dáng có thể gập lại có thể khác nhau từ màn hình cao, hẹp, chẳng hạn như 21:9 khi gập lại thành hình vuông tỷ lệ khung hình 1:1 khi mở ra.
Để đảm bảo khả năng tương thích với nhiều thiết bị nhất có thể, hãy kiểm thử ứng dụng của bạn nhiều tỷ lệ khung hình sau đây nhất có thể:
![](https://developer.android.com/static/images/guide/topics/ui/foldables/fold-screen-ratios.png?authuser=9&hl=vi)
Nếu bạn không có quyền truy cập vào thiết bị cho tất cả các kích thước màn hình khác nhau mà bạn muốn để kiểm thử, bạn có thể sử dụng Trình mô phỏng Android để mô phỏng hầu như mọi kích thước màn hình.
Nếu muốn thử nghiệm trên một thiết bị thực tế nhưng không có thiết bị, bạn có thể sử dụng Phòng thử nghiệm Firebase để truy cập trong trung tâm dữ liệu của Google.
Tài nguyên khác
- Material Design – Tìm hiểu về bố cục