Bố cục của ứng dụng không ở dạng cuộn

Khung hiển thị không cuộn tập trung vào thông tin có thể xem nhanh và mang lại giá trị cho người dùng mà ít hoặc không cần tương tác. Do đó, bạn có thể gặp khó khăn khi tạo hành vi thích ứng cho các bố cục này.

Các thành phần bố cục không cuộn được đặt sẵn

Hộp thoại

Hộp thoại là một lớp phủ tạm thời chiếm toàn bộ màn hình. Thao tác này cho phép người dùng thực hiện một hành động duy nhất.

Hãy cân nhắc những điểm sau:

  • Hộp thoại tập trung sự chú ý của bạn để xác minh rằng nội dung của hộp thoại đã được giải quyết.
  • Hộp thoại phải truyền đạt thông tin một cách trực tiếp và dành riêng cho việc hoàn thành một tác vụ.
  • Hộp thoại nên xuất hiện để phản hồi một nhiệm vụ của người dùng hoặc một thao tác, kèm theo thông tin liên quan hoặc dựa trên ngữ cảnh.

Lớp phủ xác nhận

Lớp phủ xác nhận sẽ hiển thị một thông báo xác nhận cho người dùng trong một khoảng thời gian ngắn. Hãy sử dụng thành phần này để thu hút sự chú ý của người dùng sau khi thực hiện một hành động.

Mở trên điện thoại

Lớp phủ mở trên điện thoại sẽ được kích hoạt khi người dùng chọn tiếp tục hành trình trên điện thoại. Lớp phủ có chỉ báo tiến trình và cho người dùng biết thời điểm kiểm tra điện thoại.

Trình tăng giảm

Stepper mang đến trải nghiệm điều khiển toàn màn hình, cho phép người dùng lựa chọn trong một phạm vi các giá trị. Họ có thể điều khiển hoạt động tương tác bằng các nút hoặc núm xoay, và mức cụ thể được hiển thị bằng chỉ báo mức cong.

Bộ chọn thời gian

Bộ chọn cho phép người dùng chọn trong số một số lượng hữu hạn các mục trong các phần có thể cuộn. Bộ chọn thời gian có tối đa 3 cột, tuỳ thuộc vào việc có giây hay không hoặc đồng hồ là đồng hồ 12 giờ hay 24 giờ. Người dùng tương tác với từng cột tại một thời điểm, đưa ra lựa chọn bằng cách để số ở trạng thái được lấy tiêu điểm trước khi tiếp tục.

Bộ chọn ngày

Bộ chọn cho phép người dùng chọn trong số một số lượng hữu hạn các mục trong các phần có thể cuộn. Bộ chọn ngày có tối đa 3 cột, có thể thay đổi thứ tự giữa ngày, giờ và năm, tuỳ thuộc vào trường hợp sử dụng. Bộ chọn ngày yêu cầu các chuỗi nội dung dài hơn, vì vậy, chỉ có một cột xuất hiện tại một thời điểm, cho biết nội dung ở bên trái hoặc bên phải. Người dùng tương tác với từng cột tại một thời điểm, đưa ra lựa chọn bằng cách để số ở trạng thái được lấy tiêu điểm trước khi tiếp tục.

Ví dụ về bố cục tuỳ chỉnh không cuộn

Màn hình ứng dụng không cuộn không bị giới hạn ở các thành phần đã đặt. Bạn có thể kết hợp các thành phần để tạo bố cục mà mình muốn.

Bạn nên lưu ý đến không gian hạn chế trên màn hình không cuộn và việc sử dụng lề và khoảng đệm linh hoạt (tính theo tỷ lệ phần trăm) để sử dụng không gian màn hình có sẵn. Bạn cũng có thể cân nhắc áp dụng một điểm ngắt ở 225 dp để giới thiệu nội dung bổ sung hoặc giúp người dùng dễ dàng xem nội dung hiện có hơn khi dùng kích thước màn hình lớn hơn.

Maps

Lớp phủ khẩn cấp

Cảnh báo khẩn cấp

Hành vi thích ứng và đáp ứng

Tất cả các thành phần trong thư viện Compose đều tự động điều chỉnh cho phù hợp với kích thước màn hình lớn hơn và tăng chiều rộng cũng như chiều cao. Đối với những khung hiển thị này, việc sử dụng các điểm ngắt có thể mang lại trải nghiệm đặc biệt phong phú và có giá trị cho tất cả người dùng.

Đối với nhiều nút, thẻ và lề trong giao diện người dùng, hãy kéo giãn và lấp đầy không gian cho các kích thước màn hình khác nhau để tận dụng không gian có sẵn trên giao diện người dùng, đồng thời tạo ra một bố cục cân đối.

Hãy sử dụng danh sách kiểm tra sau để xác minh rằng các tham số thích ứng được xác định đúng cách:

  • Tạo bố cục linh hoạt trông hợp lý trên mọi kích thước màn hình.
  • Áp dụng lề trên, lề dưới và lề bên được đề xuất.
  • Xác định lề bằng giá trị phần trăm ở những nơi nội dung có thể bị cắt.
  • Sử dụng các ràng buộc bố cục để các phần tử tận dụng tối đa không gian trong màn hình và duy trì sự cân bằng trên nhiều kích thước thiết bị.
  • Điều chỉnh Văn bản thời gian nếu được dùng, nhưng không được chồng lên phần trên cùng của trang.
  • Hãy cân nhắc sử dụng các nút sát cạnh để tận dụng tối đa không gian hạn chế.
  • Hãy cân nhắc áp dụng một điểm ngắt ở 225 dp để giới thiệu nội dung bổ sung hoặc giúp nội dung hiện có dễ xem hơn khi ở kích thước màn hình lớn hơn.

Nhiều hành trình trên trang không cuộn bằng cách sử dụng tính năng phân trang

Trong trường hợp một trải nghiệm cần nhiều nội dung hơn nhưng vẫn muốn giữ bố cục không di chuyển, hãy cân nhắc bố cục nhiều trang có tính năng phân trang theo chiều dọc hoặc chiều ngang.