0

پیاده سازی Tab توسط TabLayout و ViewPager

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

آشنایی با Tab ها در اندروید استودیو

در این بخش به نحوه پیاده سازی Tab ها با استفاده از Fragment و ویجت های TabLayout و ViewPager در اندروید می پردازیم که شامل مباحث زیر می باشد:
• معرفی Tab (تب) متریال در اندروید
• معرفی کامپوننت TabLayout
• معرفی کامپوننت ViewPager
• ساخت یک کلاس برای مدیریت فرگمنت ها و عنوان تب ها در ViewPager و TabLayout
• نحوه اضافه کردن عنوان (text) به Tab ها
• نحوه اضافه کردن آیکون به Tab ها
• نمایش همزمان آیکون و تکست در تب ها
• ویرایش تب ها مانند تغییر رنگ text، رنگ نوار پایین Tab و…
• کاربرد خاصیت های tabGravity و tabMode در TabLayout

این مبحث در قالب Tab (تب) ها در اندروید:

Tab ها تقریبا در همه پلتفرم ها و برنامه ها استفاده می شوند. در سیستم عامل ویندوز وقتی یک پنجره تنظیمات را باز می کنید، در بالای پنجره چندین Tab تعبیه شده که با انتخاب هرکدام، به تعدادی از گزینه های مرتبط با عنوان آن تب دسترسی خواهید داشت. یا مثال ساده تر، در مرورگرهای وب مانند کروم و فایرفاکس، برای مشاهده هر وب سایت یک تب (Tab) جدید باز می کنیم. در سایر پلتفرم ها و نرم افزارها هم به همینصورت از Tab ها استفاده می شود. از جمله در سیستم عامل و نرم افزارهای اندروید.

در زیر Toolbar سه Tab به نام‌های Basketball، Football , Tenis تعریف شده که با انتخاب هر یک از تب ها، محتوا و لیست مرتبط با آن نمایش داده می شود.

معرفی TabLayout در متریال دیزاین

TabLayout یکی دیگر از ویجت (کامپوننت) هایی است که اندروید در متریال دیزاین معرفی کرده و در کتابخانه design در دسترس است. با استفاده از ویجت TabLayout امکان تعریف و مدیریت Tab ها فراهم می شود (یعنی گزینه های Basketball، Football , Tenis در مثال بالا).

ViewPager چیست؟

ViewPager ویجت دیگری است که با استفاده از Fragment ها، می تواند چندین فرگمنت را در یک اکتیویتی نمایش دهد که با کشیدن صفحه به چپ یا راست و یا انتخاب Tab ها در TabLayout، فرگمنت ها به ترتیبی که تعیین کرده ایم نمایش داده می شوند (لیست چت ها، مکالمات و مخاطبین در مثال بالا).
یعنی در اپلیکیشن WhatsApp علاوه بر اینکه با لمس هریک از تب ها، به محتوای آن (یعنی فرگمنت مرتبط با آن تب) دسترسی داریم، با کشیدن فرگمنت ها به دو طرف نیز تب ها جابجا می شوند.

یک پروژه با نام Tabs ایجاد می کنم و با توجه به اینکه در زمان تهیه این آموزش، اکثر دیوایس ها از API 17 و به بالا پشتیبانی می کنند، MinSDK را روی ۱۷ تنظیم می کنم. همانطور که در ابتدا اشاره شد، لازم است کتابخانه design را به پروژه اضافه کنیم:

در مرحله اول، ActionBar پیش فرض پروژه را مطابق آنچه در آموزش تولبار بیان شد، حذف کرده

وToolbar متریال را جایگزین می کنم:

من لایه را به LinearLayout از نوع vertical تغییر دادم تا ویجت هایی که اضافه می کنم زیر یکدیگر قرار بگیرند. البته پیاده سازی با RelativeLayout یا CoordinatorLayout نیز امکان پذیر است.

MainActivity.java:

قبل از ادامه کار، پروژه را اجرا می کنم تا مطمئن شوم تولبار به اکتیویتی اضافه شده است:

 

متریال تب

در ادامه، چند فرگمنت ساده به پروژه اضافه می کنم:

فرگمنت

سه فرگمنت با نام‌های fr1,fr2,fr3ضافه شد که در layout هر فرگمنت یک TextView وجود دارد.

مانند fragment_fr1.xml:

مجدد main_activity.xml را باز کرده و به صورت زیر دو تگ TabLayout و ViewPager را به لایه اضافه می کنم:

فایل colors.xml:

برای TabLayout رنگ پس زمینه یکسان با Toolbar تعریف کردم تا به صورت یکپارچه نمایش داده شوند.
TabLayout و ViewPager را در اکتیویتی تعریف می کنم:

در ادامه برای مدیریت و نمایش فرگمنت ها یک کلاس جدید با نام دلخواه ViewPagerAdapter به پروژه اضافه می کنم:

ساخت تب در اندروید استودیو

و کلاس را به اینصورت بسازید:

من به دو List نیاز دارم. یکی برای تعریف فرگمنت ها و دیگری برای عنوان Tab ها. پس یک List از نوع Fragment با نام دلخواه frgList و یک لیست از نوع String با نام دلخواه titleList می سازم و به کلاس ViewPagerAdapter  اضافه می کنم:

به این ترتیب، لیست فرگمنت ها در frglist و عنون (Title) تب ها در titleList ذخیره خواهند شد. دو متد در کلاس ViewPagerAdapter را به این صورت تکمیل می کنم:

 

برای مدیریت Tab ها در TabLayout به متد دیگری با نام ()getPageTitle نیاز داریم که ار منوی

Code   و زیر منوی Override Methods متد را جستجو می کنیم و به کلاس ViewPagerAdapter  اضافه می کنم:

که در نهایت کدهای کلاس به این شکل در می آیند :

که متد getPageTitle را به این صورت تکمیل می کنیم :

این متد موقعیت Tab های انتخاب شده را بر می گرداند.

و در نهایت یک متد دیگر جهت شناساندن فرگمنت ها و عنوان تب ها به ViewPager به کلاس اضافه می کنیم :

کد نهایی کلاس ViewPagerAdapter   :

 

حال اکتیویتی را به اینصورت تکمیل می کنیم:

حال برنامه را اجرا نمایید :

ساخت تب و ویو پیجر

 

 

 

مدیریت

برنامه نویسی در زمینه اندروید استودی و ویژوال استودیو و انجام پروژه های متعدد برنامه نویسی.

مطالب زیر را حتما بخوانید:

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

نظرات کاربران

پاسخی بگذارید

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

لینک کوتاه :

عضویت در خبرنامه ویژه مشتریان بوکزار

با عضویت در خبرنامه ویژه بوکزارپلاس از آخرین جشنواره های سایت باخبر شوید!