آموزش اندروید متریال دیزاین کار با tabها و ViewPager

کار با tab و ViewPager طراحی متریال در آموزش اندروید متریال دیزاین

سطح آموزش: #متوسط

تویِ این آموزش قصد دارم با tabها کار کنیم. tab رو ما قبلا هم داشتیم، در متریال هم خیلی تفاوتی را آنچه قبلا داشتیم ندارید فقط نحوه جابجایی بینِ تب‌ها روون تر شده و تا حدی متریالیزه! تر شده.

چون سطحِ آموزش رو متوسط در نظر گرفتم و قبلا هم بارها مراحلِ اولیه رو طی کردیم دیگه این مراحل رو توضیح نمیدم. طبقِ آنچه در گذشته یاد گرفتیم کتابخونه‌هایِ دیزاین و appcompat رو اضافه کنید و تمِ متریال رو هم به برنامه اعمال کنید.

یک activity به اسمِ TabActivit.java میسازیم تا کار رو شروع میکنیم. توجه کنید که وقتی از tab استفاده می‌کنیم هر تب نمایانگرِ یک fragment خواهد بود. و activity که ساختیم به نوعی میزبانِ این فرگمنت‌هاست. بنابراین ابتدا به سراغِ ساختن فرگمنت‌ها میریم.

اندروید استودیو متریال دیزاین

چون در آینده به فرگمنت رو حرفه‌ای تر بررسی خواهیم کرد فعلا چند فرگمنتِ ساده می‌سازیم که صرفا جنبه نمایشی دارن. برایِ ساختن هم از اندروید استودیو کمک میگیرم. رویِ پکیج کلیک راست کنید و مسیر زیر را طی کنید:

new/Fragment/Fragment(Blank)

با کدِ جاوا کاری نداریم به سراغِ fragment_first.xml رفته و کد‌های زیر رو کپی کنید:

به همین شکل تعدادی فرگمنتِ دیگه هم بسازید. من اسم‌های SecondFragment و ThirdFragment استفاده کردم.

لایه activity_tab.xml رو به شکل زیر کپی کنید:

حالا کافی‌ست کدهای زیر رو در TabActivity.java وارد کنیم و برنامه رو اجرا کنیم.

کد

توضیحِ کد:

TabLayout: یکی از ویجت‌هایی است که تو کتابخونه design وجود داره و نوارِ بالایِ صفحه رو ایجاد میکنه. از ویژگی‌هاش اینه که با کشیدنِ دست به اطراف بینِ صفحه‌های مختلف جابجا میشه. همچنین یک نوارِ باریک در پایین وجود داره که نشون میده ما کجا هستیم. برای #تمرین سعی کنید از این کتابخونه برای تغییرِ حالتِ نوار استفاده کنید.

ViewPager: این ویجت رو از support action v4 باهاش آشنا هستیم. ویو پیجر این امکان رو به کاربر میده که در یک اکتیویتی با کشیدنِ دست به سمتِ راست یا چپ جابجا شه و صفحه‌های متفاوتی رو ببینه. همچنین این قابلیت رو داره که بصورت داینامیک و در حینِ اجرایِ برنامه tabهایی رو بهش اضافه کنیم یا ازش کم کنیم.

برای راه‌اندازیِ ViewPager از تابعِ setupViewPager استفاده کردیم. در این تابع با یک adapter به تعداد دلخواه tab به viewpagerمون اضافه کردیم و سپس اون رو set کردیم.

کلاسِ ViewPagerAdapter: این کلاس از FragmentPagerAdapter ارث‌بری میکنه. ما در این کلاس از متدِ addFragment برایِ اضافه کردنِ فرگمنت‌ها به adapter استفاده کرده‌ایم.

حالا فرض کنید بخوایم تعدادِ خیلی بیشتری فرگمنت داشته باشیم و بخوایم در نوار بالا بشه اسکرول کرد و به فرگمنتِ دلخواه رسید. داخلِ لایه xml جایی که TabLayout رو تعریف کرده بودیم دوتا پارامتر داشتیم به اسم‌های tabMode و tabGravity. مقادیر به شکل زیر بودن:

اگر fixed باشه یعنی scroll نمیشه. بنابراین اگر تعدادِ زیادی tab داریم (به توصیه گوگل بیش از ۵تا) باید از حالتِ scrollable استفاده کنیم.

هم چنین مقدار tabGravity برابر با fill هست. یعنی هرچندتا tab داشته باشیم، این‌ها فضایِ داخلِ tabLayout رو به طورِ مساوی تقسیم میکنند و بالایِ صفحه کشیده میشن. مثلِ تصویرِ زیر:

screenshot_2016-11-18-14-00-52

به غیر از مقدارِ fill میشه center رو هم قرار داد که در اون صورت تب ها به شکل چسبیده به هم در مرکزِ TabLayout قرار میگیرن. برای مشاهده مقدار را تغییر بدید و برنامه رو اجرا کنید.

تا اینجا تب‌های ما فقط متن داشتن. میشه براشون عکس همراه با متن و یا عکسِ خالی هم در نظر گرفت. ابتدا به حالتِ عکس همراه با متن می‌پردازیم. کلاسِ TabActivity.java رو به شکلِ زیر تغییر بدید.

کد

برنامه رو اجرا کنید. با چیزی شبیه به تصویر زیر مواجه می‌شید:

material-design-working-tablayout-st

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

برای دومی علاوه بر اینکه یک drawable به تب لیوت set کردم title رو هم null قرار دادم. برای null کردنِ title من داخلِ getPageTitle رو به شکلِ زیر تغییر دادم:

 

37 دیدگاه برای “آموزش اندروید متریال دیزاین کار با tabها و ViewPager

    1. این ارور نیست. پیشنمایش نمیتونه بده. اگه برنامه رو اجرا کنی مشکلی نداره.
      ولی بازم نباید اینجوری باشه. کتابخونه رو بعد از اینکه اضافه کردی sync رو زدی؟
      ارورهای MainActivity رو هم درست کن.

    1. سلام، خواهش میکنم.
      کافیه از کد زیر استفاده کنید:
      tabLayout.getTabAt(1).select();
      فقط جای یک شماره آخرین تب رو بذارید. مثلا اگر سه تا تب داریم عدد دو رو قرار بدید چون از صفر شروع میشه.

  1. سلام من کتابخانه Design رو هم ادد کردم
    تمامی کد های شماراهم بدون تغییر کپی کردم
    برنامه اجرا میشه ولی خطای force close میده و برنامه کرش میکنه

    کد تا جایی که تب ها فقط اسم دارن و تصویر ندارن کپی کردم
    کمکم کنید

  2. تشکر بابات وبسایت و اموزشهای خیلی خوبتون.بسیار واضح و کاربردی هستم اموزشهاتون.دوست عزیز اگه بخوام تب رو به جای activity درون fragment بگذارم په تغییراتی باید عمال کنم؟

  3. سلام و خسته نباشید.وقتی با کلیک کردن روی یک دکمه وارد یک فرگمنت دیگه میشم و بعد در tab ها پیمایش میکنم برمیگرده به فرگمنت قبلی.چطوری جلوی این اتفاق رو بگیرم.یعنی بعد از پیمایشها و برگشت روی اون تب فرگمنت ٍثانویه نمایش داده بشه.

    1. وقتی فرگمنت داخل فرگمنت دارید back رو که میزنید فرگمنت مادی که تب‌ها داخل اون تعریف شدن بسته میشه. یا باید OnBackPressed رو برای فرگمنت‌ها داخلی پیاده سازی کنید و یا اینکه داخل فرگمنت ثانویه تون بگید که روی back کلیک شد فرگمنت رو نبنده (که فرگمنت اولی نمایش داده بشه) و دوباره لایه اولیه خودشو نمایش بده.

    1. سلام. خیلی راه‌ها میشه انجام داد. یک راه خوب استفاده از interface هست. آموزشش اینجا هست. تو این آموزش ارتباط اکتیویتی و فرگمنته ولی دو تا فرگمنت هم میشه. فقط دقت کنید اگر یکی از فرگمنت‌ها Destroy شده باشه اینترفیس رو قاعدتا اجرا نمیکنه. شما با اینترفیس اطلاعات رو برای اکتیویتی بفرستید و از اکتیویتی به فرگمنت دوم.

  4. باعرض سلام
    خب حالا اگه بخواییم برای هر فرگمنت چند ایتم بذاریم و برای هر کدوم عملکردهایی تعیین کنیم ، برای این منظور در کد جاوا کدوم بخشش باید اعلان کنیم و چطور باید عملکرد های ایتم ها در فرگمنت ها رو در کد جاوا کنترل کنیم ؟

  5. آموزشتون و همینطور سایتتون عالیه.
    تنها چیزی که میتونم بگم اینه که با توجه به استاندارد های متریال گوگل در قسمت تب ویوو موقع سویچ کردن روی تب ها وقتی از روی بیش از یک تب میپریم نباید تب های مابین نمایش داده بشن.
    مثلا اگه از تب ۱ به تب ۳ میریم نباید به ترتیب تب ۲ و بعد تب ۳ نمایش داده بشه و مستقیما میبایست از ۱ به ۳ سوییچ بشه که این استاندارد رعایت نشده. چطور میتونم این تغییر رو انجام بدم؟

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

    1. سلام. برای جستجو فعلا روی اسم سایت tab رو بزنی میتونی جستجو کنی تا بعدا که سرم خلوت شد اضافه کنم. در مورد home هم حق با شماست و باید اضافه شه

  7. سلام
    ممنون از مطالب مفیدتون
    اگه من بخام داخل یکی فرگمنت ها مثلادکمه بزارم باید برای استفاده از این دکمه کجا تعریفش کرد تو کلاس mainActivityیا کلاس فرگمنت هردوتا کلاس هم توی متد onCreate تعریف کردم نشد برنامه کرش میکنه لطفا اگه میشه راهنمایم کنید
    با تشکر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *