Màn hình hero hiển thị hình ảnh hoặc video toàn màn hình ở phía trên, với nội dung của bạn trên một panel bên dưới. Để tạo màn hình này, đặt toàn bộ nội dung vào Sliding sheet, với hero nằm phía sau. Sheet che phần dưới của màn hình và trượt lên trên hero khi người dùng cuộn.

Đặt nội dung lên trên hình ảnh hoặc video hero

1. Thêm hero làm nền màn hình: trong cài đặt màn hình, đặt Fill thành hình ảnh hoặc video. Sheet che phần dưới của nền, vì vậy hãy chọn hình ảnh hoặc video có chủ thể xuất hiện gần phía trên.

   

2. Mở bảng Add element và chọn Sliding sheet.

3. Đặt nội dung của màn hình vào sliding sheet — kéo vào bảng Layers.

4. Để giữ nút mua hàng luôn hiển thị, thêm nó vào footer. Nút sẽ cố định ở cuối màn hình trong khi nội dung cuộn.

5. Điều chỉnh Start position của sheet để hiển thị nhiều hơn phần hero hoặc nội dung khi màn hình mở lần đầu.

6. Để xem sheet di chuyển qua phần hero như thế nào, cuộn màn hình trong khu vực xem trước.

7. Chọn các thiết bị khác từ danh sách thiết bị và xem khu vực phía trên sheet. Start position là tỷ lệ phần trăm chiều cao màn hình, nên khu vực đó sẽ ngắn hơn trên các điện thoại nhỏ.

Cách sheet cuộn qua hero

Start position là vị trí của sheet khi màn hình mở ra. Với giá trị mặc định là 55%, sheet che phủ 55% phía dưới màn hình, và người dùng thấy hero ở 45% phía trên.

Nếu toàn bộ nội dung hiển thị được khi màn hình mở ra, sheet sẽ giữ nguyên vị trí ban đầu. Ngược lại, người dùng cuộn toàn bộ sheet lên trên qua hero. Nếu nội dung cao hơn màn hình, phần đầu của sheet sẽ cuộn ra ngoài tầm nhìn.

Để giữ nội dung dài có thể cuộn được, trong cài đặt màn hình, hãy để bật toggle Vertical scroll. Nếu bạn tắt nó đi, sheet sẽ giữ nguyên vị trí ban đầu và cắt bớt bất kỳ nội dung nào không vừa.

Trong khi sheet di chuyển, người dùng sẽ thấy như sau:

• Tấm sheet trượt lên phía trên các phần tử bên ngoài nó, chẳng hạn như logo hoặc tiêu đề ở đầu màn hình. Các phần tử này cũng di chuyển lên nhưng chậm hơn, tạo cảm giác chiều sâu cho màn hình (parallax). Trên Android, parallax khả dụng trong các ứng dụng Android native và React Native với Adapty SDK v4.3.0 trở lên. Với các ứng dụng Android khác — hoặc các phiên bản SDK cũ hơn — hiệu ứng này sẽ không hiển thị.
• Trên iOS, khi người dùng kéo sheet xuống dưới vị trí ban đầu, các phần tử bên ngoài sheet sẽ giãn ra.
• Nền màn hình không di chuyển.

Thêm hiệu ứng parallax cho hero

Để tạo hiệu ứng parallax cho hero, hãy thêm nó dưới dạng phần tử hình ảnh hoặc video bên ngoài sheet, thay vì đặt làm nền màn hình.

Mặc định, phần tử này không chạm đến các cạnh màn hình. Padding của màn hình sẽ thu nhỏ phần tử vào từng phía, và khi bật Safe area, phần tử sẽ bắt đầu bên dưới thanh trạng thái.

1. Mở bảng Add element và kéo một phần tử Image hoặc Video vào khu vực phía trên sheet.
2. Để phần tử kéo dài xuống tới sheet, đặt Width và Height thành Fill. Giữ Content mode (Aspect với video) ở Fill.
3. Để phần tử chạm đến cạnh trái và phải của màn hình, mở cài đặt màn hình. Trong mục Spacing, đặt padding trái và phải về 0. Nếu sheet có góc trên vuông, đặt padding dưới về 0 để phần tử chạm đến sheet.
4. Để phần tử chạm đến cạnh trên của màn hình, ngay dưới thanh trạng thái, hãy giữ nó là phần tử đầu tiên bên ngoài sheet. Sau đó nhấp vào phần tử, và trong mục Position, chọn checkbox Ignore safe area.

Đặt các phần tử lên trên hero

Để đặt logo hoặc tiêu đề lên trên hero nền, kéo phần tử vào vùng phía trên sheet. Các phần tử nằm ngoài sheet sẽ được xếp chồng từ đầu màn hình, và những gì không vừa trong vùng đó sẽ bị cắt bớt. Để đặt chúng lên trên phần tử hình ảnh hoặc video, hãy đặt Position của chúng thành Absolute.

Để giữ nút đóng luôn hiển thị khi người dùng cuộn, hãy thêm nó trực tiếp vào màn hình và đặt Position của nó thành Fixed. Bạn không thể chọn Fixed cho phần tử nằm bên trong sheet.

Giữ nút mua hàng luôn hiển thị

Để giữ nút mua hàng và các liên kết pháp lý luôn hiển thị khi người dùng cuộn, hãy đặt chúng vào footer. Footer nằm bên trong sheet.

Footer luôn cố định ở cuối màn hình, phía trên sheet. Người dùng có thể cuộn toàn bộ nội dung của sheet lên phía trên footer để xem.

Footer ở gốc màn hình trông giống hệt footer trong sheet.

Tùy chỉnh giao diện sheet

Bạn có thể tùy chỉnh giao diện sheet như bất kỳ container nào khác. Tuy nhiên, padding và bo góc hoạt động khác một chút:

• Screen padding: Phần padding màn hình chỉ áp dụng cho các phần tử bên ngoài sheet, do đó sheet trải dài từ mép này sang mép kia của màn hình.
• Element padding: Padding của sheet giữ nội dung bên trong không bị sát mép màn hình.
• Corners: Các góc tròn ở phía trên nâng sheet lên khỏi vị trí ban đầu một khoảng bằng bán kính góc, khiến hero hiển thị ở các góc đó. Sheet có nền video sẽ không được nâng lên, nên các góc của nó hiển thị nền màn hình. Sheet trong suốt chỉ được nâng lên khi nền màn hình là một màu đồng nhất.

Sliding sheet so với Bottom Sheet

Cả hai đều chiếm phần dưới cùng của màn hình. Hãy chọn loại phù hợp với nhu cầu của bạn:

• Dùng Sliding sheet để hiển thị nội dung chính của màn hình phía trên một hero. Sheet luôn hiển thị khi màn hình mở, và chỉ di chuyển khi người dùng cuộn.
• Dùng Bottom Sheet cho nội dung xuất hiện theo yêu cầu, chẳng hạn như danh sách gói đằng sau liên kết Show all plans. Bạn hiển thị nó bằng action Show.