آموزش نحوه قرار دادن BottomNavigationView در اندروید

سلام دوستان
در آموزش قبلی نحوه ایجاد ریسایکلرویو رو توضیح دادم و طبق قولی که داده بودم، امروز میخوام آموزش نحوه قرار دادن BottomNavigationBar رو توی یه برنامه اندرویدی آموزش بدم که میدانیم جایگزین toolbar دربالای صفحه است تا بتوانیم در آن دکمه‌های هدایت کاربر را در آن قرار دهیم.

یک BottomNavigationBar مثل شکل زیر می‌باشد.

نمونه BottomNavigationBar

به دو روش می‌توانیم در اپلیکیشن (برنامه‌کاربردی) خود یک BottomNavigationBar داشته باشیم:

روش اول پیاده سازی BottomNavigationBar:

ساده‌ترین راه برای این کار ایجاد یک پروژه اندروید با پیش‌فرض BottomNavigationBar است. (برای ایجاد پروژه‌ی اندروید این مقاله را مطالعه کنید) برای این کار پس از انتخاب گزینه‌ی new از منوی فایل: File-> new صفحه‌ی زیر را مشاهده می‌کنیم.

 

ایجاد یک پروژه اندروید با پیش‌فرض BottomNavigationBar

در صفحه‌ی create new project در تب (زبانه) phone and tablet، گزینه‌ی Bottom navigation activityرا انتخاب می‌کنیم. بنابراین بهتر است قبل از اینکه پروژه‌ای ایجاد کنیم، بدانیم می‌خواهیم صفحه اصلی پروژه‌ی ما به چه شکلی باشد، و همان گزینه را در این تب انتخاب کنیم، تا کد نویسی کمتری داشته باشیم. (در مورد نحوه‌ی ایجاد یک پروژه می‌توانید از اینجا بیشتر بدانید) .سپس گزینه‌ی next را زده و برای برنامه‌ی خود یک نام انتخاب می‌کنیم، حتما میدانید که نام باید با حروف بزرگ آغاز شود. packageName را انتخاب می‌کنیم، که معمولا خود برنامه‌ی اندروید استودیو به صورت پیشفرض به ما پیشنهاد میدهد، و پس از آن مکانی که میخواهیم برنامه ذخیره شود را تعیین کرده، زبان خود را انتخاب میکنیم، من در آموزش‌ها با جاوا کار میکنم، بنابراین برای این آموزش ضروریست زبان جاوا انتخاب شود. در انتها دکمه finish را میزنیم و منتظر میشیم تا پروژه جدید ساخته شود.

یادآوری: به طور معمول برای سینک شدن گریدل لازم است از نرم افزار دور زدن تحریم‌ها استفاده کنید و حتما دقت کنید که از نرم‌افزار مناسبی برای اینکار استفاده کنید.

سپس مشاهده می‌کنیم که اندروید به طور خودکار اینترفیس زیر را در اکتیویتی اصلی (mainActivity) افزوده و آن را پیاده‌سازی کرده‌ است.

اینترفیس BottomNavigationView.OnNavigationItemSelectedListener در اینجا لیستنری برای مدیریت رویداد دکمه‌های انتخاب‌ شده می‌باشد.

 که میتوانیم در بالا با switch/case به کنترل مواردی که میخواهیم بپردازیم و کدهای لازم را به برنامه‌ی خود بیافزاییم. همچنین مشاهده می‌کنیم که در متد oncreate کد زیر افزوده شده‌ است.

خط اول برای شناسایی تکست ویو به برنامه، خط بعدی BottomNavigationView را تعیین می‌کند، و خط بعد کلیک برروی BottomNavigationView را کنترل می‌کند. مشاهده می‌کنید که نام کنترل داخل پرانتز همان نام اینترفیسی است که در بالا پیاده‌سازی شد.

روش دوم پیاده سازی BottomNavigationView:

با وام گرفتن از همین روش که اندروید استودیو به طور خودکار به پروژه‌ی ما افزود، به سراغ روش بعدی میرویم:
در این روش ما در  ابتدا تعیین نکرده‌ایم که یک BottomNavigationView می‌خواهیم. میدانیم که برای ایجاد هر view ابتدا باید آن را در فایل XML ایجاد کنیم، سپس در جاوا شناسایی کنیم، و پس از آن دستور کنترل‌های مربوطه را بنویسیم.

مثال:

پس برای این کار باید مراحل زیر را انجام دهیم:

  1. ایجاد یک پروژه اندروید و قرار دادن صفحه‌ی اول به صورت خالی
  2. تعریف BottomNavigationView در xml
  3. تعریف آیتم‌ها و آیکون‌های منو
  4. شناسایی BottomNavigationView به کد جاوا و نوشتن کنترل‌های مربوطه
  5. در این برنامه فایل Stringها تغییری نمیکند
  6.  در manifest تغییراتی نخواهیم داشت.

خط زیر را در فایل  build.grade خود بیافزایید:

به خاطر داشته باشید که عدد ۲۸ نشان دهنده‌ی نسخه‌ی Sdk مورد استفاده‌ی شماست (compileSdkVersion) بنابراین اگر از نسخه‌ی دیگری استفاده میکنید عدد ۲۸ را برابر عدد پروژه‌ی خود قرار دهید، چرا که نسخه‌ی تمامی کتابخانه‌هایی که استفاده میکنید باید یکی باشد، در غیر اینصورت در پروژه با پیغام خطا مواجه خواهید شد.

باید layout ایجاد کنیم:

حال لازم است BottomNavigationView را در فایل XML خود قرار دهیم. 

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

بنابراین کد زیر را به مجموعه‌ی کدهای موجود در فایل Xml صفحه‌ای که میخواهید در آن BottomNavigationView وجود داشته باشد، می‌افزایید.

برای تعیین رنگ و متن آیکون‌ها پس از انتخاب selector را می‌توانیم به کد بیافزاییم. در اینجا چون layout اصلی من ConstraintLayout بود، app:layout_constraintBottom_toBottomOf=”parent” را به کد افزودم تا در پایین صفحه قرار گیرد، بنا به layout اصلی که انتخاب کرده‌اید، محل قرارگرفتن این view را در پایین صفحه قرار دهید.

مرحله‌ی بعدی ایجاد و تعریف آیکون‌های منو است.

همانطور که در کد بالا می‌بینیم، منو مربوط به یک دایرکتوری به نام منو است، پس مطابق شکل زیر برروی res کلیک راست کرده، از منوی new، directory را ایجاد می‌کنیم.

 

ایجاد دایرکتوری برای منو

نکته: دوستان الزامی نداریم که حتما نام دایرکتوری با حروف بزرگ یا کوچک باشد، اما برای خوانایی و نظم بیشتر نام دایرکتوری‌ها را به طور معمول با حروف کوچک شروع میکنیم.

سپس روی منو کلیک راست کرده، از منوی باز شده Menu recource file مانند شکل زیر را انتخاب می‌کنیم، نام فایل‌های xml همیشه باید با حروف کوچک آغاز شود.

Menu recource file

نکته: به خاطر داشته باشید برای خوانایی بهتر کد، خوب است نام فایل xmlی که منو در آن قرار دارد با _menu آغاز شود، تا به راحتی قابل یافتن، و مشاهده باشد.

برای هر آیتم از کد زیر استفاده می‌کنیم:

برای جایگذاری app:showAsAction=”ifRoom” در کد الزامی نداریم.

پس برای داشتن یک BottomNavigationView با سه گزینه برای انتخاب کل فایل. xml ما به صورت زیر خواهد بود:

میبینیم که فایل حتما باید با تگ <menu باز و بسته شود.

ایتم‌ها:

هر آیتم حتما یک آی‌دی دارد، تا بتوان در فایل جاوا آن را کنترل کرد. هر آیتم باید یک آیکن داشته باشد که شمای آیتم را نشان دهد، میتوانید با رفتن به File > New > Image Asset برای برنامه‌ی خود آیکن ایجاد کنید، هر آیتم یک title دارد که نام آن آیتم را نشان میدهد، نام در پایین آیکن قرارمی‌گیرد.

نکته: از طریق برنامه با MenuItem#setChecked(true) می‌توانیم انتخاب کنیم کدام گزینه در ابتدا انتخاب شده‌ باشد.

حال نوبت به آن رسیده که لیستنر‌ها را برای کنترل رویداد فشردن دکمه بیافزاییم. همان لیستنر BottomNavigationView.OnNavigationItemSelectedListener که در روش اول توضیح دادم که به طورخودکار توسط اندروید استودیو به پروژه افزوده می‌شود:

دقیقا مثل همانکاری که توسط خود اندروید استودیو انجام شد ما ابتدا BottomNavigationView را شناسایی می‌کنیم. سپس کدهای زیر را به آن اضافه می کنیم:

دوستان برای شلوغ نشدن کد mOnNavigationItemSelectedListener را بیرون از onCreate تعریف می‌کنیم، این امر کاملا اختیاری‌ می باشد و میتوانید به جای mOnNavigationItemSelectedListener آن را به صورت زیر بنویسید:

ترجیح من این است که پیاده سازی اینترفیس به صورت جداگانه انجام پذیرد و تنها در پرانتز onClickListener نام آن را بیاوریم بنابراین کد زیر را به پروژه‌ی خود بیافزایید:

نکته: حرف m در ابتدای نام‌گذاری‌ها به معنی تخصیص حافظه یا مموری به آن عنصر است. و در صورت لزوم در انتهای برنامه باید از حافظه پاک شود.

توضیحاتی که باید بدانید:

نکته:
۱٫ نویگیشن باتن‌ویو‌ها کتابخانه‌‌های مختلفی دارند، که بسته به طرح پروژه‌ی خود می‌توانید از آن استفاده کنید، برای استفاده از هر کتابخانه حتما داکیومنت (توضیحات) مربوط به آن را بخوانید.

۲٫ چه زمانی از نویگیشن باتن ویو استفاده کنیم؟
الف: وقتی میخواهیم گزینه‌ (هایی) از تمامی صفحات برنامه در دسترس باشند
ب: تنها از سه تا پنج مورد نویگیشن باتن ویو استفاده کنید. (بهتر است تعداد آن فرد باشد)
اگر تعداد موارد شما کمتر از سه مورد یا بیشتر از پنج مورد بود از تب استفاده کنید.

۳٫ چه زمانی نباید از نویگیشن باتن استفاده کنیم؟
الف: وقتی در صفحه فقط یک مورد برای مشاهده داریم: مثلا مشاهده ایمیل
ب: تنظیمات در نویگیشن باتن قرار نمی‌گیرد.

۴٫ در صورتیکه پنج آیتم در نویگیشن باتن دارید، در صورت جا داشتن، می‌توانید نام آیتم را نشان دهید، در غیراینصورت تنها می‌توانید نام آیتم را زمانی نشان دهید که آیتم انتخاب شده، و آیتم‌هایی‌ که انتخاب نشده‌اند، نامشان نمایش داده نمیشود.

۵٫ نام‌ آیتم‌ها را تا حد ممکن کوتاه و یک کلمه‌ای انتخاب کنید

۶٫ آیتم‌هایی که انتخاب می‌شوند باید رنگ روشن داشته باشند، و آیتم‌های غیر انتخابی خاموش، یعنی منتخب و غیر منتخب بودن آیتم مشخص باشد. و از چند رنگ برای آیتم‌ها استفاده نکنید.

در پایان ازتون میخوام حتما مقاله‌ی ترفندهای کاربردی اندروید استودیو رو بخونید تا کار برنامه نویسی براتون ساده تر بشه.

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

موفق و پیروز باشید.

    دیدگاه ها

    ارسال دیدگاه

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

    صفحه اینستاگرام کانال تلگرام