Giao diện người dùng tuỳ chỉnh với SDK IMA cho Android

Hướng dẫn này cho biết cách triển khai giao diện người dùng tuỳ chỉnh của riêng bạn bằng cách sử dụng SDK IMA cho Android. Để làm như vậy, bạn cần tắt giao diện người dùng mặc định, thiết lập giao diện người dùng tuỳ chỉnh mới, sau đó điền thông tin quảng cáo lấy được từ SDK vào giao diện người dùng mới.

Tắt giao diện người dùng quảng cáo

Để hiển thị giao diện người dùng tuỳ chỉnh, trước tiên, bạn phải tắt giao diện người dùng quảng cáo mặc định. Để thực hiện việc này, hãy gọi AdsRenderingSettings.setDisableUi() rồi truyền AdsRenderingSettings đến AdsManager.init():

MyActivity.java

ImaSdkFactory mSdkFactory = ImaSdkFactory.getInstance();
AdsManager mAdsManager;

@Override
public void onAdsManagerLoaded(AdsManagerLoadedEvent adsManagerLoadedEvent) {
    mAdsManager = adsManagerLoadedEvent.getAdsManager();

    ...
    AdsRenderingSettings settings = mSdkFactory.createAdsRenderingSettings();
    settings.setDisableUi(true);
    mAdsManager.init(settings);
}

Sau đó, mỗi khi bạn cần quyết định có hiển thị giao diện người dùng tuỳ chỉnh hay không, hãy kiểm tra xem có quảng cáo hay không và gọi Ad.isUiDisabled() để kiểm tra xem giao diện người dùng quảng cáo mặc định đã bị tắt hay chưa.

Hiển thị giao diện người dùng tuỳ chỉnh

Sau khi tắt giao diện người dùng mặc định, bước tiếp theo là hiển thị giao diện người dùng quảng cáo tuỳ chỉnh. Trong ví dụ này, hãy thêm một RelativeLayout mới vào bố cục trình phát video hiện có, sau đó hiển thị bố cục này khi quảng cáo đang phát và ẩn bố cục này khi không có quảng cáo nào đang phát.

Thêm nội dung sau vào tệp bố cục mảnh:

fragment_video.xml

<com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer
    android:id="@+id/sampleVideoPlayer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<RelativeLayout
        android:id="@+id/customUi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible">
                <TextView
                    android:id="@+id/adCounter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_green_light"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentLeft="true"
                    android:text="@string/ad_counter" />
                <Button
                  android:id="@+id/learnMoreButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentTop="true"
                  android:text="@string/learn_more"
                  android:layout_alignParentRight="true" />
                <Button
                  android:id="@+id/skipButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:text="@string/skip_ad"
                  android:enabled="false"
                  android:layout_alignParentRight="true" />
</RelativeLayout>

Sau đó, thêm mã để sử dụng giao diện người dùng tuỳ chỉnh vào Activity. Để cập nhật giao diện người dùng, hãy tạo một bộ hẹn giờ Handler và một Runnable chạy trên bộ hẹn giờ đó.

MyActivity.java

// The view containing the custom UI.
private View mCustomUi;
// The timer handler.
private Handler mTimerHandler = new Handler();

// The Runnable that runs your custom UI update loop.
private Runnable mTimerRunnable = new Runnable() {
    @Override
    public void run() {
        updateCustomUi();
        mTimerHandler.postDelayed(this, 500);
    }
};

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
    mCustomUi = rootView.findViewById(R.id.customUi);
    mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);
}

@Override
public void onAdEvent(AdEvent adEvent) {
    ...
    switch (adEvent.getType()) {
        ...
            case STARTED:
            // Start your update loop.
            mTimerHandler.post(mTimerRunnable);
            Break;
                ...
        case COMPLETED:
            mCustomUi.setVisibility(View.INVISIBLE);
            mTimerHandler.removeCallbacks(mTimerRunnable);
            ...
    }
}

@Override
public void onPause() {
...
    // Stop ad UI update loop.
    mTimerHandler.removeCallbacks(mTimerRunnable);
}

@Override
Public void onResume() {
...
    // Start ad UI update loop.
    mTimerHandler.post(mTimerRunnable);
}

Bộ đếm quảng cáo và nút bỏ qua

Bây giờ, hãy xác định hàm updateCustomUi() để điền thông tin quảng cáo vào giao diện người dùng. Thông tin chi tiết sẽ khác nhau tuỳ theo định dạng quảng cáo, nhưng bạn thường thêm bộ đếm quảng cáo và nút bỏ qua hoặc bộ đếm lượt bỏ qua nếu quảng cáo có thể bỏ qua. Thêm nội dung sau:

MyActivity.java

private void updateCustomUi() {
    // Runs from the update loop to update the custom UI.
    Ad ad = mAdsManager.getCurrentAd();
    if (ad != null && ad.isUiDisabled()) {
        // Show the UI.
        Log.i(LOGTAG, "UI disabled, show custom UI!");
        AdPodInfo podInfo = ad.getAdPodInfo();
        VideoProgressUpdate update = mAdsManager.getAdProgress();
        SimpleDateFormat format = new SimpleDateFormat("mm:ss", Locale.US);

        // Handle ad counter.
        String adProgress = format.format(
                (update.getDuration() - update.getCurrentTime()) * 1000);
        String adUiString = String.format(
                Locale.US, "Ad %d of %d (%s)", podInfo.getAdPosition(),
                podInfo.getTotalAds(), adProgress);
        mAdCounterUi.setText(adUiString);

        // Handle skippable ads.
        if (ad.isSkippable()) {
            if (update.getCurrentTime() >= ad.getSkipTimeOffset()) {
                // Allow skipping.
                mSkipButton.setText(getString(R.string.skip_ad));
                mSkipButton.setEnabled(true);
            } else {
                String skipString = String.format(
                        Locale.US, "You can skip this ad in %d",
                        (int) (ad.getSkipTimeOffset() -
                                update.getCurrentTime()));
                mSkipButton.setText(skipString);
                mSkipButton.setEnabled(false);
            }
            mSkipButton.setVisibility(View.VISIBLE);
        } else {
            mSkipButton.setVisibility(View.INVISIBLE);
        }
        mCustomUi.setVisibility(View.VISIBLE);
        mCustomUi.bringToFront();
    } else {
        // Hide the UI.
        mCustomUi.setVisibility(View.INVISIBLE);
        mTimerHandler.removeCallbacks(mTimerRunnable);
    }
}

Trong mã trước, sau khi kiểm tra xem có quảng cáo hay không và gọi Ad.isUiDisabled() để kiểm tra xem giao diện người dùng quảng cáo mặc định đã bị tắt hay chưa, hãy gọi Ad.getAdPodInfo() và AdsManager.getAdProgress() để tìm vị trí của quảng cáo trong nhóm và tiến trình của quảng cáo. Đối với quảng cáo có thể bỏ qua, hãy hiển thị bộ đếm thời gian bỏ qua nếu bạn chưa thể bỏ qua quảng cáo; nếu không, hãy hiển thị nút bỏ qua. Dưới đây là thông tin tóm tắt về thông tin quảng cáo phổ biến và các lệnh gọi liên quan:

Thông tin Gọi
Quảng cáo hiện tại trong nhóm Ad.getAdPodInfo().getAdPosition()
Tổng số quảng cáo trong nhóm Ad.getPodInfo().getTotalAds()
Quảng cáo có thể bỏ qua Ad.isSkippable()
Số giây cho đến khi có thể bỏ qua quảng cáo Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Số giây còn lại trong quảng cáo (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Khi người dùng nhấp vào nút Bỏ qua quảng cáo, quảng cáo sẽ bị bỏ qua. Vì vậy, hãy thiết lập nút này ngoài nút Tìm hiểu thêm:

MyActivity.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
mCustomUi = rootView.findViewById(R.id.customUi);
mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);

// Set up the 'learn more' button handler for the custom UI.
mLearnMoreButton = (Button) rootView.findViewById(R.id.learnMoreButton);
mLearnMoreButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Only works if the UI has been disabled.
        mAdsManager.clicked();
    }
});

// Set up the skip button handler for the custom UI.
mSkipButton = (Button) rootView.findViewById(R.id.skipButton);
mSkipButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        mAdsManager.skip();
    }
});

Bạn phải tắt giao diện người dùng để AdsManager.clicked() hoạt động.

Khắc phục sự cố

Bạn có bật thẻ mẫu để tắt giao diện người dùng quảng cáo không?
Bạn có thể sao chép URL của thẻ mẫu này rồi dán vào quá trình triển khai IMA.
Tôi không thể tắt giao diện người dùng mặc định.
Kiểm tra để đảm bảo rằng bạn gọi AdsRenderingSettings.setDisableUi() và truyền hàm này đến AdsManager. Kiểm tra để đảm bảo Ad.isUiDisabled() trả về true. Ngoài ra, bạn phải bật mạng của mình trong Ad Manager để tắt giao diện người dùng quảng cáo. Nếu bạn được bật, VAST sẽ chứa một Extension có dạng như sau: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
Nếu bạn vẫn gặp sự cố, hãy liên hệ với người quản lý tài khoản của bạn để xác nhận rằng bạn đã được bật tính năng này. Một số loại quảng cáo yêu cầu giao diện người dùng cụ thể; những quảng cáo này trả về giá trị <UiHideable> là 0. Nếu bạn gặp phải vấn đề này, nhóm quản lý phân phát sẽ cần thực hiện các thay đổi để xác minh rằng những loại quảng cáo này không phân phát.