برای مشاهده لیست علاقه مندی ها وارد شوید!

مشاهده محصولات فروشگاه
0
سبد خرید خالی است.

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

چکیده کوتاه مطلب

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

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

چرا باید از نسخه 2 استفاده کنیم؟

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 رو نشون بدیم.

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

 

من چون 3 تا آیتم داشتم ، برای همین هم 3 تا فرگمنت ساختم

و در نهایت هم به یک 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 و کلاس داره.

 

نکته
همونطور که دیدی من 3 تا فرگمنت دارم که دقیقا شبیه به هم هستن.
توی هرکدومشون فقط از یک تصویر استفاده شده.
برای اینکه دیگه مطلب خیلی شلوغ نشه، من فقط کد یکی از فرگمنت ها رو قرار دادم.
کد بقیه فرگمنت ها هم دقیقا شبیه به همین هستش، با این تفاوت که فقط عکسشون فرق میکنه

کدهای مربوط به 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 رو برات توضیح بدم و بگم که چه فرقی با نسخه اول میکنه.

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

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

0