Utilizar anuncios de banner de AdMob en el diseño de redacción

Esta es una publicación realmente rápida para darle algunas instrucciones sobre cómo usar los anuncios de banner de Google AdMob en el diseño de vista de Android Jetpack Compose.

De inmediato quiero decir dos cosas:

1- El equipo de AdMob no ha actualizado su biblioteca (en términos de compatibilidad con la redacción), por lo que siempre es un poco engorroso utilizar AdMob con redacción.

2- Lo siguiente se siente como un hacker, porque cargamos el anuncio desde la jerarquía de redacción y ¡funciona! Pero esta no es una solución «ideal». Sin embargo, aunque tenemos este tipo de interoperabilidad, puede que sea la mejor forma.

Los siguientes son documentos oficiales para implementar anuncios de banner de AdMob en aplicaciones de Android. Estos ejemplos le muestran cómo utilizar los diseños XML mediante programación (¿los recuerda? :-)). Empiece rápidamente y luego implemente anuncios de banner.

Aquí es donde el ‘truco’ de composición es diferente (es posible que pueda mejorar esto), así que comencemos aquí. La documentación dice que cargue su anuncio en onCreate:

    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)
    

También puede usar compose para hacer esto después de llamar a loadAd desde la composición onCreate. Pero cambiemos el camino:

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

Cree una nueva combinación y utilice el AdMob proporcionado. AdView Envuélvalo en la redacción proporcionada AndroidView Y empaquételos todos en un componible que usted mismo cree AdvertView.

Cuando se usa así, a la vista previa de redacción no le gusta renderizar AdView, por lo que verificamos AdMob AdView Solía ​​ser equivalente a isInEditMode para componer, se llama LocalInspectionMode.currentEsto permite que nuestra vista previa presente un banner rojo en lugar del anuncio en la vista previa.

El documento oficial es AndroidView Explica esto:

Redactar un recurso de diseño de Android si existe ViewBinding. La encuadernación es de factory Bloquear, se llamará una vez para obtener ViewBinding Se combina y también se garantiza que se llamará en el hilo de la interfaz de usuario.Por tanto, además de crear ViewBinding, Este bloque también se puede utilizar para realizar una inicialización y View Configuración de atributos constantes.esta update Debido a la reorganización, el bloque se puede ejecutar varias veces (también en el hilo de la interfaz de usuario), este es el lugar correcto para configurar View Los atributos dependen del estado. Cuando cambie el estado, el bloque se volverá a ejecutar para establecer nuevos atributos.Tenga en cuenta que el bloque también estará en factory El bloque está completo.

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

Esta explicación parece indicar que podemos utilizar cualquiera de los dos atributos siguientes: factory (Hacemos esto) o update Carga nuestro anuncio.Todos se ejecutan en el hilo de la interfaz de usuario (lo mismo que ejecutar loadAd De onCreate.) Como juicio del lector, si quiere loadAd El método llamado en cada combinación o como un método cuando se crea una instancia de la vista.

¡Eso es todo!Recuerda, llama loadAd Nadie recomienda de esta manera, pero porque usa factory de AndroidView eso sentir Ok 🙂 (si ha usado update, Apuesto a que la biblioteca interna manejará nuestras múltiples llamadas de todos modos). Este ejemplo es solo para comenzar a usar AdMob y escribir.

Si alguien quiere un ejemplo más completo, por favor contácteme en Twitter y puedo hacer un proyecto de muestra.

¡disfrutar!

Si te gusta este artículo, tal vez te guste: Domina tus dependencias de gradle: ¡solo porque sí!