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

Question

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

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

AndroidView(...) {
    ...
}

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

Answer 1

这是另一种方法。您可以在 XML 中使用 ComposeView 并使其工作。

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.screens.MainActivity">
    
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/composeView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/adView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-xxxxxxxxxxxxx/xxxxxxxxxx"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

setContentView(R.layout.activity_main).apply {
    findViewById<ComposeView>(R.id.composeView).setContent {               
        MyAppTheme {
            Surface(modifier = Modifier.fillMaxSize()){
                MyApp()
            }
        }
    }
}

Answer 2

您可以像这样在 compose 中显示横幅广告：

@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 {
                    adSize = 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/）

Answer 3

只需在 Blundell 的回答中添加一点。从 Admob 21.0.0 开始，您会收到以下错误：

Val cannot be reassigned

所以，而不是

    adSize = AdSize.BANNER

使用

    setAdSize(AdSize.BANNER)

Blundell 的答案中的整个 AndroidiView 应如下所示：

    AndroidView(
        modifier = modifier.fillMaxWidth(),
        factory = { context ->
            AdView(context).apply {
                setAdSize(AdSize.BANNER)
                adUnitId = context.getString(R.string.ad_id_banner)
                loadAd(AdRequest.Builder().build())
            }
        }
    )

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

How to show a banner ad in Jetpack Compose?

admob

android-jetpack-compose