# 리치 미디어 외형 사용자 지정하기

## 개요

리치 미디어 페이지의 외형을 사용자 지정하여 앱 스타일에 완벽하게 맞출 수 있습니다. 인앱 메시지의 배경색을 변경하거나, 애니메이션을 추가하거나, 로딩 뷰를 앱 레이아웃에 맞게 조정하세요. 인앱이 앱의 네이티브 컴포넌트처럼 보이게 하여 사용자 경험을 개선하세요.

## 구현

먼저, **RichMediaStyle** 클래스의 인스턴스를 가져옵니다:

#### iOS

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

#### Android

```java
RichMediaStyle style = RichMediaManager.getRichMediaStyle();
```

### 배경색

리치 미디어 페이지의 **배경색을 변경**하여 인앱 메시지가 앱의 고유한 부분처럼 보이게 만드세요.

<img src="/content-customizing-rich-media-appearance-1.webp" alt="앱 디자인과 일치하도록 배경색이 사용자 지정된 리치 미디어 인앱 메시지"/>

#### iOS

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

#### Android

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

이것으로 끝입니다!

### 애니메이션

**리치 미디어 등장을 애니메이션화**하여 인앱 메시지의 효과를 향상시키세요.

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

#### iOS

애니메이션 델리게이트를 다음 기본 클래스 중 하나로 설정합니다:

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

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

<Aside type="note">
기본적으로 iOS의 애니메이션 유형 값은 `PWRichMediaStyleAnimationTypeSlideBottom`입니다.
</Aside>

#### Android

애니메이션 델리게이트를 다음 기본 클래스 중 하나로 설정합니다:

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

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

<Aside type="note">
기본적으로 Android의 애니메이션 유형 값은 `RichMediaAnimationSlideBottom`입니다.
</Aside>

**사용자 지정 애니메이션**을 설정하려면, iOS의 경우 `PWRichMediaStyleAnimationDelegate` 메서드를, Android의 경우 `RichMediaAnimation`을 다음과 같이 구현합니다:

#### iOS

1. 애니메이션 델리게이트를 설정합니다:

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

2. `PWRichMediaStyleAnimationDelegate` 메서드를 구현합니다(**completion block** 호출을 잊지 마세요):

```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` 인터페이스를 구현하고 사용자 지정 리치 미디어 닫기 및 열기 애니메이션으로 설정합니다:

```java
richMediaStyle.setRichMediaAnimation(new RichMediaAnimation() {
    //사용자 지정 리치 미디어 열기 애니메이션에 대한 규칙과 동작을 설정할 수 있습니다
    @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);
    }
 
    //사용자 지정 리치 미디어 닫기 애니메이션에 대한 규칙과 동작을 설정할 수 있습니다
    @Override
    public void closeAnimation(View contentView, View parentView, Animation.AnimationListener endAnimationListener) {
        // !중요!
        // Pushwoosh SDK가 애니메이션 종료 이벤트를 처리할 수 있도록 endAnimationListener를 사용자 지정 애니메이션에 추가해야 합니다
        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);
    }
});
```

### 사용자 지정 로딩 뷰

인앱 메시지의 **사용자 지정 로딩 뷰**로 처음부터 사용자의 주의를 사로잡으세요.

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

#### iOS

1. 다음과 같이 `loadingViewBlock`을 사용합니다:

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

2. 여기서 "LoadingView"는 PWLoadingView(PWRichMediaStyle.h에 정의됨)를 상속해야 합니다:

<img src="/content-customizing-rich-media-appearance-4.webp" alt="클래스 계층 구조에서 PWLoadingView를 상속하는 LoadingView 클래스를 보여주는 Xcode 인터페이스"/>

3. 아웃렛을 설정합니다:

<img src="/content-customizing-rich-media-appearance-5.webp" alt="LoadingView 사용자 지정 속성에 대한 아웃렛 연결을 보여주는 Xcode 인터페이스"/>

#### Android

`RichMediaStyle.LoadingViewCreatorInterface`는 리치 미디어의 로딩 화면으로 사용할 View를 반환하는 메서드를 구현합니다:

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

### 닫기 버튼 활성화 지연

리치 미디어가 로드될 때까지 **닫기 버튼을 비활성화**하여 인앱 메시지가 사용자에게 확실히 표시되도록 하세요.

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

#### iOS

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

#### Android

```java
// 밀리초 단위로 값을 설정합니다
richMediaStyle.setTimeOutBackButtonEnable(3000);
```