מעקב אחר חשיפה ב-Compose

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

• ‫onVisibilityChanged – משנה הגישה הזה מודיע לכם כשמשתנה מצב החשיפה של פונקציית Composable. הוא אידיאלי להפעלת פעולה או תופעת לוואי בכל פעם שהקומפוזיציה הופכת לגלויות.
• ‫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.

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

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

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