Benutzerdefinierte Benutzeroberfläche mit dem IMA SDK für Android

In dieser Anleitung wird gezeigt, wie du mit dem IMA SDK für Android eine benutzerdefinierte Benutzeroberfläche implementierst. Dazu müssen Sie die Standard-UI deaktivieren, eine neue benutzerdefinierte Benutzeroberfläche einrichten und die neue Benutzeroberfläche dann mit Anzeigeninformationen aus dem SDK füllen.

Anzeigen-Benutzeroberfläche deaktivieren

Wenn Sie eine benutzerdefinierte Benutzeroberfläche anzeigen lassen möchten, müssen Sie zuerst die Standard-Anzeigenoberfläche deaktivieren. Rufen Sie dazu AdsRenderingSettings.setDisableUi() auf und übergeben Sie dann AdsRenderingSettings an 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);
}

Wenn du später entscheiden möchtest, ob deine benutzerdefinierte Benutzeroberfläche angezeigt werden soll, prüfe, ob eine Anzeige vorhanden ist, und rufe Ad.isUiDisabled() auf, um zu sehen, ob die standardmäßige Anzeigen-Benutzeroberfläche deaktiviert wurde.

Benutzerdefinierte Benutzeroberfläche anzeigen

Nachdem die Standard-Benutzeroberfläche deaktiviert wurde, ist der nächste Schritt die Anzeige einer benutzerdefinierten Anzeigenoberfläche. Fügen Sie in diesem Beispiel Ihrem vorhandenen Videoplayer-Layout ein neues RelativeLayout hinzu und zeigen Sie dieses Layout dann an, wenn eine Anzeige wiedergegeben wird, und blenden Sie es aus, wenn keine Anzeigen wiedergegeben werden.

Fügen Sie der Fragment-Layoutdatei Folgendes hinzu:

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>

Fügen Sie dann den Code zum Verwenden der benutzerdefinierten Benutzeroberfläche zu Activity hinzu. Erstellen Sie zum Aktualisieren der Benutzeroberfläche einen Timer Handler und einen Runnable, der darauf ausgeführt wird.

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);
}

Anzeigenzähler und Schaltfläche zum Überspringen

Definieren Sie nun die Funktion updateCustomUi(), um die Benutzeroberfläche mit Anzeigeninformationen zu füllen. Die Details variieren je nach Anzeigenformat. Normalerweise werden der Anzeigenzähler und eine Schaltfläche oder ein Zähler zum Überspringen angezeigt, wenn die Anzeige übersprungen werden kann. Fügen Sie Folgendes hinzu:

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);
    }
}

Im vorherigen Code wird nach der Prüfung, ob eine Anzeige vorhanden ist, Ad.isUiDisabled() aufgerufen, um zu prüfen, ob die standardmäßige Anzeigen-Benutzeroberfläche deaktiviert wurde. Anschließend werden Ad.getAdPodInfo() und AdsManager.getAdProgress() aufgerufen, um die Position der Anzeige im Pod und den Fortschritt der Anzeige zu ermitteln. Bei überspringbaren Anzeigen sollte ein Countdown angezeigt werden, wenn die Anzeige noch nicht übersprungen werden kann. Andernfalls sollte eine Schaltfläche zum Überspringen zu sehen sein. Im Folgenden finden Sie eine Zusammenfassung häufiger Anzeigeninformationen und zugehöriger Aufrufe:

Informationen Anruf
Aktuelle Anzeige im Pod Ad.getAdPodInfo().getAdPosition()
Anzeigen im Pod insgesamt Ad.getPodInfo().getTotalAds()
Ist die Anzeige überspringbar? Ad.isSkippable()
Sekunden, bis die Anzeige übersprungen werden kann Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Verbleibende Sekunden in der Anzeige (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Wenn Nutzer auf die Schaltfläche Anzeige überspringen klicken, sollte die Anzeige übersprungen werden. Richte diese Schaltfläche daher zusätzlich zur Schaltfläche Weitere Informationen ein:

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();
    }
});

Die Benutzeroberfläche muss deaktiviert sein, damit AdsManager.clicked() funktioniert.

Fehlerbehebung

Haben Sie ein Beispiel-Tag, mit dem die Anzeigen-UI deaktiviert werden kann?
Du kannst die URL dieses Beispiel-Tags kopieren und in deine IMA-Implementierung einfügen.
Ich kann die Standard-UI nicht deaktivieren.
Prüfen Sie, ob Sie AdsRenderingSettings.setDisableUi() aufrufen und an AdsManager übergeben. Prüfen Sie, ob Ad.isUiDisabled() true zurückgibt. Außerdem muss Ihr Netzwerk in Ad Manager aktiviert sein, damit Sie die Anzeigen-Benutzeroberfläche deaktivieren können. Wenn die Funktion aktiviert ist, enthält Ihr VAST-Dokument eine Extension, die so aussieht: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Falls weiterhin Probleme auftreten, fragen Sie Ihren Account Manager, ob Sie die Funktion nutzen können. Für einige Anzeigentypen ist eine bestimmte Benutzeroberfläche erforderlich. Diese Anzeigen werden mit dem Wert „0“ für <UiHideable> zurückgegeben. In diesem Fall muss Ihr Trafficking-Team Änderungen vornehmen, damit diese Anzeigentypen nicht ausgeliefert werden.