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

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

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

אפשר להשתמש בממשקי ה-API האלה עם כל רכיב שאפשר להרכיב כחלק משרשרת המשנים.

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

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

כדי לקבל התראה כשחלים שינויים בהרשאות הגישה לפריט, משתמשים במגדיר 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, שמאפשרים לכם לקבוע בצורה מדויקת יותר מתי צריך להפעיל את פונקציית הקריאה החוזרת של הנראות.

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

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

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

כדי להפעיל פעולה אחרי שפריט גלוי למשך תקופה מוגדרת, משתמשים בפרמטר minDurationMs בשינוי onVisibilityChanged. הפרמטר הזה מציין את משך הזמן המינימלי שרכיב ניתן להרכבה צריך להיות גלוי ברציפות כדי שהקריאה החוזרת תופעל. אם הרכיב המורכב מפסיק להיות גלוי לפני שהזמן שנקבע מסתיים, הטיימר מתאפס. ערך ברירת המחדל הוא 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

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

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

במקרים כאלה, משתמשים בפרמטר minFractionVisible בשינוי onVisibilityChanged כדי להגדיר את החלק שצריך להיות על המסך כדי שהרכיב יסומן כגלוי. הוא תומך בערכים מסוג 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

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