Recicla anuncios de banner en feeds desplazables

En las listas de desplazamiento infinito, como los feeds de noticias o los feeds de redes sociales, crear un anuncio de banner para cada posición de elemento puede generar un alto consumo de memoria y un retraso en la IU. Para mejorar el rendimiento, usa el reciclaje de banners para mantener una caché pequeña de tamaño fijo de instancias de BannerAd y reutilizar los anuncios fuera de la pantalla a medida que el usuario se desplaza.

En esta página, se explica cómo determinar el tamaño de una caché de anuncios, cómo verificar si una instancia de BannerAd está fuera de la pantalla y cómo reasignar anuncios almacenados en caché a posiciones de la lista.

En la siguiente imagen, se muestra cómo un anuncio de banner fuera de la pantalla vuelve a la caché y se reutiliza en una posición de la lista a medida que el usuario se desplaza:

Requisitos previos

Antes de continuar, usa banners intercalados adaptables que admitan el desplazamiento.

Realiza un seguimiento de las posiciones asignadas en la lista

A medida que el usuario se desplaza, el reciclaje de banners mantiene una cantidad limitada de instancias de BannerAd en la memoria y las mueve entre las posiciones de la lista.

Para saber qué anuncio reutilizar, haz un seguimiento de la posición en la lista que ocupa cada anuncio en la caché.

Mantén el siguiente estado en tu widget:

• Es una caché de tamaño fijo de instancias de BannerAd. El tamaño que estableces para la caché es la cantidad máxima de anuncios que se almacenan en la memoria al mismo tiempo.
• Es un intervalo de anuncios que determina con qué frecuencia aparece un anuncio en la lista.
• Una clase de posición Map que asocia cada instancia de BannerAd con la posición de la lista que ocupa la instancia. Cuando reciclas un anuncio, actualiza la entrada en esta clase Map para que apunte a la posición más reciente.
• Es una clase de tamaño Map que almacena el objeto AdSize resuelto por la plataforma para cada anuncio cargado. Después de que se carga el anuncio, se conocen las alturas de los banners adaptables intercalados.

En el siguiente ejemplo, se hace un seguimiento de las posiciones de la lista asignadas para cada anuncio en la caché:

// Maximum number of banner ad instances kept in the cache.
static const int _cacheSize = 8;

// Spacing between banner ads. For example, index 0, 6, 12, and so on
// display ads.
static const int _adInterval = 6;

// The cache of allocated BannerAd instances.
final List<BannerAd> _banners = [];

// Maps each BannerAd instance to its currently assigned list item position.
final Map<BannerAd, int> _bannerPositions = {};

// Stores the platform-resolved size of each loaded banner ad.
final Map<BannerAd, AdSize> _bannerSizes = {};
inline_adaptive_banner_snippets.dart

Elige un tamaño de caché

Haz que la caché sea más grande que la cantidad máxima de anuncios que pueden aparecer en la pantalla al mismo tiempo. Si la caché es más pequeña que ese tamaño, el anuncio seleccionado para el reciclaje suele seguir siendo visible, y tu app asigna anuncios adicionales en lugar de reutilizar los anuncios.

Para elegir un tamaño, haz lo siguiente:

1. Para estimar cuántos anuncios caben en la pantalla a la vez, divide la altura del viewport por la altura de un intervalo de anuncios.
2. Se agregó espacio para los anuncios que aún se separan durante el desplazamiento rápido.
3. Si ves que los anuncios seleccionados para el reciclaje aún aparecen en la pantalla, aumenta el tamaño de la caché.

En el ejemplo de esta página, se muestra un anuncio cada seis filas y se usa una caché de ocho. En este ejemplo, se deja espacio para los pocos anuncios que se ven en la pantalla a la vez.

Comprueba si un anuncio está en la pantalla

Todas las clases Google Mobile Ads Flutter Plugin que renderizan vistas de la plataforma implementan la clase AdWithView y proporcionan un getter isMounted. Antes de reasignar un anuncio almacenado en caché a una posición de la lista, verifica el método get isMounted para confirmar que el anuncio se desplazó fuera de la pantalla y que se puede reutilizar de forma segura.

Cómo recuperar y reciclar un anuncio de banner

Cuando la lista solicita un banner para una posición determinada, haz lo siguiente:

1. Reutiliza el anuncio que ya está asignado a esa posición, si existe uno.
2. Si la caché no está llena, solicita un anuncio.
3. Si la caché está llena, selecciona un anuncio almacenado en caché y verifica que el getter isMounted sea el valor false antes de volver a asignar el anuncio.
4. Llama al método dispose() en cada anuncio de la caché cuando se quite el widget del árbol de widgets.

En el siguiente ejemplo, se recupera y recicla un anuncio de banner:

BannerAd _getRecycledBannerAd(BuildContext context, int bannerPosition) {
  // 1. If an ad is already mapped to this position, reuse it.
  final BannerAd? existingBanner = _bannerPositions.entries
      .firstWhereOrNull((entry) => entry.value == bannerPosition)
      ?.key;
  if (existingBanner != null) {
    return existingBanner;
  }

  // 2. If the cache is not full, allocate a new ad instance.
  if (_banners.length < _cacheSize) {
    final BannerAd newBanner = _createBannerAd(context);
    _banners.add(newBanner);
    _bannerPositions[newBanner] = bannerPosition;
    return newBanner;
  }

  // 3. Select an existing ad from the cache using modulo arithmetic.
  final BannerAd targetBanner = _banners[bannerPosition % _cacheSize];

  // 4. Verify the ad is detached from the screen before recycling.
  if (targetBanner.isMounted) {
    // If still on screen during fast scrolls, allocate a temporary instance.
    return _createBannerAd(context);
  } else {
    // Safe to reuse: reassign to the new position.
    _bannerPositions[targetBanner] = bannerPosition;
    return targetBanner;
  }
}
inline_adaptive_banner_snippets.dart

Para ver el ejemplo completo, consulta Ejemplo de Google Mobile Ads Flutter Plugin.