Anpassen des Erscheinungsbilds von Rich Media

Übersicht

Passen Sie das Erscheinungsbild von Rich-Media-Seiten an, damit sie perfekt zum Stil Ihrer App passen. Ändern Sie die Hintergrundfarbe Ihrer In-App-Nachrichten, fügen Sie eine Animation hinzu oder passen Sie die Ladeansicht an das App-Layout an. Verbessern Sie die Benutzererfahrung mit In-Apps, die wie eine native Komponente der App aussehen.

Implementierung

Holen Sie sich zunächst eine Instanz der Klasse RichMediaStyle:

iOS

PWRichMediaStyle *style = [PWRichMediaManager sharedManager].richMediaStyle;

Android

RichMediaStyle style = RichMediaManager.getRichMediaStyle();

Hintergrundfarbe

Lassen Sie In-App-Nachrichten wie einen festen Bestandteil Ihrer App aussehen, indem Sie die Hintergrundfarbe der Rich-Media-Seiten ändern, die den Benutzern der App angezeigt werden.

iOS

style.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2f];

Android

style.setBackgroundColor(ContextCompat.getColor(getApplication(), R.color.black));

Das ist alles!

Animation

Verstärken Sie die Wirkung Ihrer In-App-Nachrichten, indem Sie das Erscheinen von Rich Media animieren.

iOS

Setzen Sie den Animations-Delegaten auf eine der Standardklassen:

• PWRichMediaStyleSlideLeftAnimation,
• PWRichMediaStyleSlideRightAnimation,
• PWRichMediaStyleSlideTopAnimation,
• PWRichMediaStyleSlideBottomAnimation,
• PWRichMediaStyleCrossFadeAnimation.

style.animationDelegate = [PWRichMediaStyleCrossFadeAnimation new];

Hinweis

Standardmäßig ist der Wert für den Animationstyp für iOS PWRichMediaStyleAnimationTypeSlideBottom.

Android

Setzen Sie den Animations-Delegaten auf eine der Standardklassen:

• RichMediaAnimationSlideTop,
• RichMediaAnimationSlideBottom,
• RichMediaAnimationSlideRight,
• RichMediaAnimationSlideLeft,
• RichMediaAnimationCrossFade.

richMediaStyle.setRichMediaAnimationType(new RichMediaAnimationSlideTop());

Hinweis

Standardmäßig ist der Wert für den Animationstyp für Android RichMediaAnimationSlideBottom.

Um eine benutzerdefinierte Animation festzulegen, implementieren Sie die Methode PWRichMediaStyleAnimationDelegate für iOS oder RichMediaAnimation für Android wie folgt:

iOS

1. Setzen Sie den Animations-Delegaten:

style.animationDelegate = self;

2. Implementieren Sie die PWRichMediaStyleAnimationDelegate-Methoden (vergessen Sie nicht, einen Abschlussblock aufzurufen):

- (void)runPresentingAnimationWithContentView:(UIView *)contentView parentView:(UIView *)parentView completion:(dispatch_block_t)completion {
    contentView.transform = CGAffineTransformMakeTranslation(0, parentView.bounds.size.height);

    [UIView animateWithDuration:0.6
                          delay:0
         usingSpringWithDamping:0.4
          initialSpringVelocity:0
                        options:0
                     animations:^{
                         contentView.transform = CGAffineTransformIdentity;
                     } completion:^(BOOL finished) {
                         completion();
                     }];
}

- (void)runDismissingAnimationWithContentView:(UIView *)contentView parentView:(UIView *)parentView completion:(dispatch_block_t)completion {
    [UIView animateWithDuration:0.3
                     animations:^{
                         contentView.alpha = 0.0f;
                         contentView.transform = CGAffineTransformMakeScale(2, 2);
                     } completion:^(BOOL finished) {
                         completion();
                     }];
}

Android

Implementieren Sie die RichMediaAnimation-Schnittstelle und legen Sie sie für die benutzerdefinierte Schließ- und Öffnungsanimation von Rich Media fest:

richMediaStyle.setRichMediaAnimation(new RichMediaAnimation() {
    //Ermöglicht das Festlegen von Regeln und Verhalten für die benutzerdefinierte Öffnungsanimation von Rich Media
    @Override
    public void openAnimation(View contentView, View parentView) {
        AnimationSet fadeInAnimation = new AnimationSet(true);
        fadeInAnimation.addAnimation(new TranslateAnimation(0.15f * parentView.getWidth(), 0, parentView.getHeight() / 2.5f, 0));
        fadeInAnimation.addAnimation(new AlphaAnimation(0, 1));
        fadeInAnimation.addAnimation(new ScaleAnimation(0.7f, 1.0f, 0.7f, 1.0f));
        fadeInAnimation.setDuration(2000);
        fadeInAnimation.setInterpolator(new DecelerateInterpolator(1f));

        contentView.startAnimation(fadeInAnimation);
    }

    //Ermöglicht das Festlegen von Regeln und Verhalten für die benutzerdefinierte Schließanimation von Rich Media
    @Override
    public void closeAnimation(View contentView, View parentView, Animation.AnimationListener endAnimationListener) {
        // !WICHTIG!
        // endAnimationListener muss zu Ihrer benutzerdefinierten Animation hinzugefügt werden, damit das Pushwoosh SDK das Animationsende-Ereignis verarbeiten kann
        AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
        alphaAnimation.setDuration(2000);
        alphaAnimation.setAnimationListener(endAnimationListener);
        alphaAnimation.setFillEnabled(true);
        alphaAnimation.setFillAfter(true);

        contentView.animate().translationY(parentView.getHeight() / 5).setDuration(250).start();

        parentView.startAnimation(alphaAnimation);
    }
});

Benutzerdefinierte Ladeansicht

Fesseln Sie die Aufmerksamkeit der Benutzer von den ersten Sekunden an mit einer angepassten Ladeansicht Ihrer In-App-Nachrichten.

iOS

1. Verwenden Sie loadingViewBlock wie folgt:

style.loadingViewBlock = ^PWLoadingView *{
    return [[[NSBundle mainBundle] loadNibNamed:@"LoadingView" owner:self options:nil] lastObject];
};

2. „LoadingView“ muss hier von PWLoadingView erben (definiert in PWRichMediaStyle.h):

3. Setzen Sie die Outlets:

Android

RichMediaStyle.LoadingViewCreatorInterface implementiert eine Methode, die eine Ansicht zurückgibt, die als Ladebildschirm für Rich Media verwendet werden soll:

richMediaStyle.setLoadingViewCreator(() -> {
  View screenView = createYourScreenView();
  return screenView;
});

Verzögerung für die Aktivierung des Schließen-Buttons

Stellen Sie sicher, dass die In-App-Nachricht den Benutzern angezeigt wird, indem Sie den Schließen-Button deaktivieren, bis die Rich Media geladen ist.

iOS

style.closeButtonPresentingDelay = 3;

Android

// Wert in Millisekunden festlegen
richMediaStyle.setTimeOutBackButtonEnable(3000);