آموزش کامل کار با ViewPager2 و TabLayout

ViewPager2 در واقع نسخه ارتقا یافته ViewPager هستش که تقریبا 2 سالی میشه که توسط گوگل برای اندروید عرضه شده.

ViewPager ویو ای هستش که به واسطه اون میتونیم چندین Fragment رو کنار نشون بدیم.

اگه بخوام یه مثال بزنم که دیده باشی، میتونم صفحه اول برنامه WhatsApp (واتساپ) رو بگم.

توجه کنی بالای صفحه چند تا گزینه داره که با زدن هر کدوم یک فرگمنتی رو نشون میده.

برای اینکار از TabLayout کنار ViewPager استفاده کردن.

ولی وقتی ViewPager بود، گوگل چرا نسخه دوم یعنی ViewPager2 رو معرفی کرد؟!

فرق بین ViewPager و ViewPager2 چیه؟

1) تغییر ساختار

توی این نسخه ساختار ViewPager عوض شده و به حالت recycle (بازیافت) تغییر کرده.

از نظر نحوه عملکرد درست مثل RecyclerView عمل میکنه.

2) انیمیشن ها

توی این نسخه برای اعمال انیمیشن از حالت data-set change استفاده شده.

3) دو جهته بودن

توی نسخه دوم از ViewPager، علاوه بر اینکه میتونی به صورت افقی اسکرول کنی.

قابلیت اسکرول به صورت عمودی رو هم داره.

یعنی هم چپ و راست اسکرول میشه و هم بالا و پایین?

نمایش دمو این پست

اگه دمو بالا رو کامل دیده باشی، متوجه شدی که توی این پست قراره چه چیزی رو آموزش بدم.

این دمو از یه ViewPager2 همراه با TabLayout استفاده شده که 3 تا فرگمنت رو نشون میده.

توی هرکدوم از این فرگمنت ها یک عکسی رو قرار دادم (هرچیزی بخوای میتونی قرار بدی).

برای جابجایی بین صفحات، هم میتونی روی آیتم های بالا بزنی و جابجا بشی و هم میتونی با انگشتت سمت چپ و راست swipe کنی.

آموزش استفاده از ViewPager2 و TabLayout در اندروید

برای استفاده از این ویوها نیازی نیست که کتابخونه خاصی به پروژه خودت اضافه کنی.

این ویوها توی کتابخونه های اصلی اندروید قرار دارن، پس میتونی خیلی راحت ازشون استفاده کنی.

برای ساختن این نوع طرح ها به چه چیزهای نیاز داریم؟

برای ساختن این پروژه ما نیاز به یک Activity داریم تا بتونیم ViewPager و TabLayout رو نشون بدیم.

بعد از اون به تعداد صفحاتی که داریم نیاز داریم فرگمنت میسازیم و کدهای موردنظر خودمون رو توش قرار میدیم.

و در نهایت هم به یک Adapter نیاز داریم که ارتباط بین فرگمنت ها با ویوهای اکتیویتی رو برامون برقرار کنه.

کدهای مربوط به Activity

توی این بخش ما نیاز داریم که کدهای خودمون رو هم توی XML بنویسیم و هم توی کلاس مربوط به اکتیویتی.

از XML برای قرار دادن ویوها و از کلاس هم برای ایجاد ارتباط بین ویوها و Adapter استفاده میکنیم.

کدهای مربوط به XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bgLight">
    <!--TabLayout-->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/itemColorStroke"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIconTint="@color/itemColor"
        app:tabIndicatorColor="@color/lightYellow"
        app:tabSelectedTextColor="@color/lightYellow"
        app:tabTextColor="@color/itemColor" />
    <!--ViewPager 2-->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

کدهای مربوط به کلاس

class MainActivity : AppCompatActivity() {

    private val housesArray = arrayOf(
        "House 1",
        "House 2",
        "House 3"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val adapter = ViewPagerAdapter(supportFragmentManager, lifecycle)
        viewPager.adapter = adapter

        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = housesArray[position]
        }.attach()
    }
}

خب کدها مروبط به اکتیویتی تموم شد.

الان برای کلاس Adapter واست ارور نشون میده که جلوتر برطرفش میکنیم.

کدهای مربوط به Fragment

فرگمنت هم مثل اکتیویتی هستش، 2 بخش XML و کلاس داره.

کدهای مربوط به XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/house5"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop"/>

</FrameLayout>

کدهای مربوط به کلاس

class FragmentHouse1 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_house1, container, false)
    }
}

هم اکتیویتی خودمون رو درست کردیم و هم فرگمنت های خودمون رو.

الان دیگه نوبت وصل کردن این فرگمنت ها به آیتم های اکتیویتی هستش.

کدهای مربوط به Adapter

class ViewPagerAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle) :
    FragmentStateAdapter(fragmentManager, lifecycle) {

    private val NUM_TABS = 3
    
    override fun getItemCount(): Int {
        return NUM_TABS
    }

    override fun createFragment(position: Int): Fragment {
        when (position) {
            0 -> return FragmentHouse1()
            1 -> return FragmentHouse2()
        }
        return FragmentHouse3()
    }
}

با اضافه کردن تکه کد مربوط به Adapter ارور توی Activity هم برطرف میشه.

دیگه کار تمومه?

به همین راحتی، دیدی چقدر راحت بود؟?

توی این پست سعی کردم که آموزش کار با نسخه دوم ViewPager رو برات توضیح بدم و بگم که چه فرقی با نسخه اول میکنه.

توی پست های بعدی حالت عمودی و استفاده از انیمیشن های جذاب رو هم آموزش میدم.