תצוגת דפים אופקית ב-Jetpack Compose Glimmer

מכשירי XR שמתאימים לשימוש

ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים הבאים.

מידע על סוגי מכשירי XR →

מידע על סוגי מכשירי XR →

ב-Jetpack Compose Glimmer, ‏ GlimmerHorizontalPager היא פריסה שניתנת לגלילה אופקית, והדפים שלה מסודרים ברצף. הוא דומה ל-HorizontalPager הרגיל שנמצא ב-Compose Foundation, אבל הוא מותאם למשקפיים עם תצוגה פנימית עם התנהגויות Glimmer וערכי ברירת מחדל.

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

פרמטרים חשובים ואפשרויות פריסה

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

מידע על כל הפרמטרים הזמינים מופיע במאמרי העזרה.

המלצה להנפשת טקסט

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

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)
GlimmerHorizontalPagerSample.kt

דוגמה: תצוגת דפים אופקית

בדוגמת הקוד הבאה אפשר לראות איך יוצרים רכיב בסיסי של דפדוף אופקי עם 10 דפים, ומציבים רכיב Card בכל דף:

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}
GlimmerHorizontalPagerSample.kt

מידע חשוב על הקוד

• State: מאתחל GlimmerPagerState באמצעות rememberGlimmerPagerState(pageCount = { 10 }) כדי לנהל את המצב של מכשיר הפייג'ר.
• תוכן של משבצת בדף: מקבל את אינדקס הדף page בתוך פונקציית ה-lambda‏ GlimmerPagerScope כדי לעבד כל כרטיס.
• סגנון טקסט של אנימציה חלקה: מעתיק את LocalTextStyle.current ומפעיל במפורש את TextMotion.Animated.
• אינדיקטור אוטומטי של דפים: בניגוד לרכיבי החלפה בין דפים רגילים של Compose שדורשים רכיב אינדיקטור חיצוני, GlimmerHorizontalPager מטמיע כברירת מחדל אינדיקטור של דפים בסגנון נקודות.

אינדיקטורים של הדף

כברירת מחדל, התג GlimmerHorizontalPager מעבד אינדיקטור דף שמבוסס על נקודות באמצעות GlimmerHorizontalPagerDefaults.PageIndicator. האינדיקטור מתאים את ערכת הצבעים שלו באופן אוטומטי:

• הנקודה הפעילה משתמשת בצבע התוכן שנקבע מתוך surface הסמוך ביותר.

אפשר להעביר PageIndicator מותאם אישית כדי לציין צבעים ספציפיים, או להחליף את הנקודה בפריסה מותאמת אישית משלכם:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)
GlimmerHorizontalPagerSample.kt