קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
תצוגות החלקה מאפשרות לנווט בין מסכים אחים, כמו כרטיסיות, עם
תנועה אופקית באצבע אופקית (החלקה). דפוס הניווט הזה נקרא גם
כחלוקה אופקית. במסמך הזה מוסבר איך ליצור פריסת כרטיסיות
תצוגות החלקה כדי לעבור בין כרטיסיות, וגם איך להציג שורת כותרת
במקום בכרטיסיות.
הטמעת תצוגות החלקה
אפשר ליצור תצוגות החלקה באמצעות
הווידג'ט ViewPager. שפת תרגום
משתמשים ב-ViewPager ובכרטיסיות, מוסיפים יחסי תלות
Viewpager וב-
חומר
רכיבים
בפרויקט שלך.
כדי להגדיר את הפריסה עם ViewPager, צריך להוסיף את הרכיב <ViewPager>
פריסת XML. לדוגמה, אם כל דף בתצוגת ההחלקה צריך לקבל את
בכל הפריסה, והפריסה שלך נראית כך:
כדי להוסיף תצוגות צאצא שמייצגות כל דף, צריך להצמיד את הפריסה הזו ל
PagerAdapter אפשר
בוחרים בין שני סוגים של מתאמים מובנים:
FragmentPagerAdapter:
להשתמש באפשרות הזו כשמנווטים בין מספר קטן וקבוע של מסכים זהים.
FragmentStatePagerAdapter:
השתמשו בה כשאתם עוברים בין מספר לא ידוע של דפים.
FragmentStatePagerAdapter מבצע אופטימיזציה של השימוש בזיכרון על ידי השמדה של מקטעים
בזמן שהמשתמש מנווט.
הנה דוגמה לאופן שבו אפשר להשתמש ב-FragmentStatePagerAdapter כדי להחליק לרוחב
אוסף של Fragment אובייקטים:
Kotlin
classCollectionDemoFragment:Fragment(){// When requested, this adapter returns a DemoObjectFragment, representing// an object in the collection.privatelateinitvardemoCollectionPagerAdapter:DemoCollectionPagerAdapterprivatelateinitvarviewPager:ViewPageroverridefunonCreateView(inflater:LayoutInflater,container:ViewGroup?,savedInstanceState:Bundle?):View? {returninflater.inflate(R.layout.collection_demo,container,false)}overridefunonViewCreated(view:View,savedInstanceState:Bundle?){demoCollectionPagerAdapter=DemoCollectionPagerAdapter(childFragmentManager)viewPager=view.findViewById(R.id.pager)viewPager.adapter=demoCollectionPagerAdapter}}// Since this is an object collection, use a FragmentStatePagerAdapter, not a// FragmentPagerAdapter.classDemoCollectionPagerAdapter(fm:FragmentManager):FragmentStatePagerAdapter(fm){overridefungetCount():Int=100overridefungetItem(i:Int):Fragment{valfragment=DemoObjectFragment()fragment.arguments=Bundle().apply{// Our object is just an integer :-PputInt(ARG_OBJECT,i+1)}returnfragment}overridefungetPageTitle(position:Int):CharSequence{return"OBJECT ${(position+1)}"}}privateconstvalARG_OBJECT="object"// Instances of this class are fragments representing a single object in your// collection.classDemoObjectFragment:Fragment(){overridefunonCreateView(inflater:LayoutInflater,container:ViewGroup?,savedInstanceState:Bundle?):View{returninflater.inflate(R.layout.fragment_collection_object,container,false)}overridefunonViewCreated(view:View,savedInstanceState:Bundle?){arguments?.takeIf{it.containsKey(ARG_OBJECT)}?.apply{valtextView:TextView=view.findViewById(android.R.id.text1)textView.text=getInt(ARG_OBJECT).toString()}}}
Java
publicclassCollectionDemoFragmentextendsFragment{// When requested, this adapter returns a DemoObjectFragment, representing// an object in the collection.DemoCollectionPagerAdapterdemoCollectionPagerAdapter;ViewPagerviewPager;@Nullable@OverridepublicViewonCreateView(@NonNullLayoutInflaterinflater,@NullableViewGroupcontainer,@NullableBundlesavedInstanceState){returninflater.inflate(R.layout.collection_demo,container,false);}@OverridepublicvoidonViewCreated(@NonNullViewview,@NullableBundlesavedInstanceState){demoCollectionPagerAdapter=newDemoCollectionPagerAdapter(getChildFragmentManager());viewPager=view.findViewById(R.id.pager);viewPager.setAdapter(demoCollectionPagerAdapter);}}// Since this is an object collection, use a FragmentStatePagerAdapter, not a// FragmentPagerAdapter.publicclassDemoCollectionPagerAdapterextendsFragmentStatePagerAdapter{publicDemoCollectionPagerAdapter(FragmentManagerfm){super(fm);}@OverridepublicFragmentgetItem(inti){Fragmentfragment=newDemoObjectFragment();Bundleargs=newBundle();// Our object is just an integer.args.putInt(DemoObjectFragment.ARG_OBJECT,i+1);fragment.setArguments(args);returnfragment;}@OverridepublicintgetCount(){return100;}@OverridepublicCharSequencegetPageTitle(intposition){return"OBJECT "+(position+1);}}// Instances of this class are fragments representing a single object in your// collection.publicclassDemoObjectFragmentextendsFragment{publicstaticfinalStringARG_OBJECT="object";@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){returninflater.inflate(R.layout.fragment_collection_object,container,false);}@OverridepublicvoidonViewCreated(@NonNullViewview,@NullableBundlesavedInstanceState){Bundleargs=getArguments();((TextView)view.findViewById(android.R.id.text1)).setText(Integer.toString(args.getInt(ARG_OBJECT)));}}
בקטע הבא מוסבר איך להוסיף כרטיסיות כדי להקל על הניווט בין הכרטיסיות
הדפים האלה.
הוספת כרטיסיות באמצעות פריסת כרטיסייה
TabLayout מספק
דרך להציג כרטיסיות בצורה אופקית. בשימוש עם ViewPager, TabLayout
מספק ממשק מוכר לניווט בין דפים בתצוגת החלקה.
איור 1.TabLayout עם ארבע
.
כדי לכלול TabLayout בתוך ViewPager, צריך להוסיף רכיב <TabLayout> בתוך
את הרכיב <ViewPager> כמו בדוגמה הבאה:
כדאי להשתמש
setupWithViewPager()
כדי לקשר את TabLayout אל ViewPager, כמו בדוגמה הבאה.
הכרטיסיות הנפרדות ב-TabLayout מאוכלסות באופן אוטומטי בדף.
פריטים מהPagerAdapter.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון 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-07-27 (שעון UTC)."],[],[],null,["# Create swipe views with tabs using ViewPager\n\n*Swipe views* let you navigate between sibling screens, such as tabs, with a\nhorizontal finger gesture (*swipe* ). This navigation pattern is also referred to\nas *horizontal paging*. This document shows how to create a tab layout with\nswipe views for switching between tabs, along with how to show a title strip\ninstead of tabs.\n| **Note:** For swiping views, we recommend the [`ViewPager2`](/reference/kotlin/androidx/viewpager2/widget/ViewPager2) library. For more information, see [Create swipe views with tabs using\n| ViewPager2](/guide/navigation/navigation-swipe-view-2) and [the ViewPager2\n| migration guide](/training/animation/vp2-migration).\n\nImplement swipe views\n---------------------\n\nYou can create swipe views using AndroidX's\n[`ViewPager`](/reference/kotlin/androidx/viewpager/widget/ViewPager) widget. To\nuse `ViewPager` and tabs, add dependencies on\n[`Viewpager`](/jetpack/androidx/releases/viewpager#androidx-deps) and on\n[Material\nComponents](https://material.io/develop/android/docs/getting-started/)\nin your project.\n\nTo set up your layout with `ViewPager`, add the `\u003cViewPager\u003e` element to your\nXML layout. For example, if each page in the swipe view needs to consume the\nentire layout, then your layout looks like this: \n\n \u003candroidx.viewpager.widget.ViewPager\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n android:id=\"@+id/pager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\" /\u003e\n\nTo insert child views that represent each page, hook this layout to a\n[`PagerAdapter`](/reference/androidx/viewpager/widget/PagerAdapter). You can\nchoose between two kinds of built-in adapters:\n\n- [`FragmentPagerAdapter`](/reference/androidx/fragment/app/FragmentPagerAdapter): use this when navigating between a small, fixed number of sibling screens.\n- [`FragmentStatePagerAdapter`](/reference/androidx/fragment/app/FragmentStatePagerAdapter): use this when paging across an unknown number of pages. `FragmentStatePagerAdapter` optimizes memory usage by destroying fragments as the user navigates away.\n\nHere's an example of how you can use `FragmentStatePagerAdapter` to swipe across\na collection of `Fragment` objects: \n\n### Kotlin\n\n```kotlin\nclass CollectionDemoFragment : Fragment() {\n // When requested, this adapter returns a DemoObjectFragment, representing\n // an object in the collection.\n private lateinit var demoCollectionPagerAdapter: DemoCollectionPagerAdapter\n private lateinit var viewPager: ViewPager\n\n override fun onCreateView(inflater: LayoutInflater,\n container: ViewGroup?,\n savedInstanceState: Bundle?): View? {\n return inflater.inflate(R.layout.collection_demo, container, false)\n }\n\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n demoCollectionPagerAdapter = DemoCollectionPagerAdapter(childFragmentManager)\n viewPager = view.findViewById(R.id.pager)\n viewPager.adapter = demoCollectionPagerAdapter\n }\n}\n\n// Since this is an object collection, use a FragmentStatePagerAdapter, not a\n// FragmentPagerAdapter.\nclass DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {\n\n override fun getCount(): Int = 100\n\n override fun getItem(i: Int): Fragment {\n val fragment = DemoObjectFragment()\n fragment.arguments = Bundle().apply {\n // Our object is just an integer :-P\n putInt(ARG_OBJECT, i + 1)\n }\n return fragment\n }\n\n override fun getPageTitle(position: Int): CharSequence {\n return \"OBJECT ${(position + 1)}\"\n }\n}\n\nprivate const val ARG_OBJECT = \"object\"\n\n// Instances of this class are fragments representing a single object in your\n// collection.\nclass DemoObjectFragment : Fragment() {\n\n override fun onCreateView(inflater: LayoutInflater,\n container: ViewGroup?,\n savedInstanceState: Bundle?): View {\n return inflater.inflate(R.layout.fragment_collection_object, container, false)\n }\n\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n arguments?.takeIf { it.containsKey(ARG_OBJECT) }?.apply {\n val textView: TextView = view.findViewById(android.R.id.text1)\n textView.text = getInt(ARG_OBJECT).toString()\n }\n }\n}\n```\n\n### Java\n\n```java\npublic class CollectionDemoFragment extends Fragment {\n // When requested, this adapter returns a DemoObjectFragment, representing\n // an object in the collection.\n DemoCollectionPagerAdapter demoCollectionPagerAdapter;\n ViewPager viewPager;\n\n @Nullable\n @Override\n public View onCreateView(@NonNull LayoutInflater inflater,\n @Nullable ViewGroup container,\n @Nullable Bundle savedInstanceState) {\n return inflater.inflate(R.layout.collection_demo, container, false);\n }\n\n @Override\n public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {\n demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());\n viewPager = view.findViewById(R.id.pager);\n viewPager.setAdapter(demoCollectionPagerAdapter);\n }\n}\n\n// Since this is an object collection, use a FragmentStatePagerAdapter, not a\n// FragmentPagerAdapter.\npublic class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {\n public DemoCollectionPagerAdapter(FragmentManager fm) {\n super(fm);\n }\n\n @Override\n public Fragment getItem(int i) {\n Fragment fragment = new DemoObjectFragment();\n Bundle args = new Bundle();\n // Our object is just an integer.\n args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);\n fragment.setArguments(args);\n return fragment;\n }\n\n @Override\n public int getCount() {\n return 100;\n }\n\n @Override\n public CharSequence getPageTitle(int position) {\n return \"OBJECT \" + (position + 1);\n }\n}\n\n// Instances of this class are fragments representing a single object in your\n// collection.\npublic class DemoObjectFragment extends Fragment {\n public static final String ARG_OBJECT = \"object\";\n\n @Override\n public View onCreateView(LayoutInflater inflater,\n ViewGroup container, Bundle savedInstanceState) {\n return inflater.inflate(R.layout.fragment_collection_object, container, false);\n }\n\n @Override\n public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {\n Bundle args = getArguments();\n ((TextView) view.findViewById(android.R.id.text1))\n .setText(Integer.toString(args.getInt(ARG_OBJECT)));\n }\n}\n```\n\nThe following section shows how to add tabs to facilitate navigation between\npages.\n\nAdd tabs using a TabLayout\n--------------------------\n\nA [`TabLayout`](/reference/com/google/android/material/tabs/TabLayout) provides\na way to display tabs horizontally. When used with a `ViewPager`, a `TabLayout`\nprovides a familiar interface for navigating between pages in a swipe view.\n\n\n**Figure 1.** A `TabLayout` with four tabs.\n\n\u003cbr /\u003e\n\nTo include a `TabLayout` in a `ViewPager`, add a `\u003cTabLayout\u003e` element inside\nthe `\u003cViewPager\u003e` element, as shown in the following example: \n\n \u003candroidx.viewpager.widget.ViewPager\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n android:id=\"@+id/pager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\u003e\n\n \u003ccom.google.android.material.tabs.TabLayout\n android:id=\"@+id/tab_layout\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\" /\u003e\n\n \u003c/androidx.viewpager.widget.ViewPager\u003e\n\nUse\n[`setupWithViewPager()`](/reference/com/google/android/material/tabs/TabLayout#setupWithViewPager(androidx.viewpager.widget.ViewPager))\nto link the `TabLayout` to the `ViewPager`, as shown in the following example.\nThe individual tabs in the `TabLayout` are automatically populated with the page\ntitles from the `PagerAdapter`. \n\n### Kotlin\n\n```kotlin\nclass CollectionDemoFragment : Fragment() {\n ...\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n val tabLayout = view.findViewById(R.id.tab_layout)\n tabLayout.setupWithViewPager(viewPager)\n }\n ...\n}\n\nclass DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {\n\n override fun getCount(): Int = 4\n\n override fun getPageTitle(position: Int): CharSequence {\n return \"OBJECT ${(position + 1)}\"\n }\n ...\n}\n```\n\n### Java\n\n```java\npublic class CollectionDemoFragment extends Fragment {\n ...\n @Override\n public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {\n TabLayout tabLayout = view.findViewById(R.id.tab_layout);\n tabLayout.setupWithViewPager(viewPager);\n }\n ...\n}\n\npublic class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {\n ...\n @Override\n public int getCount() {\n return 4;\n }\n\n @Override\n public CharSequence getPageTitle(int position) {\n return \"OBJECT \" + (position + 1);\n }\n\n ...\n}\n```\n| **Note:** If you have a large or potentially infinite number of pages, set the `android:tabMode` attribute on your `TabLayout` to `\"scrollable\"`. This prevents `TabLayout` from fitting all tabs on the screen at once and lets users scroll through the list of tabs.\n\nFor additional design guidance for tab layouts, see the [Material Design\ndocumentation for\ntabs](https://material.io/design/components/tabs.html)."]]