如何在 Jetpack Compose 中显示横幅广告？

Question

我刚刚开始学习 Jetpack Compose，UI 如此简化真是太好了。我正在学习如何使用 Jetpack 组合RecyclerView（Lazycolumn）等来实现所有 XML 视图。

我想知道如何在 Jetpack Compose 中显示 AdMob 横幅广告。我知道我们可以通过互操作性 API 来使用经典的 XML 视图。

AndroidView(...) {
    ...
}

有没有一种Compose的方式来实现Admob？或者我只能使用 AndroidView 以编程方式创建横幅广告视图。

Answer 1

您可以在撰写中显示横幅广告，如下所示：

@Composable
fun AdvertView(modifier: Modifier = Modifier) {
    val isInEditMode = LocalInspectionMode.current
    if (isInEditMode) {
        Text(
            modifier = modifier
                .fillMaxWidth()
                .background(Color.Red)
                .padding(horizontal = 2.dp, vertical = 6.dp),
            textAlign = TextAlign.Center,
            color = Color.White,
            text = "Advert Here",
        )
    } else {
        AndroidView(
            modifier = modifier.fillMaxWidth(),
            factory = { context ->
                AdView(context).apply {
                    setAdSize(AdSize.BANNER)
                    adUnitId = context.getString(R.string.ad_id_banner)
                    loadAd(AdRequest.Builder().build())
                }
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun AdvertPreview() {
    AdvertView()
}

（摘自我的博客：https://blog.blundellapps.co.uk/using-admob-banner-ads-in-a-compose-layout/）

（（ TY @user12813 ，答案已更新））