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

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

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

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

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

בדומה לכל שאר התוספים, הסדר חשוב כשמשתמשים בתוסף 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

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

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