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.current
Esto 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 defactory
Bloquear, se llamará una vez para obtenerViewBinding
Se combina y también se garantiza que se llamará en el hilo de la interfaz de usuario.Por tanto, además de crearViewBinding
, Este bloque también se puede utilizar para realizar una inicialización yView
Configuración de atributos constantes.estaupdate
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 configurarView
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á enfactory
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í!