Hiển thị onboarding trong Kotlin Multiplatform SDK

Nếu bạn đã tùy chỉnh một onboarding bằng builder, bạn không cần lo lắng về việc render nó trong code ứng dụng Kotlin Multiplatform để hiển thị cho người dùng. Onboarding như vậy đã chứa cả nội dung cần hiển thị lẫn cách thức hiển thị.

Trước khi bắt đầu, hãy đảm bảo rằng:

1. Bạn đã cài đặt Adapty Kotlin Multiplatform SDK phiên bản 3.16.1 trở lên.
2. Bạn đã tạo một onboarding.
3. Bạn đã thêm onboarding vào một placement.

Adapty Kotlin Multiplatform SDK cung cấp hai cách để hiển thị onboarding:

• Với Compose Multiplatform
• Không dùng Compose Multiplatform

Với Compose Multiplatform

Để hiển thị một onboarding, sử dụng phương thức view.present() trên view được tạo bởi phương thức createOnboardingView. Mỗi view chỉ có thể được sử dụng một lần. Nếu bạn cần hiển thị lại onboarding, hãy gọi createOnboardingView thêm một lần nữa để tạo một view mới.

viewModelScope.launch {
    AdaptyUI.createOnboardingView(onboarding = onboarding).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

Cấu hình kiểu hiển thị trên iOS

Cấu hình cách onboarding được hiển thị trên iOS bằng cách truyền tham số iosPresentationStyle vào phương thức present(). Tham số này nhận giá trị AdaptyUIIOSPresentationStyle.FULLSCREEN (mặc định) hoặc AdaptyUIIOSPresentationStyle.PAGESHEET.

viewModelScope.launch {
    val view = AdaptyUI.createOnboardingView(onboarding = onboarding).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Tùy chỉnh cách mở liên kết trong onboarding

Mặc định, các liên kết trong onboarding sẽ mở trong trình duyệt nội bộ của ứng dụng. Điều này mang lại trải nghiệm liền mạch cho người dùng bằng cách hiển thị trang web ngay bên trong ứng dụng, giúp họ xem nội dung mà không cần chuyển sang ứng dụng khác.

Nếu bạn muốn mở liên kết trong trình duyệt bên ngoài, bạn có thể tùy chỉnh hành vi này bằng cách đặt tham số externalUrlsPresentation thành AdaptyWebPresentation.EXTERNAL_BROWSER:

viewModelScope.launch {
    AdaptyUI.createOnboardingView(
        onboarding = onboarding,
        externalUrlsPresentation = AdaptyWebPresentation.EXTERNAL_BROWSER // default – IN_APP_BROWSER
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

Không dùng Compose Multiplatform

Để nhúng một onboarding mà không dùng Compose Multiplatform, hãy gọi createNativeOnboardingView. Hàm này trả về một AdaptyNativeOnboardingView mà bạn thêm vào layout của mình:

val nativeView = AdaptyUI.createNativeOnboardingView(
    context = context,
    viewModelStoreOwner = activity,
    onboarding = onboarding,
    observer = myOnboardingObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

open class BaseOnboardingObserver : AdaptyUIOnboardingsEventsObserver

class MyOnboardingObserver: BaseOnboardingObserver {
    override func onboardingViewOnCloseAction(
        view: AdaptyUIOnboardingView,
        meta: AdaptyUIOnboardingMeta,
        actionId: String
    ) {
        // remove nativeView from your view hierarchy
    }
}

let nativeView = AdaptyUI.shared.createNativeOnboardingView(
    onboarding: onboarding,
    observer: MyOnboardingObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

Hủy view

Gọi dispose() khi xóa view khỏi layout. Thao tác này sẽ hủy đăng ký event listener và giải phóng các tài nguyên nội bộ.

nativeView.dispose()