چکیده کوتاه مطلب
ViewPager2 چند وقتی هستش که توسط گوگل برای اندروید معرفی شده.میدونی فرق بین ViewPager با ViewPager2 چیه؟
چرا باید از نسخه 2 استفاده کنیم؟
اینجا آکادمی نوری هستش! سایت جدید. قراره اینجا کلی باهم بترکونیم. سایت nouri.academy جایگرین nouri.in شده.
برای مشاهده لیست علاقه مندی ها وارد شوید!
مشاهده محصولات فروشگاهViewPager2 در واقع نسخه ارتقا یافته ViewPager هستش که تقریبا 2 سالی میشه که توسط گوگل برای اندروید عرضه شده.
ViewPager ویو ای هستش که به واسطه اون میتونیم چندین Fragment رو کنار نشون بدیم.
اگه بخوام یه مثال بزنم که دیده باشی، میتونم صفحه اول برنامه WhatsApp (واتساپ) رو بگم.
توجه کنی بالای صفحه چند تا گزینه داره که با زدن هر کدوم یک فرگمنتی رو نشون میده.
برای اینکار از TabLayout کنار ViewPager استفاده کردن.
ولی وقتی ViewPager بود، گوگل چرا نسخه دوم یعنی ViewPager2 رو معرفی کرد؟!
توی این نسخه ساختار ViewPager عوض شده و به حالت recycle (بازیافت) تغییر کرده.
از نظر نحوه عملکرد درست مثل RecyclerView عمل میکنه.
توی این نسخه برای اعمال انیمیشن از حالت data-set change استفاده شده.
توی نسخه دوم از ViewPager، علاوه بر اینکه میتونی به صورت افقی اسکرول کنی.
قابلیت اسکرول به صورت عمودی رو هم داره.
یعنی هم چپ و راست اسکرول میشه و هم بالا و پایین?
اگه دمو بالا رو کامل دیده باشی، متوجه شدی که توی این پست قراره چه چیزی رو آموزش بدم.
این دمو از یه ViewPager2 همراه با TabLayout استفاده شده که 3 تا فرگمنت رو نشون میده.
توی هرکدوم از این فرگمنت ها یک عکسی رو قرار دادم (هرچیزی بخوای میتونی قرار بدی).
برای جابجایی بین صفحات، هم میتونی روی آیتم های بالا بزنی و جابجا بشی و هم میتونی با انگشتت سمت چپ و راست swipe کنی.
برای استفاده از این ویوها نیازی نیست که کتابخونه خاصی به پروژه خودت اضافه کنی.
این ویوها توی کتابخونه های اصلی اندروید قرار دارن، پس میتونی خیلی راحت ازشون استفاده کنی.
برای ساختن این پروژه ما نیاز به یک Activity داریم تا بتونیم ViewPager و TabLayout رو نشون بدیم.
بعد از اون به تعداد صفحاتی که داریم نیاز داریم فرگمنت میسازیم و کدهای موردنظر خودمون رو توش قرار میدیم.
و در نهایت هم به یک Adapter نیاز داریم که ارتباط بین فرگمنت ها با ویوهای اکتیویتی رو برامون برقرار کنه.
توی این بخش ما نیاز داریم که کدهای خودمون رو هم توی XML بنویسیم و هم توی کلاس مربوط به اکتیویتی.
از XML برای قرار دادن ویوها و از کلاس هم برای ایجاد ارتباط بین ویوها و Adapter استفاده میکنیم.
<?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 واست ارور نشون میده که جلوتر برطرفش میکنیم.
فرگمنت هم مثل اکتیویتی هستش، 2 بخش 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) } }
هم اکتیویتی خودمون رو درست کردیم و هم فرگمنت های خودمون رو.
الان دیگه نوبت وصل کردن این فرگمنت ها به آیتم های اکتیویتی هستش.
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 رو برات توضیح بدم و بگم که چه فرقی با نسخه اول میکنه.
توی پست های بعدی حالت عمودی و استفاده از انیمیشن های جذاب رو هم آموزش میدم.
توسط محمد نوری
۶
دیبا عضویت در خبرنامه نوری آکادمی همیشه بروز باشید. مطمئن باشید که ایمیل شما در اختیار دیگران قرار نمیگیرد
دانلود سریع و آسان
بدون هیچ معطلی دوره را بلافاصله پس از پرداخت دانلود و آموزش را شروع کنید!دوره های فشرده و کاربردی
تمامی دوره های ما بصورت پروژه محور و کاملا کاربردی آموزش داده می شوند...همگام با استاندارد های جهانی
خیالت راحت باشه، آموزشهایی که اینجا قرار میدیم دقیقا منطبق با استانداردهای جهانی هستشدوره های کاملا فارسی
با دیدن دورهها به زبان فارسی، بجای حفظ کردن کدها خیلی راحت میتونی اونارو عمیق یاد بگیریتوی نوری آکادمی کمکت میکنم بتونی وارد حوزه برنامه نویسی موبایل بشی. الان دیگه موبایل از اون حالت لوکس بودن خارج شده و جز وسایل ضروری افزاد به حساب میاد. پس چه بهتر که بتونی اپلیکیشن هایی بنویسی که در دسترس عموم مردم قرار بگیره.خوشحال میشم توی این مسیر با من همراه باشی تا بتونم کمکت کنم.
به امید روزهای بهتر
با خبرنامه نوری آکادمی بهتر و راحت تر در دسترسیم...
از مشخصات شما برای مقاصد تبلیغاتی استفاده نخواهیم کرد.تمامی حقوق مطالب ، دوره ها و محصولات برای مدیریت سایت محفوظ است و کپی برداری پیگرد قانونی دارد.