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

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

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