הסבר על שלבי הגלילה

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

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

תרשים של מחזור גלילה שמציג את שלבי הגלילה של אירוע גלילה של משתמש
איור 1. תרשים של מחזור גלילה שמציג את שלבי הגלילה של אירוע גלילה של משתמש.

כמו שמוצג באיור 1, תהליך הגלילה מתבצע בדיוק בסדר הזה:

  1. גלילה מעבר לקצה: מקבל את הדלתא של הקלט הראשוני קודם, מה שמאפשר לגלילה מעבר לקצה להגיב ראשונה (לדוגמה, על ידי הרפיה של אפקט מתיחה פעיל).
  2. גלילה מקדימה בגלילה מקוננת: מאפשרת להגיב לדלתא של הקלט לפני שלב הגלילה. בשלב הזה, יכול להיות שחלק מהדלתא של הקלט ייצרך, או שהוא רק ייבדק כדי להפעיל שינויים בממשק המשתמש, כמו כיווץ או הרחבה של סרגל האפליקציות.
  3. שינוי של דלתא הקלט: משנה את הסימן של דלתא הקלט הגולמי על סמך כיוון ופריסת הפריסה כדי להבטיח התנהגות גלילה טבעית. מידע נוסף זמין בקטע שינוי דלתא של קלט.
  4. גלילה: בשלב הזה מתקבל דלתא של קלט זמין שלא נעשה בו שימוש, מותאם להגדרות של קונטיינר הגלילה. בדרך כלל הוא משתמש בהפרש הזה כדי לעדכן את היסט הגלילה שלו.
  5. חזרה לדלתא של קלט גולמי: מחזירה את הדלתא הזמינה והמנוצלת מהשלב Scroll (גלילה) לסימן המקורי של הדלתא של הקלט הגולמי.
  6. גלילה מקוננת אחרי הגלילה: השלב הזה מתרחש אחרי ששלב הגלילה הראשי מסתיים, והוא מקבל את הדלתאות המעודכנות של המיקום הזמין והמיקום שנצרך. הוא יכול להשתמש בכל קלט זמין שנותר, או להשתמש בהקשר של מה שהוזן לו.
  7. גלילה מעבר לקצה: בשלב האחרון הזה נבדלים הדלתות הסופיות הזמינות והמנוצלות. כל קלט זמין שנותר ומגיע לשלב הזה משמש בדרך כלל להנעת אפקטים של קצה, כמו מתיחה או הבהוב, שמציינים שהמשתמש הגיע לגבול של האזור שאפשר לגלול בו.

שינוי דלתא של קלט

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

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

דוגמה: המצביע זז ימינה באמצעות Modifier.horizontalScroll()‎

תרשים שממפה תנועה שבה מצביע העכבר זז ימינה
איור 2. תרשים שממפה תנועה של מצביע ימינה.

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

  • לפני גלילה: המחווה מתחילה עם דלתא חיובית של קלט גולמי של 100.
    • התכונה Overscroll עוקבת אחרי זה ומשתמשת ב-10, כך שנותרים 90.
    • Nested scroll pre-scroll (גלילה מקדימה מוטמעת) מאפשרת לרכיב האב להגיב, ולצרוך 30. הדלתא הגולמית שנותרה היא 60.
  • טרנספורמציה א': לפני הכניסה לשלב הגלילה, הפונקציה horizontalScroll הופכת את הדלתא החיובית הגולמית שנותרה (60) לדלתא שלילית (‎-60). כך מבטיחים שהחלק הגלוי של התוכן יזוז שמאלה, כדי שהתוכן ייראה כאילו הוא זז ימינה עם האצבע של המשתמש.
  • גלילה: רכיב היעד שניתן לגלילה צורך חלק מהדלתא שעברה טרנספורמציה כדי לעדכן את היסט הגלילה שלו. בדוגמה הזו, המערכת צורכת ‎-30, ונשארים ‎-30 שלא נצרכו.
  • טרנספורמציה ב': דלתא הגלילה שלא נצרכה (-30) מומרת בחזרה לדלתא חיובית גולמית (30) כדי להתאים לחוזה של גלילה מקוננת וגלילה מעבר לקצה.
  • Post-scroll: The remaining raw delta is passed back up the pipeline.
    • גלילה בתוך גלילה אחרי הגלילה צורכת 10, ונשארים 20.
    • אפקט הגלילה מעבר לקצה משתמש ב-20 האחרונים כדי ליצור אפקטים חזותיים בקצה, כמו מתיחה או הילה, ומאפס את דלתא הקלט ל-0.

הפניה לטרנספורמציה של דלתא של קלט מצביע

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

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