קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
כדאי ליצור רשימת דפים כדי שהמשתמשים יוכלו לגלול כדי לגשת לתוכן גדול מדי שלא נכנס למסך אחד. רשימות של דפי נחיתה אופקיים יכולות לעזור למשתמשים לנווט בתוכן כמו תמונות, גלריות או קרוסלות של מוצרים. רשימות של דפים אנכיים שימושיות באפליקציות עם הרבה תוכן, שבהן המשתמשים עשויים לגלול בין מספר רב של פריטים, כמו מאמרים.
תאימות גרסאות
כדי להטמיע את הקוד הזה, צריך להגדיר את minSDK של הפרויקט לרמת API 21 ואילך.
יחסי תלות
יצירת רשימת דפים
אפשר להגדיר רשימת דפים אופקית או אנכית, בהתאם לכיוון הנדרש באפליקציה. הקוד הבא יוצר רשימת דפים אופקית שמוצגים בה 10 פריטים:
נקודות עיקריות לגבי הקוד
הרכיב הניתן לקישור HorizontalPager מציג רשימה של פריטים שאפשר לגלול בה אופקית.
כדי ליצור רשימת דפים אנכית, צריך להשתמש במקום זאת ב-composable VerticalPager.
כל דף ברשימה מכיל אובייקט Text שמוצגת בו המחרוזת 'Page' ומספר האינדקס של הדף.
מופע של rememberPagerState() שומר את המצב של הדף כשהמשתמש מנווט אל דף אחר, ומציג את אותו הדף כשהמשתמש חוזר אליו.
תוצאות
איור 1. הדגמה של HorizontalPager.
אוספים שמכילים את המדריך הזה
המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:
הצגת רשימה או רשת
רשימות ורשתות מאפשרות להציג באפליקציה קולקציות בצורה חזותית נעימה וקלה לשימוש למשתמשים.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-02-06 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-02-06 (שעון UTC)."],[],[],null,["# Display a paging list\n\n\u003cbr /\u003e\n\nCreate a paging list so that users can scroll to access content too large to fit\non a single screen. Horizontal paging lists can help users navigate through\ncontent such as images, slideshows, or product carousels. Vertical paging lists\nare useful for content-heavy apps where users may need to scroll through a large\nnumber of items, such as articles.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a paging list\n--------------------\n\nYou can configure a horizontal or vertical paging list, depending on the\norientation required for your app. The following code creates a horizontal\npaging list displaying 10 items:\n\n val pagerState = rememberPagerState(pageCount = {\n 10\n })\n HorizontalPager(state = pagerState) { page -\u003e\n Text(\n text = \"Page: $page\",\n modifier = Modifier.fillMaxWidth()\n )\n }\n\n### Key points about the code\n\n- The [`HorizontalPager`](/reference/kotlin/androidx/compose/foundation/pager/package-summary#HorizontalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,kotlin.Function2)) composable provides a horizontally scrollable list of items.\n - To create a vertical paging list, use the [`VerticalPager`](/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,kotlin.Function2)) composable instead.\n- Each page in the list contains a [`Text`](/reference/kotlin/androidx/compose/material/package-summary#Text(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.collections.Map,kotlin.Function1,androidx.compose.ui.text.TextStyle)) object that displays the string \"Page\" and the page index number.\n- An instance of [`rememberPagerState()`](/reference/kotlin/androidx/compose/foundation/pager/package-summary#rememberPagerState(kotlin.Int,kotlin.Float)) persists a page's state when the user navigates away, and displays the same page when the user returns to it.\n\nResults\n-------\n\n**Figure 1.** Demo of `HorizontalPager`.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\n### Compose basics (video collection)\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
