Dies ist ein sehr kurzer Beitrag, der Ihnen ein paar Hinweise zur Verwendung von Google AdMob-Banneranzeigen in einem Jetpack Compose-Lookup-Layout auf Android gibt.

Ich wollte gleich zwei Dinge sagen:

1- Das AdMob-Team hat seine Bibliothek noch nicht aktualisiert (in Bezug auf die Unterstützung für das Verfassen), daher ist es immer ein bisschen schwierig, AdMob mit dem Verfassen zu verwenden

2- Das Folgende sieht aus wie ein Hack, weil wir die Anzeige aus der Compose-Hierarchie geladen haben, es wird funktionieren! Aber das ist nicht die „ideale“ Lösung. Solange wir jedoch über diese Interoperabilität verfügen, kann dies der beste Weg sein.

Hier sind die offiziellen Dokumente zur Implementierung der AdMob-Bannerwerbung in einer Android-App. Die Beispiele zeigen Ihnen, wie Sie dies programmgesteuert oder mithilfe eines XML-Layouts tun (erinnern Sie sich daran? :-)). Schnellstart und Bannerwerbung implementieren.

Hier ist der Compose-Hack anders (und Sie können ihn verbessern), also fangen wir hier an. Die Dokumente sagen, dass Sie Ihre Anzeige onCreate laden sollen:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        MobileAds.initialize(this) {}

        mAdView = findViewById(R.id.adView)
        val adRequest = AdRequest.Builder().build()
        mAdView.loadAd(adRequest)
    }

Sie können dies auch tun, indem Sie nach dem Aufrufen von loadAd-Komposition von onCreate eingeben. Aber machen wir es anders:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalInspectionMode
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.blundell.tut.R
import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.AdSize
import com.google.android.gms.ads.AdView

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

Verwenden Sie zum Erstellen eines neuen Composable das bereitgestellte AdMob AdView Wickeln Sie das in eine bereitgestellte Komposition ein AndroidView und wickeln Sie beide selbst zusammensetzbar ein AdvertView.

Die Compose-Vorschau möchte AdView nicht rendern, wenn es so verwendet wird, und deshalb haben wir AdMob validiert AdView für die Verwendung des Äquivalents von isInEditMode für komponieren, genannt LocalInspectionMode.current. Dadurch konnte unsere Vorschau eine rote Flagge statt einer Anzeige in einer Vorschau anzeigen.

Die offizielle Dokumentation für AndroidView erklärt es:

Erstellt eine Android-Layoutressource in Anwesenheit von ViewBinding. Die Bindung erhält man von factory Block, um genau einmal aufgerufen zu werden, um die zu erhalten ViewBinding compose und wird garantiert auch im UI-Thread aufgerufen. Also zusätzlich zur Herstellung ViewBindingDer Block kann auch verwendet werden, um eine Aus-Initialisierung durchzuführen und View Einstellung der konstanten Eigenschaften. das update Block kann aufgrund der Neuzusammenstellung mehrmals ausgeführt werden (auch im UI-Thread), und dies ist der richtige Ort zum Festlegen View Eigenschaften je nach Bundesland. Wenn sich der Status ändert, wird der Block verstärkt, um die neuen Eigenschaften aufzunehmen. Beachten Sie, dass der Block auch danach einmal ausgeführt wird factory vervollständigen den Block.

https://developer.android.com/reference/kotlin/androidx/compose/ui/viewinterop/package-summary#AndroidView(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)

Diese Erklärung scheint darauf hinzudeuten, dass wir eine der beiden Eigenschaften verwenden können: factory (was wir tun) oder update um unsere Anzeige zu laden. Beide führen den UI-Thread aus (wie running loadAd von onCreate.) Als Richter für den Leser wirst du denken, wenn du das willst loadAd -Methode, die in jeder Komposition aufgerufen werden soll, oder als eine, wenn die Ansicht instanziiert wird.

Und das ist es! Denken Sie daran, anzurufen loadAd auf diese Weise wird von niemandem empfohlen, sondern weil es verwendet wird factory an AndroidView es gefühlt ok 🙂 (Wenn Sie verwenden update, ich wette, die interne Bibliothek schafft es, uns so oft anzurufen). Dieses Beispiel soll Ihnen nur den Einstieg erleichtern AdMob und komponieren.

Wenn jemand ein Beispiel mit mehr Funktionen möchte, kontaktieren Sie mich bitte auf Twitter und ich kann ein Beispielprojekt erstellen.

Genießen!

Wenn Ihnen dieser Beitrag gefallen hat, könnte Ihnen gefallen: Beten Sie über Ihre gradle Abhängigkeiten: NUR WEIL!