הוספת אינדיקטור דף בהתאמה אישית

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

תאימות גרסאות

כדי להטמיע את הקוד הזה, צריך להגדיר את minSDK של הפרויקט לרמת API 21 ואילך.

יחסי תלות

יצירת סרגל גלילה אופקי עם אינדיקטור דפים בהתאמה אישית

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

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

נקודות עיקריות לגבי הקוד

  • הקוד מטמיע HorizontalPager, שמאפשר להחליק אופקית בין דפי תוכן שונים. במקרה כזה, מספר הדף מוצג בכל דף.
  • הפונקציה rememberPagerState() מאתחלת את ה-pager ומגדירה את מספר הדפים ל-4. הפונקציה הזו יוצרת אובייקט מצב שמנטר את הדף הנוכחי ומאפשר לכם לשלוט בחלונית הדפים.
  • המאפיין pagerState.currentPage משמש לקביעת אינדיקטור הדף שצריך להדגיש.
  • אינדיקטור הדף מופיע בחלונית של חלוקת דפים עם הטמעה של Row.
  • לכל דף בחלונית הדפים מצויר עיגול בגודל 16dp. האינדיקטור של הדף הנוכחי מוצג כ-DarkGray, ואילו שאר עיגולי האינדיקטור מוצגים כ-LightGray.
  • הרכיב Text שאפשר להוסיף ל-HorizontalPager מציג את הטקסט 'דף: [מספר הדף]' בכל דף.

תוצאות

איור 1. מכשיר קריאה שמציג אינדיקטור עגול מתחת לתוכן.

אוספים שמכילים את המדריך הזה

המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:

רשימות ורשתות מאפשרות להציג באפליקציה קולקציות בצורה חזותית נעימה וקלה לשימוש למשתמשים.
אוסף מדריכים מהירים
איך פונקציות מורכבות מאפשרות ליצור בקלות רכיבי ממשק משתמש יפים על סמך מערכת העיצוב של Material Design.
אוסף מדריכים מהירים

יש לכם שאלות או משוב

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