Tái chế quảng cáo biểu ngữ trong nguồn cấp dữ liệu có thể cuộn

Trong danh sách dài hoặc danh sách cuộn vô hạn (chẳng hạn như nguồn cấp tin tức hoặc nguồn cấp dữ liệu mạng xã hội), việc tạo một quảng cáo biểu ngữ cho mọi vị trí của mục có thể dẫn đến mức tiêu thụ bộ nhớ cao và độ trễ giao diện người dùng. Để cải thiện hiệu suất, hãy sử dụng tính năng tái chế biểu ngữ để duy trì bộ nhớ đệm có kích thước nhỏ, cố định của các phiên bản BannerAd và sử dụng lại các quảng cáo ngoài màn hình khi người dùng cuộn.

Trang này trình bày cách định cỡ bộ nhớ đệm quảng cáo, kiểm tra xem phiên bản BannerAd có nằm ngoài màn hình hay không và cách chỉ định lại quảng cáo được lưu vào bộ nhớ đệm cho các vị trí trong danh sách.

Hình ảnh sau đây cho thấy cách một quảng cáo biểu ngữ ngoài màn hình quay lại bộ nhớ đệm và được dùng lại ở một vị trí trong danh sách khi người dùng di chuyển:

Điều kiện tiên quyết

Trước khi tiếp tục, hãy sử dụng biểu ngữ thích ứng cùng dòng cho biểu ngữ có thể cuộn.

Theo dõi vị trí được chỉ định trong danh sách

Khi người dùng cuộn, tính năng tái chế biểu ngữ sẽ giữ một số lượng giới hạn các thực thể BannerAd trong bộ nhớ và di chuyển các thực thể này giữa các vị trí trong danh sách.

Để biết quảng cáo nào cần sử dụng lại, hãy theo dõi vị trí trong danh sách mà mỗi quảng cáo chiếm trong bộ nhớ đệm.

Duy trì trạng thái sau đây trong tiện ích:

• Bộ nhớ đệm có kích thước cố định của các thực thể BannerAd. Kích thước mà bạn đặt cho bộ nhớ đệm là số lượng quảng cáo tối đa được lưu trữ trong bộ nhớ cùng một lúc.
• Khoảng thời gian quảng cáo xác định tần suất quảng cáo xuất hiện trong danh sách.
• Một lớp Map vị trí liên kết từng thực thể BannerAd với vị trí trong danh sách mà thực thể đó chiếm. Khi bạn tái chế một quảng cáo, hãy cập nhật mục nhập trong lớp Map này để trỏ đến vị trí mới nhất.
• Một lớp kích thước Map lưu trữ đối tượng AdSize được nền tảng phân giải cho từng quảng cáo đã tải. Sau khi quảng cáo tải, chiều cao của biểu ngữ thích ứng cùng dòng sẽ được xác định.

Ví dụ sau đây theo dõi các vị trí được chỉ định trong danh sách cho từng quảng cáo trong bộ nhớ đệm:

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

Chọn kích thước bộ nhớ đệm

Tạo bộ nhớ đệm lớn hơn số lượng quảng cáo tối đa có thể xuất hiện trên màn hình cùng lúc. Nếu bộ nhớ đệm nhỏ hơn kích thước đó, thì quảng cáo được chọn để tái chế thường vẫn hiển thị và ứng dụng của bạn sẽ phân bổ thêm quảng cáo thay vì sử dụng lại quảng cáo.

Để chọn kích thước, hãy làm như sau:

1. Ước tính số lượng quảng cáo vừa với màn hình cùng một lúc bằng cách chia chiều cao khung hiển thị cho chiều cao của một khoảng quảng cáo.
2. Thêm khoảng trống cho những quảng cáo vẫn tách rời trong khi cuộn nhanh.
3. Nếu bạn thấy những quảng cáo được chọn để tái chế vẫn còn trên màn hình, hãy tăng kích thước bộ nhớ đệm.

Ví dụ trên trang này hiển thị một quảng cáo sau mỗi 6 hàng và sử dụng bộ nhớ đệm gồm 8 hàng. Ví dụ này chừa chỗ cho một vài quảng cáo xuất hiện trên màn hình cùng một lúc.

Kiểm tra xem quảng cáo có xuất hiện trên màn hình hay không

Tất cả các lớp Google Mobile Ads Flutter Plugin hiển thị các khung hiển thị nền tảng đều triển khai lớp AdWithView và cung cấp một phương thức truy xuất isMounted. Trước khi chỉ định lại một quảng cáo được lưu vào bộ nhớ đệm cho một vị trí trong danh sách, hãy kiểm tra phương thức getter isMounted để xác nhận rằng quảng cáo đã cuộn ra khỏi màn hình và có thể sử dụng lại một cách an toàn.

Truy xuất và tái chế quảng cáo biểu ngữ

Khi danh sách yêu cầu một biểu ngữ cho một vị trí nhất định, hãy làm như sau:

1. Sử dụng lại quảng cáo đã được chỉ định cho vị trí đó (nếu có).
2. Nếu bộ nhớ đệm chưa đầy, hãy yêu cầu một quảng cáo.
3. Nếu bộ nhớ đệm đầy, hãy chọn một quảng cáo được lưu vào bộ nhớ đệm và xác minh rằng phương thức getter isMounted là giá trị false trước khi chỉ định lại quảng cáo.
4. Gọi phương thức dispose() trên mọi quảng cáo trong bộ nhớ đệm khi tiện ích bị xoá khỏi cây tiện ích.

Ví dụ sau đây truy xuất và tái chế một quảng cáo biểu ngữ:

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

Để xem ví dụ đầy đủ, hãy xem ví dụ Google Mobile Ads Flutter Plugin.