Rich Media แบบโมดอลสำหรับ Android

ฟีเจอร์ Rich Media แบบโมดอลสำหรับ Android ช่วยให้นักพัฒนาสามารถแสดงเนื้อหา HTML ภายในหน้าต่างป๊อปอัปแบบโมดอลในแอปพลิเคชันของตนได้ ป๊อปอัปนี้จะไม่บล็อกองค์ประกอบ UI อื่นๆ และสามารถปิดได้อย่างง่ายดายโดยใช้ท่าทางการปัด (swipe gestures) โมดอลนี้มีตัวเลือกการปรับแต่งที่หลากหลายสำหรับรูปลักษณ์ พฤติกรรม แอนิเมชัน และอื่นๆ อีกมากมาย มอบประสบการณ์ผู้ใช้ที่มีความยืดหยุ่นสูง

คุณสมบัติหลัก

UI ที่ไม่บล็อกการทำงาน: โมดอลจะไม่บล็อกการโต้ตอบกับองค์ประกอบ UI อื่นๆ
ท่าทางการปัดที่ปรับแต่งได้: กำหนดค่าท่าทางการปัดเพื่อปิดโมดอลในทิศทางต่างๆ
การกำหนดตำแหน่งที่ยืดหยุ่น: เลือกตำแหน่งที่โมดอลจะปรากฏบนหน้าจอ (บน, กลาง หรือล่าง)
แอนิเมชันที่กำหนดเอง: ควบคุมวิธีการปรากฏและหายไปของโมดอลด้วยประเภทแอนิเมชันที่แตกต่างกัน
ปิดได้ด้วยการปัด: ผู้ใช้สามารถปัดเพื่อปิดโมดอลจากทิศทางใดก็ได้
ระยะเวลาแอนิเมชันที่ปรับได้: ปรับแต่งความเร็วของแอนิเมชันโมดอล
การจัดการแถบสถานะ: ตัวเลือกในการแสดงโมดอลใต้หรือเหนือแถบสถานะ
ความกว้างหน้าต่างที่ปรับได้: ตัวเลือกในการตั้งค่าความกว้างของโมดอลเป็นแบบเต็มหน้าจอหรือปรับตามขนาดเนื้อหา

การใช้งาน

การเปิดใช้งาน Rich Media แบบโมดอล

หากต้องการเปิดใช้งานฟีเจอร์ Rich Media แบบโมดอล คุณต้องกำหนดค่าในไฟล์ AndroidManifest.xml ของแอปพลิเคชันโดยเพิ่มรายการข้อมูลเมตาต่อไปนี้:

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

การกำหนดค่าเริ่มต้น

รูปลักษณ์และพฤติกรรมของโมดอลสามารถปรับแต่งได้โดยการตั้งค่าการกำหนดค่าเริ่มต้นผ่าน RichMediaManager การกำหนดค่านี้ช่วยให้คุณสามารถระบุพฤติกรรมของโมดอล ตำแหน่งที่ปรากฏ วิธีการปิด และประเภทของแอนิเมชันที่ใช้

ตัวเลือกการปรับแต่ง

คุณสามารถกำหนดตำแหน่งของโมดอลบนหน้าจอได้โดยใช้ setViewPosition() ค่าที่ใช้ได้สำหรับพารามิเตอร์นี้คือ:

TOP
CENTER (ค่าเริ่มต้น)
BOTTOM

ประเภทแอนิเมชันการปิด (Dismiss animation types)

ปรับแต่งวิธีการปิดโมดอลด้วย setDismissAnimationType() ตัวเลือกที่ใช้ได้ ได้แก่:

FADE_OUT (ค่าเริ่มต้น)
SLIDE_UP
SLIDE_DOWN
SLIDE_LEFT
SLIDE_RIGHT
NONE

ประเภทแอนิเมชันการแสดงผล (Present animation types)

กำหนดวิธีการปรากฏของโมดอลด้วย setPresentAnimationType() ตัวเลือกที่ใช้ได้คือ:

FADE_IN
SLIDE_UP
SLIDE_RIGHT
DROP_DOWN
SLIDE_LEFT
NONE (ค่าเริ่มต้น)

การกำหนดค่าท่าทางการปัด (Swipe gesture)

โมดอลสามารถปิดได้ด้วยท่าทางการปัดในทิศทางต่างๆ โดยใช้ setSwipeGesture() ท่าทางการปัดที่ใช้ได้ ได้แก่:

UP
LEFT
RIGHT
DOWN
NONE (ค่าเริ่มต้น)

ระยะเวลาของแอนิเมชัน (Animation duration)

ควบคุมความเร็วของแอนิเมชันโดยการตั้งค่า animationDuration() ในหน่วยมิลลิวินาที ระยะเวลาจะถูกระบุเป็นค่าจำนวนเต็ม ซึ่งแสดงถึงเวลาในหน่วยมิลลิวินาที

ความกว้างของโมดอลสามารถตั้งค่าได้โดยใช้ setWindowWidth() ซึ่งจะกำหนดว่าโมดอลจะใช้ความกว้างเต็มหน้าจอหรือเพียงพอที่จะพอดีกับเนื้อหา ค่าที่เป็นไปได้คือ:

FULL_SCREEN (ค่าเริ่มต้น)
WRAP_CONTENT

การจัดการแถบสถานะ

ตามค่าเริ่มต้น โมดอลจะไม่ครอบคลุมแถบสถานะ หากต้องการให้โมดอลปรากฏใต้แถบสถานะ ให้ตั้งค่าคุณสมบัติ setStatusBarCovered() เป็น true

ตัวอย่างการกำหนดค่า

นี่คือตัวอย่างบางส่วนที่แสดงแอนิเมชันต่างๆ รวมถึงท่าทางการปัด การปรากฏแบบสไลด์เข้า การปิดแบบเฟดเอาท์ ระยะเวลาแอนิเมชันที่แตกต่างกัน และความกว้างของหน้าจอที่หลากหลาย ด้านล่างนี้ คุณยังสามารถพบการกำหนดค่าที่ใช้เพื่อให้ได้เอฟเฟกต์เหล่านี้

ตัวอย่างท่าทางการปัด

Android modal with swipe right gesture to dismiss

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

ตัวอย่างแอนิเมชันแบบดร็อปดาวน์

Android modal appearing with drop-down animation and swipe up to dismiss

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

ตัวอย่าง Rich Media ที่ด้านล่าง

Android modal displayed at bottom with fade out dismissal and slide up animation

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

สรุป

ฟีเจอร์ Rich Media แบบโมดอลสำหรับ Android เป็นวิธีที่ง่ายและยืดหยุ่นในการนำเสนอเนื้อหา HTML ภายในแอปของคุณโดยไม่กีดขวางประสบการณ์ของผู้ใช้ ด้วยตัวเลือกการปรับแต่งที่ครอบคลุม รวมถึงท่าทางการปัด แอนิเมชัน การกำหนดตำแหน่ง และความกว้างของหน้าต่าง คุณสามารถสร้างปฏิสัมพันธ์ที่ราบรื่นและน่าสนใจสำหรับผู้ใช้ของคุณได้