وبلاگ - مطالب آموزشی

0
197
استفاده از ViewPager برای ساخت رابط کاربری اسلایدر اسکرین در اندروید

استفاده از ViewPager برای ساخت رابط کاربری اسلایدر اسکرین در اندروید

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

افزودن ViewPager به اکتیویتی

یک پروژه جدید از نوع Blank Activity بسازید و کار را با افزودن یک ViewPager به اکتیویتی آغاز نمایید، مشابه سایر کنترل های UI باید ViewPager را در فایل لی اوت تعریف کنید.

فایل activity_main.xml را مطابق زیر تغییر دهید:

در لی اوت بالا یک LinearLayout وجود دارد که دربرگیرنده یک ViewPager با آی دی “vpPage” می باشد. یک ویوی تو در تو به نام PagerTabStrip وجود دارد که بسته به تعداد صفحات در ViewPager، تب ها را در قسمت بالای صفحه به نمایش می گذارد. زمانی که یک لی اوت ساختید، فایل MainActivity.java را به منظور استفاده از این لی اوت مشابه زیر آپدیت کنید:

در کد بالا l یک MainActivity است که لی اوت ساخته شده را ست می کند، سپس با استفاده از تابع findViewById به جستجوی یک رفرنس از ViewPager می پردازد.

ساخت فرگمنت برای ViewPager

لازم است تمامی اسکرین های موجود در ViewPager را به عنوان یک فرگمنت تعریف کنید. هر اسکرین می تواند یک نمونه از کلاس های Fragment متفاوت یا نمونه های مختلف از کلاس فرگمنت مشابه با محتوای متغیر باشد. این اپلیکیشن سه اسکرین خواهد داشت، دو اسکرین با فیلد متن و یک عکس و اسکرین دیگر با یک فیلد متن و دو عکس، از این رو به دو کلاس فرگمنت نیاز خواهید داشت.

لی اوت ها و کلاس های فرگمنت مطابق زیر خواهند بود:

fragment_one_img.xml

FragmentWithOneImage.java

fragment_two_images.xml

FragmentWithTwoImages.java

در کد بالا FagmentWithOneImage دارای یک متد getInstance است که متن و آی دی منبع عکس نمایش داده شده در فرگمنت را می گیرد. فرگمنت لی اوت fragment_one_img.xml را پر کرده و متن و آی دی منبع عکس را ست می کند.

به طور مشابه FragmentWithTwoImages نیز لی اوت fragment_two_iamges.xml را پر کرده و متن و دو آی دی منبع عکس ها را ست می کند.

جایگذاری PagerAdapter

حال که کار ساخت فرگمنت ها تمام شد، به یک PagerAdapter جهت ست کردن بر روی ViewPager نیاز دارید. می توانید آن را به طور مستقیم از PagerAdapter نیز اکستند کنید، اما اندروید یک کلاس پایه به نام FragmentPagerAdapter را در اختیار قرار داده که عملکردهای ابتدایی برای نمایش فرگمت به عنوان صفحات در PagerAdapter را پیاده سازی می کند.

با افزودن این کلاس به MainActivity.java می توانید adapter را از FragmentPagerAdapter اکستند کنید:

نکته: لازم است تا تصاویر رفرنس داده شده در بالا را اضافه کنید، این تصاویر از طریق این لینک در دسترسند.

کلاس MyPagerAdapter از FragmentPagerAdapter اکستند شده و متد getCount را که تعداد صفحاتی را که اداپتر به نمایش خواهد گذاشت، بر می گرداند، اورراید می نمایند. در این مثال می خواهیم سه صفحه را به نمایش گذاریم، بنابراین متد سه را برمی گرداند. متد getItem نمونه ای از فرگمنت را برای نمایش در صفحه برمی گرداند.

متد getPageTitle نیز عنوان هریک از صفحات را برمی گرداند. زمانی که MyPagerAdapter را ساختید، باید نمونه ای از آن را بر روی ViewPager در تابع onCreate ست کنید، نحوه کار در زیر نمایش داده شده است:

با اجرای اپلیکیشن سه صفحه را مشاهده می کنید که حرکت می کنند.

blog_22948_1

blog_22948_2

blog_22948_3

افزودن انیمیشن به اسکرین اسلاید

با ست کردن یک ViewPager.PageTransformer قادر به جایگذاری انیمیشن های مختلف در اسلاید صفحه هستید. برای این کار باید متد tranformPage را اورراید نمایید. در این تابع انیمیشن های کاستوم را مبنی بر موقعیت صفحه ارائه می دهید، ترانسفورم های متعددی به صورت لایبرری های اپن سورس در دسترس شما قرار دارند، برای نمونه ToxicBakery.ViewPagerTransforms.

جهت استفاده از یک انیمیشن کاستوم آن را به شکل زیر به وابستگی های build.gradle اضافه کنید:

هم اکنون به طوری که در زیر نمایش داده شده، قادر به اضافه کردن PageTransformer بر روی ViewPager در متد onCreate هستید:

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

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

 

منبع:

https://www.sitepoint.com

 

این نوشته را به گوگل توصیه کنید :

بسته های آموزشی جذاب!بیشتر