استفاده از نوار ابزار (ToolBar) در اپلیکیشن های اندروید- قسمت اول

استفاده از نوار ابزار (ToolBar) در اپلیکیشن های اندروید- قسمت اولReviewed by آریانا on Dec 4Rating: 5.0استفاده از نوار ابزار (ToolBar) در اپلیکیشن های اندرویدنوار ابزار (ToolBar) در آندروید Lollipop ، API 21 منتشر شد و جانشین موفقی برای نوار عملکرد (ActionBar) بود.

معرفی اجمالی

نوار ابزار (ToolBar) در آندروید Lollipop ،  API 21 منتشر شد و جانشین موفقی برای  نوار عملکرد (ActionBar) بود. ToolBar  در واقع یک  ViewGroup است که می تواند در هر کجا از لایه های XML شما قرار داده شود.  ظاهر و رفتار نوار ابزار (ToolBar) می تواند راحت تر از نوار عملکرد (ActionBar) سفارشی یا (customize) شود.

اندروید-using-the-app-toolbar

نوار ابزار (ToolBar) در برنامه های طراحی شده برای API 21 و بالاتر به خوبی کار می کند. با این حال، در آندروید به روز شده AppCompat از کتابخانه ها(libraries) پشتیبانی می کند تا نوار ابزار (ToolBar)  بتواند در دستگاه های سیستم عامل آندروید پایین تر نیز استفاده شود. در AppCompat، نوار ابزار (ToolBar) در کلاس android.support.v7.widget.Toolbar اجرا شده است.

دو راه برای استفاده از نوار ابزار وجود دارد:

  1. استفاده از یک نوار ابزار (ToolBar) به جای یک Action Bar زمانی که شما می خواهید از امکانات موجود در Action Bar استفاده کنید( برای مثال menu inflation and selection و ActionBarDrawerToggle و …) اما می خواهید کنترل بیشتری روی ظاهر آن داشته باشید.
  2. استفاده از یک نوار بازار مستقل زمانی که شما می خواهید در اپلیکیشن خودتان از یک الگو استفاده کنید بریا زمانهایی که Action Bar پشتیبانی نمی شود. برای مثال نشان دادن ToolBar روی صفحه نمایش ، دربرگرفتن قسمتی از عرض صفحه نمایش و ….

مقایسه نوار ابزار (ToolBar)  و نوار عملکرد (ActionBar):

نوار ابزار یک کلیت از سیستم نوارعملکرد(ActionBar) است. تفاوت های کلیدی که نوار ابزار (ToolBar)  را از نوار عملکرد (ActionBar) متمایز میکند عبارتند از:

نوار ابزار شامل یک View  در یک لایه شبیه به هر  View  دیگری می شود.  Toolbar راحت تر در صفحه نمایش جانمایی  و متحرک (انیمیت) و کنترل می شود. عناصر متعدد و متمایز نوار ابزار می توانند در یک فعالیت واحد  یا single activity تعریف شوند.

به خاطر داشته باشید که شما می توانید هر ToolBar را به عنوان یک اکتیویتیِ ActionBar پیکربندی کنید. و این بدان معناست که شما گزینه های استانداردی در منوی عملکردها دارید که نمایش داده می شوند.

توجه داشته باشید که ActionBar همچنان به کار خود ادامه می دهد و اگر شما به یک static bar در قسمت بالا نیاز دارید که بتواند آیکون ها و دکمه بازگشت رو در خود جای دهد، شما همچنان می توانید از ActionBar استفاده کنید.

نحوه استفاده از نوار ابزار (ToolBar) به جای  نوار عملکرد (ActionBar)

برای استفاده از نوار ابزار (ToolBar) به جای  نوار عملکرد (ActionBar) ابتدا مطمئن شوید که AppCompat-v7  از کتابخانه ای که به build.gradle اپلیکیشنتان اضافه می کنید، پشتیبانی میکند . فایل(Module:app):

[code]

dependencies {

compile ‘com.android.support:appcompat-v7:24.2.0’

}

[/code]

در مرحله بعد اجازه دهید تم ارائه شده ActionBar غیرفعال شود. ساده ترین راه این است که تم خود را از طریق Theme.AppCompat.NoActionBar  یا ( the light variant) در داخل فایل res/styles.xml گسترش دهید.

[code]

[/code]

حالا شما باید یک ToolBar  را به فایل  Activity layout اضافه کنید. یکی از بزرگترین مزایای استفاده ازاین روش، ویجت نوار ابزار(Toolbar widget) که شما می توانید در هر جای طرح (layout)خودتان آن را قرار دهید.

[code]

[/code]

توجه: شما قرار است android:fitsSystemWindows=”true” را به parent layout  از ToolBar  اضافه کنید و باید به اطمینان حاصل کنید که ارتفاع اکتیویتی(activity) صحیح محاسبه شده است.

از آنجایی که نوار ابزار فقط یک ViewGroup است و شما یم توانید به آن استایل بدهید و یا آن را شبیه هر view دیگری قرار دهید. توجه داشته باشید که شما در یک RelativeLayout هستید و باید مطمئن شوید که همه ی view ها درست در زیر نوار ابزار قرار گرفته اند.

در مرحله بعد شما باید در اکتیویتی با فرگمنت تان بعد، در فعالیت و یا قطعه خود را، تنظیم Toolbar  را برای عمل کردن به جای ActionBar ، با فراخوانی متد setSupportActionBar (نوار ابزار) تنظیم نمایید:

توجه: هنگام استفاده از support library ، مطمئن شوید که android.support.v7.widget.Toolbar را ایمپورت می کنید و نه android.widget.Toolbar..

[code]

[/code]

حالا ما باید مطمئن بشیم که action items را به صورت لیست شده در فایل menu resource مثل res/menu/menu_main.xml که در onCreateOptionsMenu:  در بالا inflat شده.

[code]

[/code]

بر ای دانستن جزئیات بیشتر در مورد action items در Toolbar از جمله اینکه چگونه click handling را راه اندازی می کند، به راهنمای ActionBar رجوع می کند. نتایج کد بالا این است که نوار ابزار به طور کامل با ActionBar جایگزین می شود.

اندروید-using-the-app-toolbar

از اینجا به بعد همه ی آیتم های منو در Toolbar نمایش داده می شوند.

استفاده مجدد از نوار ابزار

در بسیاری از برنامه ها همان Toolbar می تواند در اکتیویتی های متعدد یا در منابع alternative layout برای همان اکتیویتی استفاده شود. به منظور استفاده راحت تر از toolbar ما می توانیم leverage the layout را انجام دهیم که شامل تگی به شرح زیر است. اول باید تولبار را در یک فایل layout در res/layout/toolbar_main.xml تعریف کنیم:

[code]

[/code]

حالا می توانیم از تگ <include /> برای بارگزاری Toolbar در activity layout XML استفاده کنیم.

[code]

[/code]

این به ما اجازه می دهد یک تجربه پیمایش سازگار(consistent navigation experience) را در سراسر اکتیویتی ها یا تغییرات پیکربندی ایجاد کنیم.

استایل دهی به toolbar

toolbar می تواند با استفاده از خصوصیات استایل های مختلف شامل android:theme ، app:titleTextAppearance ، app:popupTheme سفارشی شود. هر کدام از این خصوصیات می توانند به یک استایل نقش بدهند. شروع کنید با:

[code]

[/code]

حالا باید استایل های سفارشی را در res/styles.xml ایجاد کنیم با:

[code]

[/code]

و نتیجه اش می شود:

اندروید-using-the-app-toolbar

نمایش آیکون برنامه در toolbar

در برخی مواقع ممکن است ما بخواهیم آیکون برنامه را در toolbar نمایش دهیم. و می توانید این کار را با اضافه کردن کد زیر به اکتیویتی انجام دهید:

[code]

[/code]

سپس حاشیه سمت چپ را که آیکون را بیش از حد به سمت چپ هل می دهد ، از طریق اضافه کردن app:contentInsetStart  به toolbar حذف می کنیم .

[code]

[/code]

با این کار انتظار می رود که آیکون در toolbar به درستی نمایش داده شود.

 

ادامه دارد…..

پاسخ دهید