كيفية العمل مع ViewPager2

لم يمر الكثير من الوقت منذ 7 فبراير 2019 ، أصدرت Google إصدار alpha من Android ViewPager2 . يمكن العثور على مزيد من المعلومات حول هذا الإصدار هنا . الآن ، لنرى ما يدور حول ViewPager2.

ميزات جديدة

• تخطيط الدعم من اليمين إلى اليسار ،
• دعم الاتجاه الرأسي ،
• تحسين PageChangeListener .

ما الذي تغير؟

• PagerAdapter استبداله RecyclerView.Adapter ،
• FragmentStatePagerAdapter استبداله FragmentStateAdapter.

تم إصدار ViewPager2 لنظام Android X ، لذا إذا كنت ترغب في استخدامه ، فيجب أن يستخدم مشروعك نظام Android X. دعنا نرى كيف يمكننا استخدام ViewPager2 الجديد.

إضافة التبعية

أضف التبعية التالية إلى ملف build.gradle مستوى التطبيق:

 dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01" } 

بعد ذلك ، قم بمزامنة المشروع الخاص بك.

تعديل

أضف عنصر واجهة مستخدم ViewPager2 إلى نشاطك أو ViewPager2 :

 <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent"/> 

لنقم بإنشاء تخطيط للصفحة التي سيتم عرضها في ViewPager2:

item_page.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/tvTitle" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_centerInParent="true" tools:text= "item" android:textSize="32sp" android:layout_height="wrap_content" /> </RelativeLayout> 

بعد ذلك نحتاج إلى إنشاء محول لـ ViewPager2. هذا هو الأكثر إثارة للاهتمام. لهذا يمكننا استخدام RecyclerView.Adapter . أليس هذا رائعًا؟

ViewPagerAdapter.kt

 class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH = PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)) override fun getItemCount(): Int = colors.size override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run { tvTitle.text = "item $position" container.setBackgroundResource(colors[position]) } } class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView) 

هذا هو نفس المحول الذي نستخدمه في RecyclerView منتظم ، وهو يعمل تمامًا مع ViewPager2.

الخطوة الأخيرة ، قم بتثبيت المحول لـ ViewPager2:

 class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager2.adapter = ViewPagerAdapter() } } 

هذا كل شئ! نحصل على نفس النتيجة عند استخدام ViewPager القديم مع PagerAdapter:

التمرير العمودي

في السابق ، كان عليك استخدام مكتبات الجهات الخارجية لتنفيذ التمرير العمودي ، لأن حتى الآن ، لم تقدم Google مثل هذه الفرصة. يدعم ViewPager2 الجديد الآن التمرير العمودي. فقط قم بتغيير الاتجاه في ViewPager2 وسيتم تمكين التمرير العمودي. سهل جدا!

 viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL 

هذه هي النتيجة:

باستخدام FragmentStateAdapter

يمكنك أيضًا استخدام الأجزاء كصفحات ، كما في ViewPager القديم. هناك FragmentStateAdapter لهذا. دعونا نرى كيف يمكننا استخدامها.

بادئ ذي بدء ، نحن بحاجة إلى إنشاء جزء:

 class PagerFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.item_page, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { container.setBackgroundResource(it.getInt("color")) tvTitle.text = "Item ${it.getInt("position")}" } } } 

الآن سنقوم بإنشاء محول ل ViewPager2. سنقوم بتمرير FragmentManager إلى مُنشئه ، والذي سيتولى إدارة الأجزاء:

 class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun getItem(position: Int): Fragment = PagerFragment().apply { arguments = bundleOf( "color" to colors[position], "position" to position ) } override fun getItemCount(): Int = colors.size } 

الآن تثبيت هذا المحول الجديد في ViewPager2 ، والانتهاء من ذلك:

 viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager) 

تحسين OnPageChangeCallback

في ViewPager القديم ، تم تصميم واجهة OnPageChangeListner لاستقبال أحداث تغيير / تمرير الصفحة. وكان غير مريح للغاية ، ل نحن بحاجة إلى تجاوز جميع الطرق الثلاثة ( onPageScrollStateChanged أو onPageScrolled أو onPageSelected ) ، حتى لو لم نكن نريد ذلك.

 oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) { //   } override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { //   } override fun onPageSelected(position: Int) { // ,    } }) 

الآن لدينا OnPageChangeCallback ، فئة مجردة مع أساليب غير مجردة. وهذا يعني حرفيًا أننا لسنا بحاجة إلى إعادة تعريف كل هذه الطرق ، يمكننا ببساطة إعادة تعريف الأساليب التي نحتاجها أو التي نريد استخدامها. لذلك ، على سبيل المثال ، يمكننا تتبع أحداث تغيير الصفحة:

 viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position) //    } }) 

تحذير!

نظرًا لأن ViewPager2 موجود في إصدار ألفا ، فهناك بعض وظائف ViewPager القديمة التي لم يتم تنفيذها بعد أو لا تعمل بشكل صحيح في هذا الإصدار.

المشكلات المعروفة حسب الوثائق:

• ClipToPadding،
• لا تكامل مع TabLayout ،
• لا يوجد تحكم خارج الشاشة ،
• لا يمكن تعيين عرض الصفحة (100٪ افتراضيًا)

مزيد من المعلومات حول المشكلات المعروفة هنا . آمل أن يتم إصلاح كل هذا في التحديثات القادمة. إنني أتطلع إلى إصدار مستقر من ViewPager2 الجديد. حتى ذلك الحين ، رمز جيد للجميع!