إنشاء طرق عرض التمرير السريع باستخدام علامات التبويب باستخدام ViewPager
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
طرق عرض التمرير السريع تتيح لك التنقل بين الشاشات التابعة، مثل علامات التبويب، وذلك باستخدام
إيماءة إصبع أفقية (تمرير سريع). يشار أيضًا إلى نمط التنقل هذا
على شكل ترقيم أفقي. يوضح هذا المستند كيفية إنشاء تخطيط علامة تبويب باستخدام
طرق عرض التمرير السريع للتبديل بين علامات التبويب، إلى جانب كيفية عرض شريط العناوين
بدلاً من علامات التبويب.
تنفيذ عروض التمرير السريع
يمكنك إنشاء طرق عرض التمرير السريع باستخدام
التطبيق المصغّر 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
يوفر لك TabLayout
طريقة لعرض علامات التبويب أفقيًا. عند استخدامها مع ViewPager وTabLayout
توفّر واجهة مألوفة للتنقل بين الصفحات في طريقة العرض بالتمرير السريع.
الشكل 1.TabLayout بأربع
.
لتضمين TabLayout في ViewPager، أضِف عنصر <TabLayout> داخله.
العنصر <ViewPager>، كما هو موضح في المثال التالي:
استخدام
setupWithViewPager()
لربط TabLayout بـ ViewPager، كما هو موضح في المثال التالي.
تتم تعبئة علامات التبويب الفردية في TabLayout تلقائيًا بالصفحة.
من الكتب من PagerAdapter.
للحصول على إرشادات تصميم إضافية لتخطيطات علامات التبويب، راجع تصميم المواد
وثائق
.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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)."]]