מעקב אחרי חשיפה ב"פיתוח נייטיב"

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

• ‫onVisibilityChanged – המשתנה הזה מודיע לכם כשהחשיפה של רכיב ה-composable משתנה. הוא אידיאלי להפעלת פעולה או תופעת לוואי בכל פעם שהרכיב ה-composable הופך לגלוי.
• ‫onLayoutRectChanged – המשתנה הזה מספק מידע על הגבולות של רכיב ה-composable ביחס לרכיב הבסיסי, לחלון ולמסך. הוא מציע שליטה ברמה נמוכה והוא ה-API הבסיסי של onVisibilityChanged. המשתנה דומה ל-onGloballyPositioned, אבל הוא מציע ביצועים טובים יותר וגמישות רבה יותר.

אתם יכולים להשתמש בממשקי ה-API האלה עם כל רכיב Composable כחלק משרשרת ה-modifier.

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

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

כדי לקבל התראה כשהחשיפה של פריט משתנה, משתמשים במשנה onVisibilityChanged, כמו בדוגמה הבאה:

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)
VisibilitySnippets.kt

העיבוד onVisibilityChanged מספק ערך בוליאני שמשקף את מצב החשיפה הנוכחי של הפונקציה הקומפוזבילית. בנוסף, הוא מציע פרמטרים כמו minFraction ו-minDurationMs, שמאפשרים לכם לקבוע בצורה מדויקת יותר מתי להפעיל את פונקציית ה-callback של החשיפה.

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

הגדרת מגבלת זמן לרכיב קומפוזבילי לפני הפעלת קריאה חוזרת (callback) לחשיפה

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

כדי להפעיל פעולה אחרי שפריט גלוי למשך פרק זמן מוגדר, משתמשים בפרמטר minDurationMs ב-modifier‏ onVisibilityChanged. הפרמטר הזה מציין את משך הזמן המינימלי שבו רכיב Composable צריך להיות גלוי ברציפות כדי להפעיל את הקריאה החוזרת (callback). אם הרכיב הניתן לקיבוץ מפסיק להיות גלוי לפני שחלף משך הזמן, הטיימר מתאפס. ערך ברירת המחדל הוא 0 אלפיות השנייה.

קטע הקוד הבא משנה את הרקע לסגול אחרי שהפונקציה הקומפוזבילית גלויה למשתמש במשך 3 שניות:

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {

    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}
VisibilitySnippets.kt

איור 1. הרקע משתנה מוורוד לשזיף אחרי שהפונקציה הקומפוזבילית מופיעה במסך במשך 3 שניות ברציפות.

הגדרת שיעור חשיפה מינימלי

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

במקרים כאלה, משתמשים בפרמטר minFractionVisible של המשנה onVisibilityChanged כדי להגדיר את החלק שצריך להופיע במסך כדי שהרכיב ה-composable יסומן כגלוי. אפשר להזין ערכים מסוג float בטווח שבין 0.0f ל-1.0f, והערך שמוגדר כברירת מחדל הוא 1.0f. ‫1.0f פירושו שהרכיב הניתן לשילוב צריך להיות גלוי לחלוטין במסך כדי שהקריאה החוזרת תופעל.

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here the visible callback gets triggered when 20% of the composable is visible
                .onVisibilityChanged(
                    minFractionVisible = 0.2f,
                ) { visible ->
                    if (visible) {
                        // Call specific logic here
                        // viewModel.fetchDataFromNetwork()
                    }
                }
                .padding(vertical = 16.dp)
        ) {
            Text(
                text = "Sample Text",
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}
VisibilitySnippets.kt

איור 2. בלי להגדיר את minFractionVisible.	איור 3. כאשר minFractionVisible מוגדר כ-0.2f.

בדוגמה הקודמת, הרובוטים של Androidify נטענים מראש מהרשת לפני שהרכיב הקומפוזבילי גלוי לחלוטין. באיור 2, הבוט השלישי לא נטען כי ה-composable לא גלוי לגמרי. באיור 3, מוגדר minFractionVisible, והבוט השלישי נטען לפני שהוא גלוי לחלוטין במסך.

הערה: הסרטונים שלמעלה הואטו בכוונה לשם הבהרה.