Personnalisation de l'apparence des Rich Media

Aperçu

Personnalisez l’apparence des pages Rich Media pour qu’elles s’intègrent parfaitement au style de votre application. Modifiez la couleur d’arrière-plan de vos messages in-app, ajoutez une animation ou ajustez la vue de chargement à la mise en page de l’application. Améliorez l’expérience utilisateur avec des messages in-app qui ressemblent à un composant natif de l’application.

Implémentation

Tout d’abord, obtenez une instance de la classe RichMediaStyle :

iOS

PWRichMediaStyle *style = [PWRichMediaManager sharedManager].richMediaStyle;

Android

RichMediaStyle style = RichMediaManager.getRichMediaStyle();

Couleur d’arrière-plan

Faites en sorte que les messages in-app apparaissent comme une partie intégrante de votre application en changeant la couleur d’arrière-plan des pages Rich Media affichées aux utilisateurs de l’application.

iOS

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

Android

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

C’est tout !

Animation

Améliorez l’effet de vos messages in-app en animant l’apparition des Rich Media.

iOS

Définissez le délégué d’animation sur l’une des classes par défaut :

PWRichMediaStyleSlideLeftAnimation,
PWRichMediaStyleSlideRightAnimation,
PWRichMediaStyleSlideTopAnimation,
PWRichMediaStyleSlideBottomAnimation,
PWRichMediaStyleCrossFadeAnimation.

style.animationDelegate = [PWRichMediaStyleCrossFadeAnimation new];

Android

Définissez le délégué d’animation sur l’une des classes par défaut :

RichMediaAnimationSlideTop,
RichMediaAnimationSlideBottom,
RichMediaAnimationSlideRight,
RichMediaAnimationSlideLeft,
RichMediaAnimationCrossFade.

richMediaStyle.setRichMediaAnimationType(new RichMediaAnimationSlideTop());

Pour définir une animation personnalisée, implémentez la méthode PWRichMediaStyleAnimationDelegate pour iOS ou RichMediaAnimation pour Android comme suit :

iOS

1. Définissez le délégué d’animation :

style.animationDelegate = self;

2. Implémentez les méthodes PWRichMediaStyleAnimationDelegate (n’oubliez pas d’appeler un bloc de complétion) :

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

Implémentez l’interface RichMediaAnimation et configurez-la pour l’animation personnalisée de fermeture et d’ouverture des Rich Media :

richMediaStyle.setRichMediaAnimation(new RichMediaAnimation() {
    // Permet de définir les règles et le comportement de l'animation d'ouverture personnalisée des 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);
    }

    // Permet de définir les règles et le comportement de l'animation de fermeture personnalisée des Rich Media
    @Override
    public void closeAnimation(View contentView, View parentView, Animation.AnimationListener endAnimationListener) {
        // !IMPORTANT!
        // endAnimationListener doit être ajouté à votre animation personnalisée pour permettre au SDK Pushwoosh de gérer l'événement de fin d'animation
        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);
    }
});

Vue de chargement personnalisée

Captez l’attention de l’utilisateur dès les premières secondes avec une vue de chargement personnalisée pour vos messages In-App.

iOS

1) Utilisez loadingViewBlock comme suit :

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

2) “LoadingView” ici doit hériter de PWLoadingView (défini dans PWRichMediaStyle.h) :

3) Définissez les outlets :

Android

RichMediaStyle.LoadingViewCreatorInterface implémente une méthode qui renvoie une View à utiliser comme écran de chargement pour les Rich Media :

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

Délai d’activation du bouton de fermeture

Assurez-vous que le message In-App est bien vu par les utilisateurs en désactivant le bouton de fermeture jusqu’à ce que le Rich Media soit chargé.

iOS

style.closeButtonPresentingDelay = 3;

Android

// définissez une valeur en millisecondes
richMediaStyle.setTimeOutBackButtonEnable(3000);