# Android 모달 리치 미디어

<Aside type="note" title="중요">
SDK 6.7.13부터 사용 가능합니다.
</Aside>

Android 모달 리치 미디어 기능은 개발자가 애플리케이션 내의 모달 팝업 창 안에 HTML 콘텐츠를 표시할 수 있게 해줍니다. 이 팝업은 다른 UI 요소를 차단하지 않으며 스와이프 제스처를 사용하여 쉽게 닫을 수 있습니다. 모달은 모양, 동작, 애니메이션 등에 대한 다양한 사용자 정의 옵션을 제공하여 매우 유연한 사용자 경험을 제공합니다.

## 주요 기능

- **차단 없는 UI**: 모달은 다른 UI 요소와의 상호작용을 차단하지 않습니다.
- **사용자 정의 가능한 스와이프 제스처**: 다양한 방향으로 모달을 닫기 위한 스와이프 제스처를 구성할 수 있습니다.
- **유연한 위치 지정**: 화면에서 모달이 나타날 위치(상단, 중앙 또는 하단)를 선택할 수 있습니다.
- **사용자 정의 애니메이션**: 다양한 애니메이션 유형으로 모달이 나타나고 사라지는 방식을 제어할 수 있습니다.
- **스와이프로 닫기**: 사용자는 어느 방향으로든 스와이프하여 모달을 닫을 수 있습니다.
- **조정 가능한 애니메이션 지속 시간**: 모달 애니메이션의 속도를 미세 조정할 수 있습니다.
- **상태 표시줄 처리**: 상태 표시줄 아래 또는 위에 모달을 표시하는 옵션이 있습니다.
- **조정 가능한 창 너비**: 모달 너비를 전체 화면으로 설정하거나 콘텐츠를 감싸도록 설정하는 옵션이 있습니다.

## 사용법

### 모달 리치 미디어 활성화

**모달 리치 미디어** 기능을 활성화하려면, 애플리케이션의 `AndroidManifest.xml` 파일에 다음 메타데이터 항목을 추가하여 구성해야 합니다:

```xml
<meta-data
    android:name="com.pushwoosh.rich_media_type"
    android:value="Modal" />
```
## 기본 구성
모달의 모양과 동작은 `RichMediaManager`를 통해 기본 구성을 설정하여 사용자 정의할 수 있습니다. 이 구성을 통해 모달의 동작 방식, 표시 위치, 닫기 방법 및 사용되는 애니메이션 유형을 지정할 수 있습니다.

## 사용자 정의 옵션

### 모달 뷰 위치

`setViewPosition()`을 사용하여 화면에서 모달의 위치를 설정할 수 있습니다. 이 매개변수에 사용할 수 있는 값은 다음과 같습니다:

- `TOP`
- `CENTER` (기본값)
- `BOTTOM`

### 닫기 애니메이션 유형

`setDismissAnimationType()`으로 모달이 닫히는 방식을 사용자 정의할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다:

- `FADE_OUT` (기본값)
- `SLIDE_UP`
- `SLIDE_DOWN`
- `SLIDE_LEFT`
- `SLIDE_RIGHT`
- `NONE`

### 표시 애니메이션 유형

`setPresentAnimationType()`으로 모달이 나타나는 방식을 정의할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다:

- `FADE_IN`
- `SLIDE_UP`
- `SLIDE_RIGHT`
- `DROP_DOWN`
- `SLIDE_LEFT`
- `NONE` (기본값)

### 스와이프 제스처 구성

`setSwipeGesture()`를 사용하여 다른 방향으로 스와이프 제스처로 모달을 닫을 수 있습니다. 사용 가능한 스와이프 제스처는 다음과 같습니다:

- `UP`
- `LEFT`
- `RIGHT`
- `DOWN`
- `NONE` (기본값)

### 애니메이션 지속 시간

`animationDuration()`을 밀리초 단위로 설정하여 애니메이션 속도를 제어할 수 있습니다. 지속 시간은 밀리초 단위의 시간을 나타내는 정수 값으로 지정됩니다.

### 모달 창 너비

모달의 너비는 `setWindowWidth()`를 사용하여 설정할 수 있으며, 이는 모달이 화면의 전체 너비를 차지할지 아니면 콘텐츠에 맞게 충분한 너비만 차지할지를 정의합니다. 가능한 값은 다음과 같습니다:

- `FULL_SCREEN` (기본값)
- `WRAP_CONTENT`

### 상태 표시줄 처리

기본적으로 모달은 상태 표시줄을 덮지 않습니다. 모달이 상태 표시줄 아래에 나타나도록 하려면 `setStatusBarCovered()` 속성을 `true`로 설정하십시오.


## 구성 예시
다음은 스와이프 제스처, 슬라이드인 등장, 페이드아웃 닫기, 다양한 애니메이션 지속 시간 및 다양한 화면 너비를 포함한 다양한 애니메이션을 보여주는 몇 가지 예시입니다. 아래에서 이러한 효과를 얻기 위해 사용된 구성도 찾을 수 있습니다.

### 스와이프 제스처 예시

<video src="/android-push-notifications-android-modal-rich-media-1.webm" title="오른쪽으로 스와이프하여 닫는 Android 모달" autoplay loop muted playsinline />

```
        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setStatusBarCovered(false)
                .setSwipeGesture(ModalRichMediaSwipeGesture.RIGHT)
                .setViewPosition(ModalRichMediaViewPosition.CENTER)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.SLIDE_RIGHT)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.SLIDE_FROM_LEFT)
                .setAnimationDuration(800)
                .setWindowWidth(ModalRichMediaWindowWidth.WRAP_CONTENT));
```
### 드롭다운 애니메이션 예시

<video src="/android-push-notifications-android-modal-rich-media-2.webm" title="드롭다운 애니메이션으로 나타나고 위로 스와이프하여 닫는 Android 모달" autoplay loop muted playsinline />

```
        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setSwipeGesture(ModalRichMediaSwipeGesture.UP)
                .setViewPosition(ModalRichMediaViewPosition.TOP)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.SLIDE_UP)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.DROP_DOWN)
                .setAnimationDuration(1000));

```

### 하단 리치 미디어 예시

<video src="/android-push-notifications-android-modal-rich-media-3.webm" title="하단에 표시되고 페이드 아웃으로 닫히며 슬라이드 업 애니메이션이 적용된 Android 모달" autoplay loop muted playsinline />

```
        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setSwipeGesture(ModalRichMediaSwipeGesture.DOWN)
                .setViewPosition(ModalRichMediaViewPosition.BOTTOM)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.FADE_OUT)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.SLIDE_UP)
                .setAnimationDuration(2000));
```

## 결론
Android 모달 리치 미디어 기능은 사용자 경험을 방해하지 않으면서 앱 내에서 HTML 콘텐츠를 표시하는 쉽고 유연한 방법을 제공합니다. 스와이프 제스처, 애니메이션, 위치 지정 및 창 너비를 포함한 광범위한 사용자 정의 옵션을 통해 사용자를 위한 원활하고 매력적인 상호작용을 만들 수 있습니다.