# 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

```objective-c
PWRichMediaStyle *style = [PWRichMediaManager sharedManager].richMediaStyle;
```

#### Android

```java
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.

<img src="/content-customizing-rich-media-appearance-1.webp" alt="Mensaje in-app de rich media con color de fondo personalizado que coincide con el diseño de la aplicación"/>

#### iOS

```objective-c
style.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2f];
```

#### Android

```java
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**.

<video src="/content-customizing-rich-media-appearance-2.webm" title="" autoplay loop muted playsinline />

#### iOS

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

* `PWRichMediaStyleSlideLeftAnimation`,
* `PWRichMediaStyleSlideRightAnimation`,
* `PWRichMediaStyleSlideTopAnimation`,
* `PWRichMediaStyleSlideBottomAnimation`,
* `PWRichMediaStyleCrossFadeAnimation`.

```objective-c
style.animationDelegate = [PWRichMediaStyleCrossFadeAnimation new];
```

<Aside type="note">
Por defecto, el valor del tipo de animación para iOS es `PWRichMediaStyleAnimationTypeSlideBottom`.
</Aside>

#### Android

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

* `RichMediaAnimationSlideTop`,
* `RichMediaAnimationSlideBottom`,
* `RichMediaAnimationSlideRight`,
* `RichMediaAnimationSlideLeft`,
* `RichMediaAnimationCrossFade`.

```java
richMediaStyle.setRichMediaAnimationType(new RichMediaAnimationSlideTop());
```

<Aside type="note">
Por defecto, el valor del tipo de animación para Android es `RichMediaAnimationSlideBottom`.
</Aside>

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:

```objective-c
style.animationDelegate = self;
```

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

```objective-c
- (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:

```java
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.

<video src="/content-customizing-rich-media-appearance-3.webm" title="" autoplay loop muted playsinline />

#### iOS

1. Use `loadingViewBlock` de la siguiente manera:

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

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

<img src="/content-customizing-rich-media-appearance-4.webp" alt="Interfaz de Xcode que muestra la clase LoadingView heredando de PWLoadingView en la jerarquía de clases"/>

3. Establezca los outlets:

<img src="/content-customizing-rich-media-appearance-5.webp" alt="Interfaz de Xcode que muestra las conexiones de los outlets para las propiedades personalizadas de LoadingView"/>

#### Android

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

```java
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.

<video src="/content-customizing-rich-media-appearance-6.webm" title="" autoplay loop muted playsinline />

#### iOS

```objective-c
style.closeButtonPresentingDelay = 3;
```

#### Android

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