پیاده‌سازی Bottom navigation در متریال دیزاین

استاندارد

توی پست قبلی کمی راجع‌به خود Bottom navigation صحبت کردیم و باید و نباید‌هایی رو که باید برای پیاده‌سازی در نظر داشته باشیم رو برسی کردیم . حالا وقتشه که کمی هم درباره پیاده‌سازی این مدل صحبت کنیم . توی این پست ما قراره یک Bottom navigation بسازیم با تب‌های خانه ، پروفایل و نقشه و به وسیله اون بین صفحات مختلف حرکت کنیم . برای انجام این کار از کتابخونه AHBottomNavigation استفاده میکنیم .

ابتدا کتابخونه رو به پروژمون اضافه میکنیم .

توی اولین مرحله لازمه صفحات خانه ، نقشه و پروفایلمون رو بسازیم. برای این کار یک Fragment ساده مثل کد زیر میسازیم و با استفاده از یک TextView مشخص میکنیم الان توی کدوم صفحه هستیم .

حالا باید یک Adapter برای تغییر ViewPager بنویسیم .

در مرحله بعدی صفحه‌ای که میخوایم توی اون از Bottom navigation استفاده کنیم رو میسازیم .

برای View اصلی بهتره که از CoordinatorLayout استفاده کنیم تا اگه خواستیم از المان‌های دیگه مربوط به متریال رو توی صفحه‌مون استفاده کنیم به مشکلی برنخوریم . همینطور بهتره از ViewPager خود کتابخونه استفاده کنیم وگرنه باید ViewPager مون رو طوری تغییر بدیم که با حرکت دست نشه بین صفحه‌های مختلفش حرکت کرد.

و در مرحله آخر Activity ای که قراره Bottom navigation توی اون نمایش داده بشه رو میسازیم .

در کد بالا آرایه‌ای از تب‌هامون رو با استفاده از AHBottomNavigationItem میسازیم و اون رو به AHBottomNavigation مون اضافه میکنیم .
تابع  ()bottomNavigation.setColored یک مقدار boolean دریافت میکنه که به وسیله اون مشخص میکنه که توی انتخاب تب‌ها رنگ Bottom navigatoin رو به رنگ استفاده شده در AHBottomNavigationItem تغییر بده یا نه .

و این هم چیزی خواهد بود که در نهایت خواهیم داشت .

Screenshot_2016-05-31-10-27-03

6 دیدگاه در “پیاده‌سازی Bottom navigation در متریال دیزاین

  1. محمدرضا

    مرسی از آموزشتون . خیلی خوب بود .
    یه سوال .
    اگه سه تا فرگمنت داشته باشیم . که توی هرکدوم دیتا از اینترنت لود کنیم . بخواییم فرگمنتارو Replace کنیم هر بار یه new میسازه و هر بار باید دیتا رو لود کنه .
    راهی نیست برای اینکه دیتا رو یه بار لود کنه و هر دفعه از فرگمنتا new نسازه؟

    • soroushjavdan

      خواهش میکنم ، ممنون 🙂
      اره راه‌حلش برمیگرده به استفاده درست از ادپتر واسه viewpager که واسه این موردی که گفتی باید ادپتر viewpager از کلاس FragmentPagerAdapter استفاده کنی و توی کلاست کد (viewPager.setOffscreenPageLimit(1 رو قرار بدی .

    • soroushjavdan

      سلام
      بله در واقع سه instance از یک نوع فرگمنت داریم . واسه این که از فرمگمت‌های مختلف استفاده کنید فقط کافی توی کد adapter در خط ۸ تا ۱۰ فرگمنت‌های مورد نظر خودتونو اضافه کنید. ، عمل تغییر بین فرگمت‌ها هم در کلاس MainActivity در خط ۳۲ انجام میشه .

پاسخ دهید

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