Personalizar la apariencia de rich media

Descripción general

Personalice la apariencia de las páginas de rich media para que se adapten perfectamente al estilo de su aplicación. Cambie el color de fondo de sus mensajes in-app, agregue alguna animación o ajuste la vista de carga al diseño de la aplicación. Mejore la experiencia del usuario con mensajes in-app que parecen un componente nativo de la aplicación.

Implementación

Primero, obtenga una instancia de la clase RichMediaStyle:

iOS

PWRichMediaStyle *style = [PWRichMediaManager sharedManager].richMediaStyle;

Android

RichMediaStyle style = RichMediaManager.getRichMediaStyle();

Color de fondo

Haga que los mensajes in-app parezcan una parte inherente de su aplicación cambiando el color de fondo de las páginas de rich media que se muestran a los usuarios de la aplicación.

iOS

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

Android

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

¡Eso es todo!

Animación

Mejore el efecto de sus mensajes in-app animando la apariencia de rich media.

iOS

Establezca el delegado de animación en una de las clases predeterminadas:

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

style.animationDelegate = [PWRichMediaStyleCrossFadeAnimation new];

Nota

Por defecto, el valor del tipo de animación para iOS es PWRichMediaStyleAnimationTypeSlideBottom.

Android

Establezca el delegado de animación en una de las clases predeterminadas:

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

richMediaStyle.setRichMediaAnimationType(new RichMediaAnimationSlideTop());

Nota

Por defecto, el valor del tipo de animación para Android es RichMediaAnimationSlideBottom.

Para establecer una animación personalizada, implemente el método PWRichMediaStyleAnimationDelegate para iOS o RichMediaAnimation para Android de la siguiente manera:

iOS

1. Establezca el delegado de animación:

style.animationDelegate = self;

2. Implemente los métodos PWRichMediaStyleAnimationDelegate (no olvide llamar a un bloque de finalización):

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

Implemente la interfaz RichMediaAnimation y establézcala para la animación personalizada de cierre y apertura de Rich Media:

richMediaStyle.setRichMediaAnimation(new RichMediaAnimation() {
    // Permite establecer reglas y comportamiento para la animación de apertura personalizada de 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);
    }

    // Permite establecer reglas y comportamiento para la animación de cierre personalizada de Rich Media
    @Override
    public void closeAnimation(View contentView, View parentView, Animation.AnimationListener endAnimationListener) {
        // ¡IMPORTANTE!
        // endAnimationListener debe agregarse a su animación personalizada para permitir que el SDK de Pushwoosh maneje el evento de finalización de la animación
        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);
    }
});

Vista de carga personalizada

Capte la atención del usuario desde los primeros segundos con una vista de carga personalizada de sus mensajes In-App.

iOS

1. Use loadingViewBlock de la siguiente manera:

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

2. “LoadingView” aquí debe heredar de PWLoadingView (definido en PWRichMediaStyle.h):

3. Establezca los outlets:

Android

RichMediaStyle.LoadingViewCreatorInterface implementa un método que devuelve una Vista para ser utilizada como pantalla de carga para Rich Media:

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

Retraso en la habilitación del botón de cierre

Asegúrese de que el mensaje In-App se muestre a los usuarios deshabilitando el botón de cierre hasta que se cargue el Rich Media.

iOS

style.closeButtonPresentingDelay = 3;

Android

// establezca un valor en milisegundos
richMediaStyle.setTimeOutBackButtonEnable(3000);