إنشاء طرق عرض التمرير السريع باستخدام علامات التبويب باستخدام 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 the 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 :-Pargs.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 the 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| **Caution:** ViewPager has been deprecated and replaced with the [`ViewPager2`](/reference/kotlin/androidx/viewpager2/widget/ViewPager2) library. For more information, read the [ViewPager2 migration\n| guide](/training/animation/vp2-migration), then learn how to [create swipe views\n| with tabs using ViewPager2](/guide/navigation/navigation-swipe-view-2).\n\nSwipe views let you navigate between sibling screens, such as tabs, with a\nhorizontal finger gesture, or *swipe* . This navigation pattern is also referred\nto as *horizontal paging*. This topic teaches you how to create a tab layout\nwith swipe views for switching between tabs, along with how to show a title\nstrip instead of tabs.\n\nImplement swipe views\n---------------------\n\nYou can create swipe views using AndroidX's\n[`ViewPager`](/reference/kotlin/androidx/viewpager/widget/ViewPager) widget.\nTo use a `ViewPager` and tabs, you need to add dependencies for\n[`ViewPager`](/jetpack/androidx/releases/viewpager#androidx-deps) and\n[Material Components](https://material.io/develop/android/docs/getting-started/)\nto 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 uses 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, you need to hook this layout to\na [`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\nAs an example, here is how you might use `FragmentStatePagerAdapter` to swipe\nacross a collection of `Fragment` objects: \n\n### Kotlin\n\n```kotlin\nclass CollectionDemoFragment : Fragment() {\n // When requested, this adapter returns a DemoObjectFragment\n // representing 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,\n// NOT a 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\n// object in the 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\n // representing 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,\n// NOT a 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 :-P\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\n// object in the 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 sections show how you can add tabs to help facilitate navigation\nbetween pages.\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 together with a `ViewPager`, a\n`TabLayout` provides a familiar interface for navigating between pages in a\nswipe view.\n\n**Figure 1.** A `TabLayout` with four tabs.\n\nTo include a `TabLayout` in a `ViewPager`, add a `\u003cTabLayout\u003e` element inside\nthe `\u003cViewPager\u003e` element, as shown below: \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\nNext, use\n[`setupWithViewPager()`](/reference/com/google/android/material/tabs/TabLayout#setupWithViewPager(android.support.v4.view.ViewPager))\nto link the `TabLayout` to the `ViewPager`. The individual tabs in the\n`TabLayout` are automatically populated with the page titles from the\n`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 trying to fit 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\n[Material Design documentation for tabs](https://material.io/design/components/tabs.html)."]]