תמונה בתוך תמונה

איור ראשי (Hero) של סמל התמונה בתוך תמונה והלוגו של Play

תמונה בתוך תמונה (PiP) היא סוג של מצב ריבוי חלונות שמיועד לפעילויות שבהן מוצג סרטון במסך מלא. התכונה הזו מאפשרת למשתמשים לצפות בסרטונים בחלון קטן שמוצמד לפינה של המסך. כך הסרטון ממשיך לפעול גם כשהם עוברים בין אפליקציות או מעיינים בתוכן במסך הראשי.

איור 1: המשתמשים יכולים להמשיך לצפות בסרטון גם כשהם לא באפליקציה שלכם

חטיפות דסקית

  • מוודאים שרכיבי ממשק המשתמש מוסתרים והפעלת הסרטון נמשכת כשהפעילות במצב PiP.
  • השבתת שינוי גודל חלק לתוכן שאינו וידאו.
  • פעילויות של הפעלת סרטונים עם ממשק משתמש מינימלי מספקות את חוויית המשתמש הטובה ביותר.
  • להימנע מהצגת כל דבר חוץ מתוכן הסרטון.

הוספת תמיכה בתכונה 'תמונה בתוך תמונה' לאפליקציה

כברירת מחדל, המערכת לא תומכת אוטומטית בתכונת PiP באפליקציות, וצריך להצהיר על תמיכה בתכונה.

חלון ה-PiP מופיע בשכבה העליונה ביותר של המסך, בפינה שנבחרה על ידי המערכת.

פקדים

כברירת מחדל, מערכת Android מספקת אמצעי בקרה של PiP לסגירת החלון, להרחבתו בחזרה למסך מלא, להגדרות ולהפעלת מדיה. האפליקציה יכולה להוסיף פעולות מותאמות אישית ונכסי סמלים מתאימים כדי לאפשר למשתמשים ליצור אינטראקציה עם התוכן במצב תמונה בתוך תמונה.

המשתמש יכול להציג את אמצעי הבקרה האלה מתפריט חלון התמונה בתוך תמונה. כדי לעשות זאת, צריך להקיש על החלון במכשיר נייד או לבחור את התפריט בשלט של הטלוויזיה. אם לאפליקציה יש סשן מדיה פעיל, מוצגים גם אמצעי בקרה להפעלה, להשהיה, להבא ולקודם. איך מוסיפים את אמצעי הבקרה האלה

במצב PiP, הפעילות מוצגת בחלון קטן. במצב הזה, המשתמשים לא יכולים ליצור אינטראקציה עם רכיבים אחרים בממשק המשתמש של האפליקציה, ופרטים של רכיבים קטנים בממשק המשתמש בחלון התמונה בתוך תמונה עשויים להיות קשים לצפייה.

ממשק משתמש שבו מוצגים אמצעי הבקרה של ברירת המחדל של תמונה בתוך תמונה

אמצעי הבקרה של PiP שמוגדרים כברירת מחדל.

דוגמה לאמצעי בקרה מותאמים אישית של תמונה בתוך תמונה

דוגמה לפקדים מותאמים אישית של תמונה בתוך תמונה.

שימוש

המשתמשים יכולים להמשיך לצפות בסרטון לא רק באפליקציה שלכם, אלא גם במכשיר שלהם. האפליקציה קובעת מתי הפעילות הנוכחית עוברת למצב תמונה בתוך תמונה – זה יכול לקרות בעקבות אינטראקציה כמו יציאה מהתצוגה הנוכחית או החלקה כלפי מעלה כדי לחזור למסך הבית.

אלו כמה דוגמאות לפעולות אפשריות:

  • פעילות יכולה להיכנס למצב תמונה בתוך תמונה כשהמשתמש מקיש על הלחצן הראשי או מחליק למעלה אל המסך הראשי. כך מפות Google ממשיכה להציג הוראות הגעה בזמן שהמשתמש מבצע פעילות אחרת בו-זמנית.

    איור 4: שימוש בתכונה 'תמונה בתוך תמונה' כדי להמשיך את חוויית הניווט
  • האפליקציה יכולה להעביר סרטון למצב PiP כשהמשתמש חוזר מהסרטון כדי לעיין בתוכן אחר.

  • האפליקציה יכולה להעביר סרטון למצב PiP בזמן שמשתמש צופה בסוף של פרק תוכן. במסך הראשי מוצגות פרטים שיווקיים או סיכום של הפרק הבא בסדרה.

  • האפליקציה יכולה לספק למשתמשים דרך להוסיף תוכן נוסף לרשימת הצפייה בזמן שהם צופים בסרטון. הסרטון ממשיך לפעול במצב 'תמונה בתוך תמונה' בזמן שבמסך הראשי מוצגת פעילות של בחירת תוכן.

כדאי להשתמש בדפוס אינטראקציה שמשלים את חוויית הצפייה בלי להפריע לה. לדוגמה, אם סרטון נמצא בסוף פרק של תוכן, כדי להיכנס למצב PiP כשיוצאים ממסך הבית, המשתמש יצטרך לבצע פעולה נוספת כדי לחזור ולעצור את ההפעלה או כדי לנווט בין אמצעי בקרה קטנים.

באפליקציה שלכם, יכול להיות שמשתמש יבחר סרטון חדש בזמן שהוא מחפש תוכן במסך הראשי, בזמן שפעילות של הפעלת סרטון נמצאת במצב PiP. להפעיל את הסרטון החדש בפעילות ההפעלה הקיימת במצב מסך מלא, במקום להפעיל פעילות חדשה שעלולה לבלבל את המשתמש.

דפוסי אינטראקציה

המשתמשים יכולים לגרור את חלון ה-PiP למיקום אחר.

מקישים הקשה אחת על החלון כדי להציג את המתג למסך מלא, לחצן סגירה, לחצן הגדרות ופעולות מותאמות אישית שסופקו על ידי האפליקציה (למשל, אמצעי בקרה להפעלה).

איור 5: אמצעי הבקרה של ברירת המחדל של PiP

ללחוץ לחיצה כפולה על החלון כדי לעבור בין הגודל הנוכחי של התמונה בתוך תמונה לבין הגודל המקסימלי או המינימלי של התמונה בתוך תמונה. לדוגמה, לחיצה כפולה על חלון מוגדל תמזער אותו, ולהפך.

איור 6: מעבר בין גודל מינימלי לגודל מקסימלי של חלון צף באמצעות הקשה כפולה

מסתירים את החלון על ידי גרירה שלו לקצה השמאלי או הימני. כדי לבטל את ההסתרה של החלון, מקישים על החלק הגלוי של החלון המוסתר או גוררים אותו החוצה.

איור 7: חלון PiP מוסתר

משנים את הגודל של חלון ה-PiP באמצעות פתיחת או סגירת אצבעות לשינוי מרחק התצוגה.

מחליקים את חלון ה-PiP למטה כדי להסיר אותו.

איור 8: החלקה כלפי מטה

מעברים.

כדי לשפר את חוויית המשתמש כשעוברים למצב תמונה בתוך תמונה וממנו, אפשר להתאים אישית את המעברים בכניסה וביציאה.

אנימציה חלקה של מעבר למצב תמונה בתוך תמונה

משתמש שמפעיל את מצב 'תמונה בתוך תמונה' גורם לפעילות הנוכחית להתכווץ ממסך מלא לחלון קטן, שבו התוכן ממשיך להיות מוצג בלי להסתיר את ממשק המשתמש.

ב-Android 12 נוספו שיפורים ויזואליים למעברים בין חלונות במסך מלא לבין חלונות בתמונה בתוך תמונה. אחרי ההטמעה, העדכונים האלה מותאמים אוטומטית לטאבלטים ולמכשירים מתקפלים.

בלי העדכונים האלה, המעברים פועלים אבל הם פחות חלקים. לדוגמה, יכול להיות שחלון התמונה בתוך תמונה ייעלם באופן זמני במהלך המעבר.

החל מ-Android 12, הדגל PictureInPictureParams.Builder.setAutoEnterEnabled(true) מספק מעברים חלקים יותר בין מחוות (כמו החלקה למעלה כדי לחזור למסך הבית). מומלץ להשתמש באפשרות הזו באפליקציות ENTERTAINMENT, COMMUNICATION או VIDEO_PLAYER.

בלי הדגל הזה, כשמשתמשים במחוות כדי לעבור בין אפליקציות, החלון מצטמצם לסמל האפליקציה לפני שהוא מופיע שוב כחלון של תמונה בתוך תמונה (כמו שמוצג בסרטון 1).

חוויית מעבר פחות חלקה כשלא מפעילים את setAutoEnterEnabled בצורה תקינה

הוספנו לאפליקציה את setAutoEnterEnabled כדי לשפר את חוויית המעבר.

החלקת הווידאו

כשציינו את התכונה 'תמונה בתוך תמונה' ב-Android 8.0, ‏sourceRectHint סימן את האזור של הפעילות שגלוי אחרי המעבר לתמונה בתוך תמונה – לדוגמה, הגבולות של תצוגת הווידאו בנגן וידאו. החל מ-Android 12, מערכת ההפעלה משתמשת ב-sourceRectHint כדי להטמיע אנימציה חלקה יותר גם כשנכנסים למצב PiP וגם כשיוצאים ממנו.

אם האפליקציה לא מספקת sourceRectHint מתאים, המעברים למצב 'תמונה בתוך תמונה' עדיין יפעלו, אבל האנימציות יהיו פחות חלקות. לדוגמה, בסרטון 3 מוצגת דוגמה פחות מוצלחת למעבר ממסך מלא למצב תמונה בתוך תמונה: אחרי שהחלון במסך מלא מצטמצם לחלון של תמונה בתוך תמונה, הוא מכוסה בשכבת-על שחורה לפני שהסרטון נחשף שוב.

סרטון 3: חוויית מעבר פחות חלקה כשsourceRectHint לא מוטמע כמו שצריך

כדי לראות דוגמה לאנימציה של תמונה בתוך תמונה כשמטמיעים את sourceRectHint בצורה נכונה, אפשר לצפות בסרטון 2 בקטע הקודם.

כדי לקבל מידע על הפעלת מעבר חלק בין מצבים, אפשר לעיין בדוגמה של תמונה בתוך תמונה ב-Android Kotlin.

מידע נוסף על הטמעה של PiP זמין במסמכי התיעוד למפתחים בנושא תמונה בתוך תמונה.