如果你使用付费墙编辑工具自定义了付费墙,就不需要在移动端代码中手动编写渲染逻辑来向用户展示它。这类付费墙已经包含了展示内容和展示方式的完整配置。
本指南仅适用于使用新版付费墙编辑工具构建的付费墙,需要 SDK v3.0。使用不同版本付费墙编辑工具设计的付费墙、远程配置付费墙以及 Observer 模式的付费墙展示流程有所不同。
如需获取下方使用的 viewConfiguration 对象,请参阅获取付费墙编辑工具付费墙及其配置。
为了在设备屏幕上显示可视化付费墙,你需要先对其进行配置。为此,调用 AdaptyUI.getPaywallView() 方法,或直接创建 AdaptyPaywallView:
val paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
val paywallView =
AdaptyPaywallView(activity) // or retrieve it from xml
...
with(paywallView) {
showPaywall(
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
}
AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver
);
AdaptyPaywallView paywallView =
new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, insets, personalizedOfferResolver, tagResolver, timerResolver);
<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" />
视图成功创建后,你可以将其添加到视图层级中,并在设备屏幕上展示。
如果你不是通过调用 AdaptyUI.getPaywallView() 获取 AdaptyPaywallView 的,还需要额外调用 .showPaywall() 方法。
要在设备屏幕上显示可视化付费墙,必须先对其进行配置。请使用以下可组合函数:
AdaptyPaywallScreen(
viewConfiguration,
products,
eventListener,
insets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
请求参数:
| 参数 | 是否必填 | 描述 |
|---|
| viewConfiguration | 必填 | 提供一个包含付费墙视觉详情的 AdaptyUI.LocalizedViewConfiguration 对象。使用 Adapty.getViewConfiguration(paywall) 方法加载该对象。详情请参阅获取付费墙的视觉配置。 |
| products | 可选 | 提供 AdaptyPaywallProduct 数组,以优化产品在屏幕上的显示时机。如果传入 null,AdaptyUI 将自动获取所需产品。 |
| eventListener | 可选 | 提供 AdaptyUiEventListener 以监听付费墙事件。建议继承 AdaptyUiDefaultEventListener 以简化使用。详情请参阅处理付费墙事件。 |
| insets | 可选 | Insets 是付费墙周围的间距,用于防止可点击元素被系统栏遮挡。 默认值为 UNSPECIFIED,即 Adapty 会自动调整间距,适用于全面屏付费墙。 如果你的付费墙不是全面屏,可能需要设置自定义间距。具体方法请参阅下方修改付费墙间距部分。 |
| personalizedOfferResolver | 可选 | 若要标记个性化定价(了解更多),请实现 AdaptyUiPersonalizedOfferResolver 并传入你自己的逻辑:当产品价格为个性化时返回 true,否则返回 false,该逻辑以 AdaptyPaywallProduct 为映射依据。 |
| tagResolver | 可选 | 使用 AdaptyUiTagResolver 解析付费墙文本中的自定义标签。该解析器接收标签参数并将其解析为对应字符串。详情请参阅付费墙编辑工具中的自定义标签。 |
| timerResolver | 可选 | 如果需要使用自定义计时器功能,请在此传入对应的解析器。 |
想了解 Adapty SDK 如何集成到移动应用中的真实示例?请查看我们的示例应用,其中展示了完整的配置过程,包括显示付费墙、完成购买以及其他基本功能。
更改付费墙边距
边距是付费墙周围的空白区域,用于防止可点击元素被系统栏遮挡。默认情况下,Adapty 会自动调整边距,这对全屏付费墙效果很好。
如果你的付费墙不是全屏布局,可能需要自定义边距:
- 如果状态栏和导航栏都不与
AdaptyPaywallView 重叠,请使用 AdaptyPaywallInsets.NONE。
- 对于更复杂的自定义场景,例如付费墙与顶部状态栏重叠但不与底部重叠,可以仅将
bottomInset 设置为 0,如下例所示:
//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
ViewCompat.setOnApplyWindowInsetsListener(this, null)
action(systemBarInsets)
insets
}
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
val paywallInsets = AdaptyPaywallInsets.vertical(insets.top, 0)
paywallView.showPaywall(
viewConfiguration,
products,
eventListener,
paywallInsets,
personalizedOfferResolver,
tagResolver,
timerResolver,
)
}
...
ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);
AdaptyPaywallInsets paywallInsets =
AdaptyPaywallInsets.of(systemBarInsets.top, 0);
paywallView.showPaywall(paywall, products, viewConfiguration, paywallInsets, productTitleResolver);
return insets;
});
使用开发者自定义计时器
要在移动应用中使用开发者自定义计时器,请创建一个 timerResolver 对象——这是一个字典或映射,用于将自定义计时器与付费墙渲染时替换它们的字符串值进行配对。示例如下:
...
val customTimers = mapOf(
"CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}
...
Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
"CUSTOM_TIMER_NY",
new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
@NonNull
@Override
public Date timerEndAtDate(@NonNull String timerId) {
Date date = customTimers.get(timerId);
return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* 1小时后 */
}
};
在此示例中,CUSTOM_TIMER_NY 是您在 Adapty 看板中设置的开发者自定义计时器的计时器 ID。timerResolver 确保您的应用动态更新计时器,显示正确的值——例如 13d 09h 03m 34s(计算方式为计时器结束时间(如元旦)减去当前时间)。
要在移动应用中使用自定义标签,需创建一个 tagResolver 对象——一个将自定义标签与渲染付费墙时用于替换它们的字符串值配对的字典或映射。示例如下:
val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }
Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;
在此示例中,USERNAME 是你在 Adapty 看板中以 <USERNAME/> 格式输入的自定义标签。tagResolver 会确保应用将该自定义标签动态替换为指定的值——例如 John。
建议在展示付费墙之前创建并填充 tagResolver。准备好后,将其传入用于展示付费墙的 AdaptyUI 方法。
修改付费墙加载指示器颜色
您可以通过以下方式覆盖加载指示器的默认颜色:
<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
<item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>