如何显示横幅广告在Jetpack撰写？

Question

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

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

AndroidView(...) {
    ...
}

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

Answer 1

只是补充一下布伦德尔的回答。从Admob 21.0.0开始，您会收到以下错误:

Val不能被重新分配

因此

    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())
            }
        }
    )

Answer 2

这里有一个替代方法。您可以在XML中使用< code>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 3

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

@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/)