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

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

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

חטיפות דסקית

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

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

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

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

אמצעי בקרה

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

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

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

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

שימוש

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איור 7: PiP במצב מוסתר

משנים את הגודל של חלון ה-PIP באמצעות תנועת צביטה בזום.

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

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

מעברים.

אנימציה חלקה לכניסה למצב 'תמונה בתוך תמונה' (PiP)

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

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

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

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

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

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

רכיבים חזותיים חלקים בסרטונים

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

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

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

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

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

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