Настройка внешнего вида rich media

Обзор

Настройте внешний вид страниц rich media, чтобы они идеально соответствовали стилю вашего приложения. Измените цвет фона ваших in-app messages, добавьте анимацию или настройте вид экрана загрузки в соответствии с макетом вашего приложения. Улучшите пользовательский опыт с помощью in-app-сообщений, которые выглядят как нативный компонент приложения.

Реализация

Сначала получите экземпляр класса RichMediaStyle:

iOS

PWRichMediaStyle *style = [PWRichMediaManager sharedManager].richMediaStyle;

Android

RichMediaStyle style = RichMediaManager.getRichMediaStyle();

Цвет фона

Сделайте in-app messages неотъемлемой частью вашего приложения, изменив цвет фона страниц rich media, отображаемых пользователям приложения.

iOS

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

Android

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

Вот и всё!

Анимация

Усильте эффект от ваших in-app messages, анимировав появление rich media.

iOS

Установите делегата анимации на один из стандартных классов:

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

style.animationDelegate = [PWRichMediaStyleCrossFadeAnimation new];

Note

По умолчанию для iOS установлено значение типа анимации PWRichMediaStyleAnimationTypeSlideBottom.

Android

Установите делегата анимации на один из стандартных классов:

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

richMediaStyle.setRichMediaAnimationType(new RichMediaAnimationSlideTop());

Note

По умолчанию для Android установлено значение типа анимации RichMediaAnimationSlideBottom.

Чтобы установить пользовательскую анимацию, реализуйте метод PWRichMediaStyleAnimationDelegate для iOS или RichMediaAnimation для Android, как показано ниже:

iOS

1. Установите делегата анимации:

style.animationDelegate = self;

2. Реализуйте методы PWRichMediaStyleAnimationDelegate (не забудьте вызвать блок завершения):

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

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 должен быть добавлен к вашей пользовательской анимации, чтобы SDK Wavesend мог обработать событие окончания анимации
        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 Messages.

iOS

1. Используйте loadingViewBlock следующим образом:

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

2. “LoadingView” здесь должен наследоваться от PWLoadingView (определенного в PWRichMediaStyle.h):

3. Настройте аутлеты:

Android

RichMediaStyle.LoadingViewCreatorInterface реализует метод, который возвращает View для использования в качестве экрана загрузки для Rich Media:

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

Задержка активации кнопки закрытия

Убедитесь, что In-App Message будет показано пользователям, отключив кнопку закрытия до полной загрузки Rich Media.

iOS

style.closeButtonPresentingDelay = 3;

Android

// установите значение в миллисекундах
richMediaStyle.setTimeOutBackButtonEnable(3000);