本指南說明如何使用 Android 版 IMA SDK 導入自訂 UI。如要這麼做，您必須停用預設 UI、設定新的自訂 UI，然後使用從 SDK 取得的廣告資訊填入新 UI。
停用廣告 UI
如要顯示自訂使用者介面，您必須先停用預設廣告 UI。如要這麼做，請呼叫 AdsRenderingSettings.setDisableUi()，然後將 AdsRenderingSettings 傳遞至 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); }
之後，每當您需要決定是否要顯示自訂 UI 時，請檢查是否有廣告，並呼叫 Ad.isUiDisabled()，確認已停用預設廣告 UI。
顯示自訂 UI
停用預設 UI 後，下一步就是顯示自訂廣告 UI。在本例中，請在現有的影片播放器版面配置中新增 RelativeLayout，然後在播放廣告時顯示此版面配置，在沒有播放廣告時則隱藏。
在片段版面配置檔案中加入下列內容：
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>
接著，將使用自訂 UI 的程式碼新增至 Activity。如要更新 UI，請建立計時器 Handler 和在其上執行的 Runnable。
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); }
廣告計數器和略過按鈕
現在請定義 updateCustomUi() 函式，以便在 UI 中填入廣告資訊。具體細節會因廣告格式而異，但通常會加入廣告計數器，以及可略過按鈕或略過計數器 (如果廣告可略過的話)。新增下列內容：
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); } }
在先前的程式碼中，在檢查是否有廣告並呼叫 Ad.isUiDisabled() 以確認已停用預設廣告 UI 後，請呼叫 Ad.getAdPodInfo() 和 AdsManager.getAdProgress()，找出廣告在廣告群組中的位置和廣告進度。針對可略過的廣告，如果您尚未略過廣告，請顯示略過計數器；否則請顯示略過按鈕。以下是常見廣告資訊和相關呼叫的摘要：
| 資訊 | 撥打電話 |
|---|---|
| 廣告連播中的目前廣告 | Ad.getAdPodInfo().getAdPosition() |
| 廣告連播中的廣告總數 | Ad.getPodInfo().getTotalAds() |
| 廣告是否可略過 | Ad.isSkippable() |
| 可略過廣告的秒數 | Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime() |
| 廣告剩餘秒數 | (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000 |
按一下「Skip Ad」按鈕後，系統應會略過廣告，因此請除了設定「Learn More」按鈕外，也設定「Skip Ad」按鈕：
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(); } });
必須停用 UI，AdsManager.clicked() 才能運作。
疑難排解
- 您是否有可用來停用廣告 UI 的範例代碼？
- 您可以複製這個範例代碼的網址，並貼到 IMA 實作中。
- 我無法停用預設 UI。
- 請確認您呼叫
AdsRenderingSettings.setDisableUi()並將其傳遞至AdsManager。確認Ad.isUiDisabled()是否會傳回true。此外，您必須在 Ad Manager 中啟用聯播網，才能停用廣告 UI。如果已啟用，您的 VAST 會包含Extension，如下所示：<Extension type="uiSettings"> <UiHideable>1</UiHideable> </Extension>
<UiHideable>值為 0。如果遇到這種情況，您的放送團隊必須進行變更，確認系統不會放送這些廣告類型。