iPhone Duo có màn hình ngoài hẹp và màn hình trong rộng. Khác với các iPhone khác, thiết bị này có thể hiển thị thanh trạng thái ở cạnh màn hình, bên cạnh camera trước, ngay cả khi ở chế độ dọc.

Để đảm bảo các flow của bạn trông đẹp trên Duo, hãy thực hiện các bước sau:

• Giữ Safe area bật, để văn bản và nút không bị che bởi thanh trạng thái.
• Nếu một phần tử riêng lẻ bị khuất sau thanh trạng thái, hãy bỏ chọn Ignore safe area cho phần tử đó.
• Xem trước cả hai màn hình, mỗi màn hình ở cả hai hướng, trước khi xuất bản và điều chỉnh bố cục khi cần.
• Nếu một flow đã được phát hành trước khi Adapty thêm hỗ trợ iPhone Duo, hãy xuất bản lại để áp dụng các cải tiến bố cục mới nhất.
• Nếu flow trên Duo cần thiết kế riêng, hãy hiển thị flow riêng cho người dùng Duo.

Giữ văn bản và nút tránh xa thanh trạng thái và camera

Bật Safe area để giữ các phần sau của màn hình tránh xa thanh trạng thái:

• Nội dung chính
• Nội dung của footer và sliding sheet
• Thanh tiến trình
• Các phần tử Fixed và Absolute

Nền của màn hình, footer và sliding sheet vẫn trải dài toàn bộ màn hình, kể cả vùng phía sau thanh trạng thái.

Cố ý bỏ qua vùng an toàn của iPhone

Một phần tử riêng lẻ có thể ghi đè cài đặt Safe area để hiển thị phía sau thanh trạng thái. Điều này chỉ được khuyến nghị khi bạn muốn tạo hiệu ứng có chủ đích cho ảnh và video.

Đặt phần tử ở vị trí Fixed hoặc Absolute. Sau đó chọn hộp kiểm Ignore safe area.

Để ảnh hoặc video cuộn cùng với phần còn lại của màn hình, hãy đặt nó ở đầu màn hình thay thế.

Thiết kế một layout cho cả hai màn hình

Mỗi màn hình chỉ có một layout. Khi thiết kế màn hình trong Flow & Paywall Builder, hãy làm theo các mẹo trong phần này để đảm bảo layout phù hợp với cả hai màn hình của iPhone Duo.

Chọn iPhone Duo trong danh sách thiết bị. Sau đó xem trước từng màn hình:

• Closed: Thanh trạng thái chiếm nhiều không gian. Hãy kiểm tra:

  • Văn bản bị xuống dòng hoặc bị cắt bớt
  • Footer chiếm phần lớn màn hình
  • Nút đóng, khôi phục hoặc mua hàng bị khuất khỏi màn hình

  Bật Vertical scroll hoặc chia nội dung ra nhiều màn hình hơn. Để nút mua hàng luôn hiển thị, hãy đặt nó vào footer dạng sticky.

• Open: Nếu bạn thiết kế ứng dụng chỉ cho hướng dọc, iOS vẫn có thể hiển thị ứng dụng theo hướng ngang trên màn hình trong.

  Hãy chú ý những nội dung bị kéo dãn quá rộng, khó đọc ở cả hai hướng. Đặt nội dung đó vào một container có chiều rộng Fixed. Sau đó căn giữa container bằng cách thay đổi cài đặt Alignment của phần tử cha. Container sẽ giữ nguyên chiều rộng trên mọi thiết bị.

  Nếu container quá rộng so với những chiếc điện thoại nhỏ nhất, một biểu tượng cảnh báo sẽ xuất hiện bên cạnh Width. Hãy giảm chiều rộng cho đến khi biểu tượng đó biến mất.

Nếu bạn thiết kế một layout phù hợp với Duo nhưng lại trông không ổn trên các điện thoại khác, hiển thị cho người dùng Duo một flow riêng.

Thêm hỗ trợ iPhone Duo cho các flow đang chạy

Để áp dụng các cải tiến bố cục mới nhất cho flow đã được phát hành trước khi Adapty thêm hỗ trợ iPhone Duo, hãy xuất bản lại flow đó.

Mở flow trong Flow & Paywall Builder. Thực hiện một thay đổi nhỏ để kích hoạt nút Publish to Live, rồi nhấn vào đó.

Ứng dụng của bạn sẽ nhận được phiên bản mới nhất vào lần tiếp theo nó yêu cầu một placement phục vụ flow đó. Để xem kết quả, hãy mở flow trong ứng dụng trên iPhone Duo hoặc trình giả lập điện thoại trong Xcode.

Hiển thị flow riêng cho người dùng iPhone Duo

Bạn có thể thiết kế một flow riêng, được tối ưu hóa cho màn hình của dòng Duo, thay vì dùng một layout duy nhất cho tất cả các điện thoại:

1. Sao chép một flow hiện có để tạo flow Duo.
2. Điều chỉnh bản sao cho cả hai màn hình. Sau đó xuất bản nó.
3. Tạo một phân khúc với thuộc tính Device được đặt thành iPhone Duo.
4. Trong placement phục vụ flow chính, thêm một đối tượng với phân khúc Duo và flow Duo.
5. Nếu một đối tượng khác trong placement cũng có thể khớp với người dùng Duo, tăng mức ưu tiên của đối tượng Duo lên trên nó.

To see the result, open your app on a real iPhone Duo.