Recycler les bannières dans les flux à défilement

Dans les listes à défilement long ou infini, telles que les flux d'actualités ou les flux sociaux, la création d'une bannière publicitaire pour chaque position d'élément peut entraîner une forte consommation de mémoire et un décalage de l'interface utilisateur. Pour améliorer les performances, utilisez le recyclage de bannières afin de maintenir un cache de petite taille et de taille fixe d'instances BannerAd et de réutiliser les annonces hors écran lorsque l'utilisateur fait défiler la page.

Cette page explique comment dimensionner un cache d'annonces, vérifier si une instance BannerAd est hors écran et réattribuer des annonces mises en cache à des positions dans la liste.

L'image suivante montre comment une bannière publicitaire hors écran revient dans le cache et est réutilisée dans une position de liste lorsque l'utilisateur fait défiler la page :

Prérequis

Avant de continuer, utilisez des bannières adaptatives intégrées pour les bannières défilantes.

Suivre les positions attribuées dans les listes

Lorsque votre utilisateur fait défiler l'écran, le recyclage de bannières conserve un nombre limité d'instances BannerAd en mémoire et les déplace entre les positions de la liste.

Pour savoir quelle annonce réutiliser, suivez la position de chaque annonce dans la liste du cache.

Maintenez l'état suivant dans votre widget :

• Cache de taille fixe d'instances BannerAd. La taille que vous définissez pour le cache correspond au nombre maximal d'annonces conservées en mémoire à la fois.
• Intervalle d'annonces qui détermine la fréquence à laquelle une annonce s'affiche dans la liste.
• Classe de position Map qui associe chaque instance BannerAd à la position qu'elle occupe dans la liste. Lorsque vous recyclez une annonce, mettez à jour l'entrée de cette classe Map pour qu'elle pointe vers la dernière position.
• Classe de taille Map qui stocke l'objet AdSize résolu par la plate-forme pour chaque annonce chargée. Une fois l'annonce chargée, la hauteur des bannières adaptatives intégrées est connue.

L'exemple suivant suit les positions attribuées à chaque annonce dans le 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

Choisir la taille du cache

Rendez le cache plus grand que le nombre maximal d'annonces pouvant s'afficher à l'écran en même temps. Si le cache est plus petit que cette taille, l'annonce sélectionnée pour le recyclage est souvent toujours visible, et votre application alloue des annonces supplémentaires au lieu de réutiliser les annonces.

Pour choisir une taille, procédez comme suit :

1. Pour estimer le nombre d'annonces qui peuvent s'afficher simultanément à l'écran, divisez la hauteur de la fenêtre d'affichage par la hauteur d'un intervalle d'annonce.
2. Ajout d'un espace pour les annonces qui sont encore en train de se détacher lors d'un défilement rapide.
3. Si vous constatez que les annonces sélectionnées pour le recyclage sont toujours à l'écran, augmentez la taille du cache.

L'exemple sur cette page affiche une annonce toutes les six lignes et utilise un cache de huit. Cet exemple laisse de l'espace pour les quelques annonces visibles à l'écran à la fois.

Vérifier si une annonce est à l'écran

Toutes les classes Google Mobile Ads Flutter Plugin qui affichent des vues de plate-forme implémentent la classe AdWithView et fournissent un getter isMounted. Avant de réaffecter une annonce mise en cache à une position dans la liste, vérifiez le getter isMounted pour confirmer que l'annonce a défilé hors écran et qu'elle peut être réutilisée sans risque.

Récupérer et recycler une bannière

Lorsque la liste demande une bannière pour une position donnée, procédez comme suit :

1. Réutiliser l'annonce déjà attribuée à cette position, le cas échéant.
2. Si le cache n'est pas plein, demandez une annonce.
3. Si le cache est plein, sélectionnez une annonce mise en cache et vérifiez que le getter isMounted correspond à la valeur false avant de réattribuer l'annonce.
4. Appelez la méthode dispose() sur chaque annonce du cache lorsque le widget est supprimé de l'arborescence des widgets.

L'exemple suivant récupère et recycle une bannière publicitaire :

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

Pour obtenir l'exemple complet, consultez Exemple de Google Mobile Ads Flutter Plugin.