# Настройка внешнего вида rich media
## Обзор
Настройте внешний вид страниц rich media, чтобы они идеально соответствовали стилю вашего приложения. Измените цвет фона ваших in-app сообщений, добавьте анимацию или настройте экран загрузки под макет приложения. Улучшите пользовательский опыт с помощью in-app сообщений, которые выглядят как нативный компонент приложения.
## Реализация
Сначала получите экземпляр класса **RichMediaStyle**:
#### iOS
```objective-c
PWRichMediaStyle *style = [PWRichMediaManager sharedManager].richMediaStyle;
```
#### Android
```java
RichMediaStyle style = RichMediaManager.getRichMediaStyle();
```
### Цвет фона
Сделайте так, чтобы in-app сообщения выглядели как неотъемлемая часть вашего приложения, **изменив цвет фона** страниц rich media, отображаемых пользователям.
#### iOS
```objective-c
style.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2f];
```
#### Android
```java
style.setBackgroundColor(ContextCompat.getColor(getApplication(), R.color.black));
```
Вот и всё!
### Анимация
Усильте эффект от ваших in-app сообщений, **анимировав появление rich media**.
#### iOS
Установите делегат анимации на один из стандартных классов:
* `PWRichMediaStyleSlideLeftAnimation`,
* `PWRichMediaStyleSlideRightAnimation`,
* `PWRichMediaStyleSlideTopAnimation`,
* `PWRichMediaStyleSlideBottomAnimation`,
* `PWRichMediaStyleCrossFadeAnimation`.
```objective-c
style.animationDelegate = [PWRichMediaStyleCrossFadeAnimation new];
```
#### Android
Установите делегат анимации на один из стандартных классов:
* `RichMediaAnimationSlideTop`,
* `RichMediaAnimationSlideBottom`,
* `RichMediaAnimationSlideRight`,
* `RichMediaAnimationSlideLeft`,
* `RichMediaAnimationCrossFade`.
```java
richMediaStyle.setRichMediaAnimationType(new RichMediaAnimationSlideTop());
```
Чтобы установить **пользовательскую анимацию**, реализуйте метод `PWRichMediaStyleAnimationDelegate` для iOS или `RichMediaAnimation` для Android следующим образом:
#### iOS
1. Установите делегат анимации:
```objective-c
style.animationDelegate = self;
```
2. Реализуйте методы `PWRichMediaStyleAnimationDelegate` (не забудьте вызвать **блок завершения**):
```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
Реализуйте интерфейс `RichMediaAnimation` и установите его для пользовательской анимации открытия и закрытия Rich Media:
```java
richMediaStyle.setRichMediaAnimation(new RichMediaAnimation() {
//Позволяет задать правила и поведение для пользовательской анимации открытия 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);
}
//Позволяет задать правила и поведение для пользовательской анимации закрытия Rich Media
@Override
public void closeAnimation(View contentView, View parentView, Animation.AnimationListener endAnimationListener) {
// !ВАЖНО!
// endAnimationListener должен быть добавлен к вашей пользовательской анимации, чтобы Pushwoosh SDK мог обработать событие окончания анимации
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);
}
});
```
### Пользовательский экран загрузки
Привлеките внимание пользователя с первых секунд с помощью **настроенного экрана загрузки** ваших In-App сообщений.
#### iOS
1. Используйте `loadingViewBlock` следующим образом:
```objective-c
style.loadingViewBlock = ^PWLoadingView *{
return [[[NSBundle mainBundle] loadNibNamed:@"LoadingView" owner:self options:nil] lastObject];
};
```
2. Здесь `LoadingView` должен наследоваться от `PWLoadingView` (определенного в `PWRichMediaStyle.h`):
3. Установите outlets:
#### Android
`RichMediaStyle.LoadingViewCreatorInterface` реализует метод, который возвращает View для использования в качестве экрана загрузки для Rich Media:
```java
richMediaStyle.setLoadingViewCreator(() -> {
View screenView = createYourScreenView();
return screenView;
});
```
### Задержка включения кнопки закрытия
Убедитесь, что In-App сообщение будет показано пользователям, **отключив кнопку закрытия** до тех пор, пока Rich Media не загрузится.
#### iOS
```objective-c
style.closeButtonPresentingDelay = 3;
```
#### Android
```java
// установите значение в миллисекундах
richMediaStyle.setTimeOutBackButtonEnable(3000);
```