Hình ảnh, video và biểu tượng

Một màn hình flow với phần tử hình ảnh trên đó

Flow & Paywall Builder bao gồm ba loại phần tử media thuộc danh mục Media: Image, Video và Icon.

Tip

Để hình ảnh hoặc video bao phủ toàn bộ màn hình — kể cả các vùng phía sau notch và home indicator — hãy đặt nó ở chế độ fixed với tất cả offset bằng 0 và chọn Ignore safe area. Xem Bố cục và vị trí.

Hình ảnh

Tải lên tệp .JPG, .PNG, hoặc .WEBP tối đa 20 MB.

Ảnh GIF và WEBP động không được hỗ trợ. Để thêm chuyển động, hãy dùng phần tử Video thay thế.

Tip

Để đặt nội dung lên trên một hình ảnh toàn màn hình, hãy tạo hero image từ nền màn hình và một sliding sheet.

Kích thước hình ảnh

Hình ảnh có tỷ lệ riêng của nó, và khung bạn đặt có thể không khớp với tỷ lệ đó. Hãy đặt chiều rộng trước, rồi quyết định chiều cao:

  • Chiều cao tự động. Hình ảnh giữ nguyên tỷ lệ: chiều cao sẽ tự điều chỉnh theo chiều rộng bạn đặt. Content mode bị tắt vì không có gì để cắt xén.
  • Chiều cao cố định hoặc Fill. Khung có tỷ lệ riêng của nó, và Content mode xử lý sự không khớp này:
    • Fit. Thu phóng toàn bộ hình ảnh vừa trong khung và để lại khoảng trống.
    • Fill. Cắt bỏ phần tràn ra ngoài. Mặc định.

Để giữ hình ảnh không bị cắt ở mọi độ rộng màn hình, hãy dùng chiều rộng Fill với chiều cao Auto. Khi dùng chiều cao cố định, vùng bị cắt ở trên và dưới sẽ thay đổi tùy theo kích thước màn hình.

Video

Tải lên file .MP4 hoặc .WEBM tối đa 50 MB và không dài hơn 30 giây. Độ phân giải tối thiểu là 640x640 pixel.

  • Aspect — kiểm soát cách video lấp đầy vùng chứa khi bạn đặt chiều cao cho nó. Xem Kích thước video.
  • Loop — phát lại video liên tục. Mặc định là bật.
  • Use custom media ID — xem Custom media ID bên dưới.

Video không phát trong chế độ xem trước trên editor — canvas chỉ hiển thị một khung hình tĩnh. Trên thiết bị khi chạy thực tế, video phát không có âm thanh theo mặc định. Khi bật Loop, video lặp lại vô thời hạn.

Kích thước video

Video có tỷ lệ riêng của nó, và khung bạn cung cấp có thể không khớp với tỷ lệ đó. Chiều cao sẽ quyết định cách xử lý:

  • Hug height. Chiều cao theo tỷ lệ gốc của video.
  • Fixed hoặc Fill height. Thuộc tính Aspect sẽ xử lý sự không khớp này:
    • Fit. Thu nhỏ toàn bộ video vừa trong khung và để lại khoảng trống.
    • Fill. Cắt bớt phần tràn ra ngoài. Mặc định.

Khi Adapty không thể đọc được tỷ lệ kích thước của video khi tải lên, hệ thống sẽ hiển thị cảnh báo: “Could not determine video dimensions. Set a fixed height to ensure the video displays correctly.” Hãy đặt chiều cao cố định cho video, hoặc đảm bảo container chứa nó có chiều cao xác định. Nếu không, chiều cao của video có thể bị thu về 0.

Kích hoạt hành động khi video kết thúc

Phần tử Video hỗ trợ trigger On playback finished kích hoạt khi video phát đến cuối. Thiết lập nó trong bảng Interactions để điều hướng đến màn hình khác, hiển thị CTA, hoặc thực hiện bất kỳ hành động nào khác.

Biểu tượng

Icon picker with the Tabler Icons library

Chọn từ thư viện Tabler Icons được tích hợp sẵn, với hàng nghìn biểu tượng theo hai phong cách hiển thị:

  • Stroke — chỉ viền ngoài.
  • Filled — tô đặc.

Tìm kiếm trong bộ chọn bằng từ khóa để tìm biểu tượng. Đặt màu cho biểu tượng trong bộ chọn Color — chọn kiểu màu đã lưu hoặc đặt màu tùy chỉnh.

Bản địa hóa media

Các phần tử Hình ảnh và Video có thể chứa file khác nhau cho từng ngôn ngữ:

  1. Nếu bảng Localizations đang mở, hãy đóng lại để hiển thị bảng thuộc tính.
  2. Trong thanh công cụ phía dưới, đặt Locale thành ngôn ngữ mục tiêu.
  3. Chọn phần tử. Sau đó, trong bảng thuộc tính, tải lên file đã được bản địa hóa.
  4. Khi hoàn tất, đặt Locale về ngôn ngữ mặc định. Khi đang chọn một ngôn ngữ khác, văn bản bạn chỉnh sửa trong bảng thuộc tính sẽ thay đổi bản dịch của ngôn ngữ đó.

Trong locale không có file riêng, phần tử sẽ hiển thị file của locale mặc định. Bạn cũng có thể tải lên file cho từng locale trong Localizations panel.

Hạn chế

Bạn không thể bản địa hóa những phần sau:

  • Icons
  • Fill của màn hình hoặc container — bao gồm nền màn hình và hình ảnh hoặc video nền của container, được thiết lập trong mục Fill. Để thay đổi hình ảnh hoặc video theo ngôn ngữ, hãy thêm nó dưới dạng phần tử Image hoặc Video độc lập — những phần tử này hỗ trợ file theo từng ngôn ngữ, như mô tả trong Bản địa hóa media.
  • ID media tùy chỉnh

ID media tùy chỉnh

Important

Bạn cũng có thể đặt ID media tùy chỉnh cho background dạng ảnh hoặc video.

Gắn thẻ một phần tử ảnh hoặc video với ID media tùy chỉnh để hoán đổi nó lúc runtime từ code của ứng dụng. Dùng tính năng này cho hình ảnh được cá nhân hóa — ví dụ như hiển thị avatar mà người dùng đã chọn.

Media bạn tải lên trong Flow & Paywall Builder sẽ đóng vai trò là fallback. Nếu code của bạn không cung cấp media cho ID đó lúc runtime, fallback sẽ được hiển thị thay thế.

Một custom media ID chỉ có thể hoán đổi file cùng loại — ảnh với ảnh, video với video. Nếu loại không khớp, fallback sẽ được hiển thị.

Để bật custom media ID cho phần tử Image hoặc Video:

  1. Chọn checkbox Use custom media ID bên dưới khu vực tải lên.
  2. Nhập một media ID.
  3. Tải lên ảnh hoặc video dự phòng.

Trong code ứng dụng, tải media theo ID của nó — xem Tùy chỉnh assets để biết API SDK.

Tip

Để màn hình đầu tiên của flow hiển thị ngay lập tức, hãy gắn thẻ các hình ảnh và video nặng với ID media tùy chỉnh và yêu cầu các nhà phát triển đóng gói những tệp đó cùng với ứng dụng. Xem Hiển thị media màn hình đầu tiên từ app bundle.