Android 모달 리치 미디어

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

주요 기능

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

사용법

모달 리치 미디어 활성화

모달 리치 미디어 기능을 활성화하려면, 애플리케이션의 AndroidManifest.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로 설정하십시오.

구성 예시

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

스와이프 제스처 예시

        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));

드롭다운 애니메이션 예시

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

하단 리치 미디어 예시

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

결론

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