نماهای تند کشیدن به شما امکان میدهد بین صفحههای همرده، مانند برگهها، با یک اشاره افقی انگشت (تند کشیدن) پیمایش کنید. به این الگوی پیمایش صفحهبندی افقی نیز گفته میشود. این سند نشان میدهد که چگونه یک طرحبندی برگه با نماهای تند کشیدن برای جابهجایی بین برگهها ایجاد کنید، و همچنین چگونه یک نوار عنوان را بهجای برگهها نمایش دهید.
پیادهسازی نماهای تند کشیدن
میتوانید بااستفاده از ابزاره
ViewPager AndroidX، نماهای تند کشیدن ایجاد کنید. برای
استفاده از ViewPager و برگهها، وابستگیها را به
Viewpager و به
Material
Components
در پروژهتان اضافه کنید.
برای راهاندازی چیدمان با ViewPager، عنصر <ViewPager> را به چیدمان XML اضافه کنید. برای مثال، اگر هر صفحه در نمای تند کشیدن باید کل چیدمان را مصرف کند، چیدمان شما به این شکل خواهد بود:
<androidx.viewpager.widget.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
برای درج نماهای فرزند که هر صفحه را نشان میدهد، این چیدمان را به
PagerAdapter متصل کنید. میتوانید
بین دو نوع آداپتور داخلی انتخاب کنید:
FragmentPagerAdapter: از این مورد هنگام پیمایش بین تعداد کمی از صفحههای همرده ثابت استفاده کنید.FragmentStatePagerAdapter: از این مورد هنگام ورق زدن تعداد نامشخصی صفحه استفاده کنید.FragmentStatePagerAdapterبا ازبین بردن قطعهها هنگام خروج کاربر، استفاده از حافظه را بهینه میکند.
در اینجا مثالی از نحوه استفاده از FragmentStatePagerAdapter برای تند کشیدن روی
مجموعهای از اشیای Fragment آورده شده است:
کاتلین
class CollectionDemoFragment : Fragment() { // When requested, this adapter returns a DemoObjectFragment, representing // an object in the collection. private lateinit var demoCollectionPagerAdapter: DemoCollectionPagerAdapter private lateinit var viewPager: ViewPager override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.collection_demo, container, false) } override fun onViewCreated(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. class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) { override fun getCount(): Int = 100 override fun getItem(i: Int): Fragment { val fragment = DemoObjectFragment() fragment.arguments = Bundle().apply { // Our object is just an integer :-P putInt(ARG_OBJECT, i + 1) } return fragment } override fun getPageTitle(position: Int): CharSequence { return "OBJECT ${(position + 1)}" } } private const val ARG_OBJECT = "object" // Instances of this class are fragments representing a single object in your // collection. class DemoObjectFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View { return inflater.inflate(R.layout.fragment_collection_object, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.takeIf { it.containsKey(ARG_OBJECT) }?.apply { val textView: TextView = view.findViewById(android.R.id.text1) textView.text = getInt(ARG_OBJECT).toString() } } }
جاوا
public class CollectionDemoFragment extends Fragment { // When requested, this adapter returns a DemoObjectFragment, representing // an object in the collection. DemoCollectionPagerAdapter demoCollectionPagerAdapter; ViewPager viewPager; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.collection_demo, container, false); } @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager()); viewPager = view.findViewById(R.id.pager); viewPager.setAdapter(demoCollectionPagerAdapter); } } // Since this is an object collection, use a FragmentStatePagerAdapter, not a // FragmentPagerAdapter. public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter { public DemoCollectionPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int i) { Fragment fragment = new DemoObjectFragment(); Bundle args = new Bundle(); // Our object is just an integer. args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1); fragment.setArguments(args); return fragment; } @Override public int getCount() { return 100; } @Override public CharSequence getPageTitle(int position) { return "OBJECT " + (position + 1); } } // Instances of this class are fragments representing a single object in your // collection. public class DemoObjectFragment extends Fragment { public static final String ARG_OBJECT = "object"; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_collection_object, container, false); } @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { Bundle args = getArguments(); ((TextView) view.findViewById(android.R.id.text1)) .setText(Integer.toString(args.getInt(ARG_OBJECT))); } }
بخش زیر نشان میدهد که چگونه میتوان زبانهها را برای تسهیل پیمایش بین صفحهها اضافه کرد.
افزودن زبانه بااستفاده از TabLayout
TabLayout روشی برای نمایش افقی زبانهها ارائه میدهد. وقتی با ViewPager استفاده میشود، TabLayout
میانای آشنایی برای پیمایش بین صفحهها در نمای تند کشیدن ارائه میدهد.
TabLayout با چهار
برگه.برای گنجاندن TabLayout در ViewPager، عنصر <TabLayout> را به داخل عنصر <ViewPager> اضافه کنید، همانطور که در مثال زیر نشان داده شده است:
<androidx.viewpager.widget.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.viewpager.widget.ViewPager>
از
setupWithViewPager()
برای پیوند دادن TabLayout به ViewPager استفاده کنید، همانطور که در مثال زیر نشان داده شده است.
برگههای جداگانه در TabLayout بهطور خودکار با عنوانهای صفحه از PagerAdapter پر میشوند.
کاتلین
class CollectionDemoFragment : Fragment() { ... override fun onViewCreated(view: View, savedInstanceState: Bundle?) { val tabLayout = view.findViewById(R.id.tab_layout) tabLayout.setupWithViewPager(viewPager) } ... } class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) { override fun getCount(): Int = 4 override fun getPageTitle(position: Int): CharSequence { return "OBJECT ${(position + 1)}" } ... }
جاوا
public class CollectionDemoFragment extends Fragment { ... @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { TabLayout tabLayout = view.findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(viewPager); } ... } public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter { ... @Override public int getCount() { return 4; } @Override public CharSequence getPageTitle(int position) { return "OBJECT " + (position + 1); } ... }
برای راهنمایی بیشتر درباره طراحی چیدمانهای برگهای، به اسناد طراحی مواد برای برگهها مراجعه کنید.