Bottom navigation
تاریخ انتشار :     22 اردیبهشت 1397

Bottom navigation چیست؟

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

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

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

 

مراحل ایجاد Bottom navigation:

قبل از شروع فرایند کار، باید این نکته را دانست که Bottom navigation یکی از زیر شاخه های مبحث وسیع Material Design می باشد. وقتی ما قصد ایجاد و طراحی هرکدام از زیر مجموعه های Material Design را داشته باشیم، پس حتما باید کتابخانه ی design را به برنامه خود اضافه کنیم.

برای انجام این کار که در مقاله های قبلی نیز توضیح داده شد، به قسمت build.gradle رفته و در قسمت dependents کد زیر را اضافه می کنیم:

و همچنین کتابخانه ی appcompat برای پشتیبانی از استفاده Material design را مانند کتابخانه ی design به build.gradle استفاده میکنیم:

حال که دو کتابخانه ی مورد نیاز را به برنامه اضافه کردیم، به قسمت طراحی Bottom navigation می رویم.

اولین کاری که باید انجام دهیم، اضافه کردن سه عکس به بخش drawable در زیر مجموعه بخش res می باشد. این سه عکس برای سه فرگمنتی که قرار است در پایین گوشی یا همان Bottom navigation اضافه گردد.

پس از اضافه کردن عکس ها می بایست یک menu ایجاد کنیم. مطابق تصویر زیر روی بخش res کلیک راست کرده و از گزینه ی new، روی Android resource directory کلیک می کنیم.

حال در این قسمت بر روی گزینه ی Resource Type، بر روی گزینه ی menu کلیک کرده و ok را انتخاب میکنیم.

Bottom navigation

پس از اینکه روی گزینه ی ok کلیک کردیم، در بخش rec یک قسمت باعنوان menu ایجاد می شود.اکنون روی آن کلیک راست می کنیم و سپس نامی دلخواه برای آن در نظر میگیریم که ما در اینجا از نام menu_item استفاده میکنیم.

در بخش menu_item کدهای زیر را برای ایجاد یک منو اعمال میکنیم. با اضافه کردن کدهای زیر سه آیتم اضافه خواهد شد که می توانید برای انتخاب تصاویر آن به قسمت drawble رفته و از آن ها استفاده کنید.حال کد های زیر را در به menu_item اضافه می کنیم:

حال در قسمت Avtivity_Main و قسمت xml آن رفته و کدهای زیر را جهت ایجاد کردن Bottom navigation را به آن اضافه میکنیم:

سفارشی سازی Bottom navigation:

حال می خواهیم Bottom navigation را سفارشی تر طراحی کنیم. برای این کار باید یک مجموعه استایل نیز به پروژه مان اضافه کنیم. برای این کار به قسمتValues رفته و بر روی style.xml کلیک کرده و سپس استایل زیر را به آن اضافه میکنیم:

حال باید به Activity_Main رفته و کد زیر را جهت شناسایی استایل فوق به آن اضافه کنیم:

اکنون می خواهیم افکتی را نیز به آن اضافه کنیم. که نحوه اضافه کردن افکت هم به این صورت هست که روی drawable کلیک راست کرده و فایل جدیدی را میسازیم و  کدهای زیر را در آن اعمال میکنیم .توجه داشته باشید که برای انتخاب کردن رنگ موردنظرتان آن را در بخش color.xml تایپ کنید.

و در نهایت، اگر می خواهید روی هر کدام از ایتم ها که کلیک می کنید به Activity دلخواه شما هدایت شود، نیاز دارید که در بخش Main_Activity.java  کد زیر را اضافه کنیم.

جهت تغییرات بیشتر بر روی شخصی سازی Bottom navigation، بسته به تغییرات بیشتری نسبت به آن دارد که به سلیقه و نیاز کاری شما خواهد داشت.

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

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

*آینده از آن کسب و کارهای آنلاین است*

تولید شده در بخش تولید محتوا پدیده تجارت

  • امتیاز :
    1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره
    Loading...
  • نظرات