Reciclar anúncios de banner em feeds roláveis

Em listas de rolagem longa ou infinita, como feeds de notícias ou de redes sociais, criar um anúncio de banner para cada posição de item pode levar a um alto consumo de memória e atraso na interface. Para melhorar o desempenho, use a reciclagem de banners para manter um cache pequeno e de tamanho fixo de instâncias BannerAd e reutilizar anúncios fora da tela à medida que o usuário rola a página.

Esta página aborda o dimensionamento de um cache de anúncios, a verificação de se uma instância BannerAd está fora da tela e a reatribuição de anúncios em cache a posições de lista.

A imagem a seguir mostra como um anúncio de banner fora da tela retorna ao cache e é reutilizado em uma posição de lista conforme o usuário rola a tela:

Pré-requisitos

Antes de continuar, use banners adaptativos inline para aqueles com rolagem.

Rastrear posições de lista atribuídas

À medida que o usuário rola a tela, a reciclagem de banners mantém um número limitado de instâncias de BannerAd na memória e as move entre as posições da lista.

Para saber qual anúncio reutilizar, rastreie a posição na lista que cada anúncio ocupa no cache.

Mantenha o seguinte estado no widget:

• Um cache de tamanho fixo de instâncias BannerAd. O tamanho definido para o cache é o número máximo de anúncios mantidos na memória de uma só vez.
• Um intervalo de anúncio que determina com que frequência um anúncio aparece na lista.
• Uma classe de posição Map que associa cada instância BannerAd à posição da lista que ela ocupa. Ao reciclar um anúncio, atualize a entrada na classe Map para apontar para a posição mais recente.
• Uma classe de tamanho Map que armazena o objeto AdSize resolvido pela plataforma para cada anúncio carregado. Depois que o anúncio é carregado, as alturas dos banners adaptativos inline são conhecidas.

O exemplo a seguir rastreia as posições atribuídas na lista para cada anúncio no cache:

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

Escolher um tamanho de cache

Faça com que o cache seja maior que o número máximo de anúncios que podem aparecer na tela ao mesmo tempo. Se o cache for menor que esse tamanho, o anúncio selecionado para reciclagem ainda estará visível, e seu app vai alocar anúncios adicionais em vez de reutilizar os anúncios.

Para escolher um tamanho, faça o seguinte:

1. Para estimar quantos anúncios cabem na tela ao mesmo tempo, divida a altura da janela de visualização pela altura de um intervalo de anúncio.
2. Adicione espaço para anúncios que ainda estão sendo separados durante rolagens rápidas.
3. Se os anúncios selecionados para reciclagem ainda estiverem na tela, aumente o tamanho do cache.

O exemplo nesta página mostra um anúncio a cada seis linhas e usa um cache de oito. Este exemplo deixa espaço para os poucos anúncios visíveis na tela de uma só vez.

Verificar se um anúncio está na tela

Todas as classes Google Mobile Ads Flutter Plugin que renderizam visualizações de plataforma implementam a classe AdWithView e fornecem um getter isMounted. Antes de reatribuir um anúncio em cache a uma posição na lista, verifique o getter isMounted para confirmar se o anúncio rolou para fora da tela e pode ser reutilizado.

Recuperar e reciclar um anúncio de banner

Quando a lista solicitar um banner para uma determinada posição, faça o seguinte:

1. Reutilize o anúncio já atribuído a essa posição, se houver um.
2. Se o cache não estiver cheio, solicite um anúncio.
3. Se o cache estiver cheio, selecione um anúncio armazenado em cache e verifique se o getter isMounted é o valor false antes de reatribuir o anúncio.
4. Chame o método dispose() em todos os anúncios no cache quando o widget for removido da árvore de widgets.

O exemplo a seguir recupera e recicla um anúncio 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 conferir o exemplo completo, consulte exemplo de Google Mobile Ads Flutter Plugin.