Rich media modal pour Android

La fonctionnalité Rich Media Modal pour Android permet aux développeurs d’afficher du contenu HTML dans une fenêtre popup modale au sein de leur application. Cette popup ne bloque pas les autres éléments de l’interface utilisateur et peut être facilement fermée par des gestes de balayage. La modale offre de multiples options de personnalisation pour l’apparence, le comportement, les animations, et plus encore, offrant une expérience utilisateur très flexible.

Fonctionnalités clés

Interface utilisateur non bloquante : La modale ne bloque pas l’interaction avec les autres éléments de l’interface utilisateur.
Gestes de balayage personnalisables : Configurez les gestes de balayage pour fermer la modale dans différentes directions.
Positionnement flexible : Choisissez où la modale apparaît sur l’écran (en haut, au centre ou en bas).
Animations personnalisées : Contrôlez comment la modale apparaît et disparaît avec différents types d’animation.
Fermeture par balayage : Les utilisateurs peuvent balayer pour fermer la modale depuis n’importe quelle direction.
Durée d’animation réglable : Ajustez la vitesse des animations de la modale.
Gestion de la barre de statut : Option pour afficher la modale sous ou au-dessus de la barre de statut.
Largeur de la fenêtre réglable : Option pour définir la largeur de la modale en plein écran ou pour envelopper le contenu.

Utilisation

Pour activer la fonctionnalité Rich Media Modal, vous devez la configurer dans le fichier AndroidManifest.xml de votre application en ajoutant l’entrée de métadonnées suivante :

<meta-data
    android:name="com.pushwoosh.rich_media_type"
    android:value="Modal" />

Configuration par défaut

L’apparence et le comportement de la modale peuvent être personnalisés en définissant une configuration par défaut via le RichMediaManager. Cette configuration vous permet de spécifier comment la modale se comporte, où elle apparaît, comment elle peut être fermée et le type d’animations utilisées.

Options de personnalisation

Position de la vue modale

Vous pouvez définir la position de la modale sur l’écran en utilisant setViewPosition(). Les valeurs disponibles pour ce paramètre sont :

TOP
CENTER (par défaut)
BOTTOM

Types d’animation de fermeture

Personnalisez la manière dont la modale se ferme avec setDismissAnimationType(). Les options disponibles incluent :

FADE_OUT (par défaut)
SLIDE_UP
SLIDE_DOWN
SLIDE_LEFT
SLIDE_RIGHT
NONE

Types d’animation d’apparition

Définissez comment la modale apparaît avec setPresentAnimationType(). Les options disponibles sont :

FADE_IN
SLIDE_UP
SLIDE_RIGHT
DROP_DOWN
SLIDE_LEFT
NONE (par défaut)

Configuration du geste de balayage

La modale peut être fermée avec des gestes de balayage dans différentes directions en utilisant setSwipeGesture(). Les gestes de balayage disponibles incluent :

UP
LEFT
RIGHT
DOWN
NONE (par défaut)

Durée de l’animation

Contrôlez la vitesse de l’animation en définissant la animationDuration() en millisecondes. La durée est spécifiée comme une valeur entière, représentant le temps en millisecondes.

Largeur de la fenêtre modale

La largeur de la modale peut être définie en utilisant setWindowWidth(), qui définit si la modale prendra toute la largeur de l’écran ou juste assez pour s’adapter au contenu. Les valeurs possibles sont :

FULL_SCREEN (par défaut)
WRAP_CONTENT

Gestion de la barre de statut

Par défaut, la modale ne couvrira pas la barre de statut. Pour permettre à la modale d’apparaître sous la barre de statut, définissez la propriété setStatusBarCovered() sur true.

Exemple de configuration

Voici quelques exemples, démontrant diverses animations, y compris des gestes de balayage, des apparitions par glissement, des fermetures en fondu, différentes durées d’animation et des largeurs d’écran variables. Ci-dessous, vous trouverez également les configurations utilisées pour obtenir ces effets.

Exemple de geste de balayage

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

Exemple d’animation déroulante

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

Exemple de Rich Media en bas de l’écran

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

Conclusion

La fonctionnalité Rich Media Modal pour Android offre un moyen simple et flexible de présenter du contenu HTML dans votre application sans obstruer l’expérience utilisateur. Avec ses nombreuses options de personnalisation, y compris les gestes de balayage, les animations, le positionnement et la largeur de la fenêtre, vous pouvez créer une interaction fluide et engageante pour vos utilisateurs.