การแสดงภาพซ้อนภาพ

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

รูปที่ 1: ผู้ใช้สามารถดูวิดีโอต่อได้แม้จะไม่ได้อยู่ในแอปของคุณ

สรุปประเด็นสำคัญ

  • ตรวจสอบว่าองค์ประกอบ UI นั้นซ่อนอยู่และการเล่นวิดีโอดำเนินต่อไปเมื่อกิจกรรมอยู่ในโหมด PIP
  • ปิดใช้การปรับขนาดแบบต่อเนื่องสำหรับเนื้อหาที่ไม่ใช่วิดีโอ
  • กิจกรรมการเล่นวิดีโอที่มี UI น้อยที่สุดจะให้ประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้
  • หลีกเลี่ยงการแสดงสิ่งใดก็ตามนอกเหนือจากเนื้อหาวิดีโอ

เพิ่มการรองรับการแสดงภาพซ้อนภาพลงในแอป

โดยค่าเริ่มต้น ระบบจะไม่รองรับ PiP สำหรับแอปโดยอัตโนมัติ และแอปจะต้องประกาศเพื่อรองรับฟีเจอร์นี้

หน้าต่าง PiP จะปรากฏในเลเยอร์บนสุดของหน้าจอที่มุมที่ระบบเลือก

การควบคุม

โดยค่าเริ่มต้น Android จะมีการควบคุม PIP สำหรับการปิดหน้าต่าง การขยายหน้าต่างกลับเป็นโหมดเต็มหน้าจอ การตั้งค่า และการเล่นสื่อ แอปสามารถเพิ่มการดำเนินการที่กําหนดเองและชิ้นงานไอคอนที่เหมาะสมเพื่อให้ผู้ใช้โต้ตอบกับเนื้อหา PiP ได้

ผู้ใช้สามารถแสดงการควบคุมเหล่านี้จากเมนูหน้าต่าง PiP โดยการแตะหน้าต่างบนอุปกรณ์เคลื่อนที่หรือเลือกเมนูจากรีโมตทีวี หากแอปมีเซสชันสื่อที่ใช้งานอยู่ การควบคุมสำหรับเล่น หยุดชั่วคราว ถัดไป และก่อนหน้าก็จะแสดงด้วย อ่านวิธีเพิ่มการควบคุมเหล่านี้

ในโหมด PIP กิจกรรมจะแสดงในหน้าต่างเล็กๆ ผู้ใช้จะโต้ตอบกับองค์ประกอบ UI อื่นๆ ของแอปไม่ได้ในโหมดนี้ และรายละเอียดขององค์ประกอบ UI ขนาดเล็กในหน้าต่าง PiP อาจมองเห็นได้ยาก

การควบคุม PiP เริ่มต้น
ตัวอย่างการควบคุม PiP ที่กําหนดเอง

การใช้งาน

อนุญาตให้ผู้ใช้ดูวิดีโอต่อได้ไม่เพียงภายในแอปเท่านั้น แต่ยังดูต่อในอุปกรณ์ได้ด้วย แอปจะควบคุมเมื่อกิจกรรมปัจจุบันเข้าสู่โหมด PiP ซึ่งอาจเป็นการโต้ตอบ เช่น การออกจากมุมมองปัจจุบันหรือการปัดขึ้นเพื่อกลับไปยังหน้าจอหลัก

ตัวอย่างการดำเนินการที่เป็นไปได้มีดังนี้

  • กิจกรรมจะเข้าสู่โหมด PiP ได้เมื่อผู้ใช้แตะปุ่มหน้าแรกหรือปัดขึ้นเพื่อไปที่หน้าแรก วิธีนี้ช่วยให้ Google Maps แสดงเส้นทางต่อไปได้ขณะที่ผู้ใช้ทำกิจกรรมอื่นในเวลาเดียวกัน

    รูปที่ 4: ใช้ PiP เพื่อไปยังส่วนต่างๆ ต่อไป

  • แอปสามารถย้ายวิดีโอไปยังโหมด PIP เมื่อผู้ใช้ไปยังส่วนอื่นของแอปจากวิดีโอ

  • แอปของคุณเปลี่ยนวิดีโอเป็นโหมด PIP ได้ขณะที่ผู้ใช้ดูเนื้อหาตอนจบ หน้าจอหลักจะแสดงข้อมูลโปรโมตหรือข้อมูลสรุปเกี่ยวกับตอนถัดไปในซีรีส์

  • แอปของคุณสามารถช่วยให้ผู้ใช้จัดคิวเนื้อหาเพิ่มเติมขณะดูวิดีโอได้ วิดีโอจะเล่นต่อในโหมด PIP ขณะที่หน้าจอหลักแสดงกิจกรรมการเลือกเนื้อหา

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

ในแอป ผู้ใช้อาจเลือกวิดีโอใหม่เมื่อเรียกดูเนื้อหาบนหน้าจอหลักขณะที่กิจกรรมการเล่นวิดีโออยู่ในโหมดภาพซ้อนภาพ เล่นวิดีโอใหม่ในกิจกรรมการเล่นที่มีอยู่ในรูปแบบเต็มหน้าจอแทนการเปิดกิจกรรมใหม่ซึ่งอาจทำให้ผู้ใช้สับสน

รูปแบบการโต้ตอบ

ผู้ใช้สามารถลากหน้าต่าง PiP ไปยังตำแหน่งอื่นได้

แตะเพียงครั้งเดียวที่หน้าต่างเพื่อแสดงปุ่มเปิด/ปิดแบบเต็มหน้าจอ ปุ่มปิด ปุ่มการตั้งค่า และการดำเนินการที่กำหนดเองที่แอปของคุณมีให้ (เช่น การควบคุมการเล่น)

รูปที่ 5: การควบคุม PiP เริ่มต้น

แตะสองครั้งที่หน้าต่างเพื่อสลับระหว่างขนาด PiP ปัจจุบันกับขนาด PiP สูงสุดหรือต่ำสุด เช่น การแตะสองครั้งที่หน้าต่างที่ขยายใหญ่สุดจะเป็นการย่อหน้าต่างนั้น และในทางกลับกัน

รูปที่ 6: การสลับระหว่าง PiP ขนาดต่ำสุดและสูงสุดด้วยการแตะสองครั้ง

ซ่อนหน้าต่างโดยลากไปยังขอบด้านซ้ายหรือขวา หากต้องการเลิกซ่อนหน้าต่าง ให้แตะส่วนที่มองเห็นได้ของหน้าต่างที่ซ่อนอยู่หรือลากหน้าต่างนั้นออก

รูปที่ 7: PiP ที่เก็บไว้

ปรับขนาดหน้าต่าง PiP โดยใช้การบีบนิ้วเพื่อซูม

ปัด PIP ลงเพื่อนำหน้าต่างออก

รูปที่ 8: การปัดลง

ทรานซิชัน

ภาพเคลื่อนไหวที่ราบรื่นเมื่อเข้าสู่โหมด PIP

เมื่อผู้ใช้เปิดใช้งานโหมด PiP กิจกรรมปัจจุบันจะหดจากแบบเต็มหน้าจอเป็นหน้าต่างเล็กๆ ซึ่งจะแสดงเนื้อหาต่อไปโดยไม่มีการวางซ้อน UI

Android 12 มีการปรับปรุงภาพลักษณ์ที่สำคัญสำหรับการเปลี่ยนภาพเคลื่อนไหวระหว่างหน้าต่างแบบเต็มหน้าจอกับ PiP เราขอแนะนําอย่างยิ่งให้ใช้การเปลี่ยนแปลงที่เกี่ยวข้องทั้งหมด เมื่อทําเช่นนั้นแล้ว การเปลี่ยนแปลงเหล่านี้จะปรับขนาดให้เหมาะกับหน้าจอขนาดใหญ่โดยอัตโนมัติ เช่น หน้าจอแบบพับได้และแท็บเล็ต โดยที่คุณไม่ต้องดําเนินการใดๆ เพิ่มเติม

หากแอปของคุณไม่มีอัปเดตที่เกี่ยวข้องเหล่านี้ ทรานซิชันของ PiP จะยังคงใช้งานได้ แต่ภาพเคลื่อนไหวจะดูไม่เรียบร้อย เช่น การเปลี่ยนจากโหมดเต็มหน้าจอเป็นโหมด PiP อาจทําให้หน้าต่าง PiP หายไประหว่างการเปลี่ยนก่อนที่จะปรากฏขึ้นอีกครั้งเมื่อการเปลี่ยนเสร็จสมบูรณ์

ตั้งแต่ Android 12 เป็นต้นไป Flag PictureInPictureParams.Builder.setAutoEnterEnabled(true) จะให้ภาพเคลื่อนไหวที่ราบรื่นขึ้นมากสำหรับการเปลี่ยนไปใช้เนื้อหาวิดีโอในโหมด PIP โดยใช้การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส เช่น เมื่อปัดขึ้นเพื่อไปยังหน้าแรกจากแบบเต็มหน้าจอ เราขอแนะนําให้ใช้วิธีนี้หากแอปของคุณอยู่ในหมวดหมู่แอป ENTERTAINMENT, COMMUNICATION หรือ VIDEO_PLAYER

หากแอปของคุณไม่มีการเปลี่ยนแปลงนี้ การเปลี่ยนไปยังโหมด PIP ด้วยการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสจะยังคงใช้งานได้ แต่ภาพเคลื่อนไหวจะดูไม่เรียบร้อย วิดีโอ 1 แสดงตัวอย่างของกรณีนี้ หน้าต่างจะหดเข้าไปในไอคอนแอปและหายไป จากนั้นจะปรากฏขึ้นอีกครั้งเมื่อการเปลี่ยนเสร็จสมบูรณ์

ประสบการณ์การเปลี่ยนที่ไม่ค่อยราบรื่นเมื่อ PiP ไม่ได้ติดตั้งใช้งาน setAutoEnterEnabled อย่างถูกต้อง
เพิ่ม setAutoEnterEnabled ลงในแอปเพื่อมอบประสบการณ์การเปลี่ยนภาพที่ยอดเยี่ยม

ภาพวิดีโอที่ราบรื่น

เมื่อเราเปิดตัว PiP ใน Android 8.0 sourceRectHint จะระบุพื้นที่ของกิจกรรมที่มองเห็นได้หลังจากเปลี่ยนเป็นโหมด PIP เช่น ขอบเขตของมุมมองวิดีโอในวิดีโอเพลเยอร์ ตั้งแต่ Android 12 เป็นต้นไป ระบบปฏิบัติการจะใช้ sourceRectHint เพื่อแสดงภาพเคลื่อนไหวที่ราบรื่นยิ่งขึ้นทั้งเมื่อเข้าสู่และออกจากโหมด PIP

หากแอปไม่มี sourceRectHint ที่เหมาะสม ทรานซิชันของ PIP จะยังคงทำงานได้ แต่ภาพเคลื่อนไหวจะดูไม่เรียบร้อย ตัวอย่างเช่น วิดีโอ 3 แสดงตัวอย่างการเปลี่ยนจากโหมดเต็มหน้าจอเป็นโหมด PIP ที่ยังไม่สมบูรณ์ หลังจากหน้าต่างแบบเต็มหน้าจอหดขนาดเป็นหน้าต่าง PIP แล้ว หน้าต่างดังกล่าวจะปกคลุมด้วยการวางซ้อนสีดําก่อนที่จะแสดงวิดีโออีกครั้ง

วิดีโอ 3: ประสบการณ์การเปลี่ยนที่ไม่ค่อยราบรื่นเมื่อ PiP ไม่ได้ติดตั้งใช้งาน sourceRectHint อย่างถูกต้อง

หากต้องการดูตัวอย่างลักษณะภาพเคลื่อนไหวของ PiP เมื่อติดตั้งใช้งาน sourceRectHint อย่างถูกต้อง โปรดดูวิดีโอที่ 2 ในส่วนก่อนหน้า

ดูตัวอย่าง Kotlin PictureInPicture ของ Android เป็นข้อมูลอ้างอิงสำหรับการเปิดใช้ประสบการณ์การเปลี่ยนภาพที่ราบรื่น

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน PiP ได้ที่เอกสารประกอบสำหรับนักพัฒนาแอปเกี่ยวกับฟีเจอร์ภาพซ้อนภาพ