ساخت تولبار (Toolbar) متریال دیزاین

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

می بینید که تولبار هم به زیبایی برنامه کمک می کند و هم به  Userfrendly بودن برنامه…

به دلیل آنکه تولبار به صورت یک View در اکتیویتی تعریف می‌شود، توسعه دهنده و برنامه نویس دست باز تری در مدیریت آن داشته و ویرایش آن نسبت به اکشن بار ساده تر شده. تولبار همان نوار بالای صفحه بوده که می‌تواند شامل عنوان صفحه (title)، لوگو، منو، گزینه جستجو و… باشد. در این فصل به نحوه ساخت تولبار (Toolbar) در اندروید و جایگزینی آن با ActionBar پیش فرض اندروید می پردازیم که شامل مباحث زیر می باشد.

اکشن بار (ActionBar):

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

 

تولبار (Toolbar):

نسخه جدید تر اکشن بار است و در اندروید Lollipop (API 21) معرفی شد. تولبار یک view است که در layout تعریف می شود. به همین دلیل برنامه نویس به سادگی می تواند تولبار را در هرجای اکتیویتی که مدنظر دارد اضافه کند و خواص موردنیاز را نیز را به تولبار اختصاص دهد. تولبار و اکشن بار در ظاهر تفاوتی با یکدیگر ندارند و فقط نحوه اضافه کردن آنها به اکتیویتی متفاوت است.

یک پروژه با نام MyَActionBar می سازیم و قسمت های مختلف را با هم بررسی می کنیم.

ابتدا باید اکشن بار پیش فرض برنامه رو حذف کنیم که برای اینکار کافیست در قسمت Theme (در ورزن های قدیمی تر اندروید استودیو در قسمت style )برنامه به جای DarkActionBar از

NoActionBarاستفاده کنیم .که کد ما بصورت زیر میشود :

حال از قسمت پلت (Palet) تولبار رو به صفحه اضافه میکنیم :

در قسمت کد نویسی عرض رو match_parent و ارتفاع رو

قرار میدم:

MainActivity.xml

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

در قسمت جاوا هم یک متغیر تولبار ایجاد کرده و به تولبار خودمان ارتباط میدیم :

MainActivity.java

 

 

 

با این کار ما یک تولبار ساده ایجاد کرده ایم که فقط نام برنامه رو نشون میده ، حال اگر بخواییم داخل اون ار منو استفاده کنیم :

اضافه کردن منو (Menu) به تولبار

روی دایرکتوری res راست کلیک کرده و
New > Android resource file را انتخاب می کنم:

در قسمت File name یک نام دلخواه وارد کردم. با انتخاب گزینه Menu در قسمت Resource type، به صورت خودکار Directory name نیز menu انتخاب می شود .

 

تو تصویر میبینید که یه فایل xml   ایجاد شده ، و شما میتونید در قسمت palete یه سری ویجت اضافه کنیم به منو.  من دو تا آیتم به منو اضافه می کنم

در این کد منو به تولبار اضافه شده اما در حال حاضر فقط در Preview فایل menu.xml این منو اضافه شده و برای نمایش باید آن را به اکتیویتی اضافه کنم. این کار توسط متد onCreateOptionsMenu انجام می شود. این متد و سایر متدهای موجود در اندروید را از مسیر Code > Override Methods می توانیم انتخاب و به پروژه اضافه کنیم:

کافیست روی این پنجره چند کاراکتر اول متد را تایپ کرده تا گزینه مدنظر درون لیست نمایش داده شود. راه دیگر هم اضافه کردن دستی متد به اکتیویتی است:

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


حال برای خاصیت کلیک بر روی آیتم های منو  هم بصورت زیر عمل می کنیم این تابع رو به برنامه اضافه می کنیم:

 

 

حال میخواییم جلوتر بریم و منو رو پیشرفته تر کنیم :

من یه سری تغییرات توی رنگ تولبار انجام دادم و کد xml به شکل زیر در اومد:

MainActivity.xml

و همچنین در فایل menu هم تغییراتی دادم که در زیر درمورد اونها توضیح می دم

اگر دقت کنید تو قسمت منو ما میتونیم علاوه برا menuitem  یک سری امکان دیگر هم اضافه کنیم ، به منو مانند searchitem  که برای اضافه کردن اون به دو روش میشه انجام داد، یکی از طریق palete یا از طریق کد نویسی :

ما برای اضافه کردن آیکن به منو از دستور

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

برای اینکه ما ایتم هاب منو رو تو قسمت تولبار ثابت کنیم و همیه در صفحه اصلی نمایش داده بشه ، بجای اینکه در زیرمنوی آبشاری باشه هم از دستور زیر استفاده می کنیم.

 

مطالب بیشتر :

ToolBar Tutorial With Example In Android Studio | Android Material Design Tutorial (abhiandroid.com)

 

 

 

 

 

 

مطالعه بیشتر