ViewPager2 (Android)

در این مقاله به بررسی ViewPager2 که نسخه آپدیت شده از ViewPager برای اندروید بوده می‌پردازیم .

تفاوت ViewPager2 با ViewPager

• بر پایه RecyclerView هست
• می‌تونه به صورت Vertical هم باشه
• ساپورت RTL
• تغییرات Callback ها
• استفاده از ویژگی های Adapter در RecyclerView برای ViewPager2 مثل DiffUtil و ...

پیاده سازی

فرض بر اینه که قراره صفحاتی داشته باشیم که هر کدوم یک متن رو برای ما نشون بدن و این صفحات به صورت Pager نشون داده بشن ، با توجه به مواردی که بالا گفتم به این موارد نیاز داریم :

• لیستی از کلمات
• کلاس Adapter و ViewHolder

برای شروع از کلاس Adapter و ViewHolder کار رو آغاز می‌کنیم :

نکته : در کاتلین زمانی که در تابعی صرفا می‌خواهیم یک مقدار رو return کنیم لزومی به نوشتن بدنه نیست و فقط باید اون تابع رو برابر مقداری که می‌خواهیم قرار بدیم ، مثل تابع getItemCount در کدِ بالا

کارایی کد مشخصه ، یک لیستی از String ها گرفته و اون رو به TextView میده ، چیزی که قبلا هم در Adapter ها دیدیم ، حالا برای ViewPager اول در صفحه و layout اضافه می‌کنیم :

ابتدا در gradle :

implementation 'androidx.viewpager2:viewpager2:1.1.0-alpha01'

سپس در layout :

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

اگه می‌خواید به صورت vertical باشه این خط رو هم باید اضافه کنید :

android:orientation="vertical"

حالا خیلی راحت Adapter رو به ViewPager2 وصل می‌کنیم :

یک راه دیگه هم برای پیاده سازی هست که دیگه نیازی به Adapter نیست و اون FragmentStateAdapter هست (کد مربوط به این تیکه در لینکِ گیتی که انتهای مقاله می‌ذارم نیست) ، در کد پایین ما لیستی از فرگمنت ها رو به ViewPager2 پاس دادیم :

وصل کردن این Adapter به ViewPager2 مثل قبلی میشه و نکته جدیدی نداره .

تغییرات صفحات

اما برای CallBack ها ، وقتی که می‌خوایم اسکرول شدن ViewPager2 رو بفهمیم :

تابع rScrollStateChanged سه وضعیت رو برای ما نشون میده :

Dragging : شروع به تکان دادن

Settling : تنظیم بعد از اتمام تکان دادن

Idle : بعد از تنظیم به حالت پایدار در آمدن

تابع Scrolled در زمانی که در حال اسکرول هستیم مقادیری مثل محاسبات میزان تکون خوردن (offset) و صفحه ای که در حال نمایشه (لزوما ثابت نشده ، اگه شما در حال اسکرول به صفحه سمت چپ باشید به شما عددِ مربوط به صفحه سمت چپ نشون داده میشه اما اگه در حال اسکرول به صفحه سمت راست باشید ، عددِ مربوط به همون صفحه ای که الان توش هستید نشون داده می‌شه ، مثل تابع جزء صحیح) رو به ما می‌ده :

و تابع Selected هم بعد از اینکه صفحه به حالت ثابت در اومد position مربوط به اون صفحه رو نشون می‌ده :

برای اسکرول کردن در کد هم می‌تونید از تابع setCurrentItem استفاده کنید ، این تابع دو پارامتر داره که اولیش یک Int هست که position مربوط به اون صفحه است و دومی یک boolean (به صورت پیش‌فرش true) هست که مشخص کننده اینه که به صورت روان (smooth) اسکرول بشه یا یهویی !

pager.setCurrentItem(2,false)

اعمال انیمیشن

‌می‌تونید برای اسکرول کردن صفحات از انیمیشن استفاده کنید برای مثال انیمیشن fade :

متغیر position برخلاف مثال‌های بالا مقدار Int نیست بلکه از مقداری اعشاری در بازه [1,-1) هست ، در این مثال مقدار آلفای صفحه برابر یک منهای قدرمطلقِ position حساب شده که باعث میشه هر چی صفحه به وسط نزدیک تر بشه آلفای بیشتری داشته باشه ، شما می‌تونید با دستکاری های مختلف مثل scale ، رنگ و ... صفحات زیبایی بسازید !

می‌تونید کدهای مربوط به این مقاله در این قسمت مشاهد کنید :

من رو در لینکدین و اینستاگرام دنبال کنید ???