با استفاده از ViewPager نماهای کش رفتن را با برگه ها ایجاد کنید
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
نمایشهای تند کشیدن به شما امکان میدهند بین صفحههای خواهر و برادر، مانند برگهها، با اشاره افقی انگشت یا کشیدن انگشت حرکت کنید. این الگوی ناوبری به عنوان صفحه بندی افقی نیز نامیده می شود. این مبحث به شما یاد میدهد که چگونه یک طرحبندی برگه با نمایشهای سوایپ برای جابهجایی بین برگهها، همراه با نحوه نمایش نوار عنوان به جای برگهها ایجاد کنید.
نماهای کش رفتن را پیاده سازی کنید
میتوانید با استفاده از ویجت ViewPager AndroidX، نماهای کششی ایجاد کنید. برای استفاده از ViewPager و تب ها، باید وابستگی هایی برای ViewPager و Material Components به پروژه خود اضافه کنید.
برای تنظیم طرحبندی خود با ViewPager ، عنصر <ViewPager> را به طرحبندی XML خود اضافه کنید. برای مثال، اگر هر صفحه در نمای تند کشیدن از کل طرحبندی استفاده میکند، طرحبندی شما به شکل زیر است:
برای درج نماهای فرزند که هر صفحه را نشان میدهند، باید این طرحبندی را به PagerAdapter متصل کنید. شما می توانید بین دو نوع آداپتور داخلی یکی را انتخاب کنید:
FragmentPagerAdapter : هنگام پیمایش بین تعداد کوچک و ثابتی از صفحههای خواهر و برادر، از آن استفاده کنید.
FragmentStatePagerAdapter : هنگام صفحهبندی در تعداد ناشناختهای از صفحات از آن استفاده کنید. FragmentStatePagerAdapter با از بین بردن قطعات در حین حرکت کاربر، استفاده از حافظه را بهینه می کند.
به عنوان مثال، در اینجا نحوه استفاده از FragmentStatePagerAdapter برای کشیدن انگشت روی مجموعه ای از اشیاء Fragment آورده شده است:
کاتلین
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()}}}
جاوا
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 راهی برای نمایش تب ها به صورت افقی فراهم می کند. هنگامی که یک TabLayout همراه با ViewPager استفاده می شود، یک رابط آشنا برای پیمایش بین صفحات در یک نمای کش رفتن فراهم می کند.
شکل 1.TabLayout با چهار زبانه.
برای گنجاندن TabLayout در ViewPager ، یک عنصر <TabLayout> را در داخل عنصر <ViewPager> اضافه کنید، همانطور که در زیر نشان داده شده است:
در مرحله بعد، از setupWithViewPager() برای پیوند TabLayout به ViewPager استفاده کنید. برگه های جداگانه در TabLayout به طور خودکار با عنوان صفحه از PagerAdapter پر می شوند:
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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)."]]