نوار برنامه و جزء هدر یک نوار اختصاصی در بالای بوم برنامه است که می تواند برای نمایش عملکردهای مهم مرتبط با برنامه، مانند نام تجاری، ناوبری سطح بالا و دسترسی به کنترل های برنامه، سفارشی شود.
برای قرار دادن کنترلهای کلیدی، مانند جستجوی درونبرنامه، در یک مکان استاندارد در سرتاسر UI، از طرحبندیهای نوار برنامه و سرصفحههای ثابت استفاده کنید.
آناتومی
نوار برنامه و هدر می تواند شامل عناصر مختلفی باشد. می توان آن را به یکی از روش های زیر پیکربندی کرد:
- هدر برنامه: هنگامی که به عنوان سرصفحه برنامه پیکربندی می شود، مولفه حاوی فضایی برای متن اختیاری، با حداقل استفاده از نمادها و دکمه ها است. به طور معمول، این شامل یک عنوان صفحه و فلش عقب است.
- نوار برنامه: هنگامی که به عنوان نوار برنامه پیکربندی می شود، می تواند شامل نمادها، برگه ها و دکمه ها باشد. عناصر معمولی شامل نماد برنامه و گزینه های ناوبری است.
هر یک از این نسخهها ممکن است شامل کنترلهای برنامه، مانند جستجوی درونبرنامه و تنظیمات نیز باشد.
![نوار برنامه و آناتومی هدر](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-anatomy-1.png?authuser=1&hl=fa)
1. فلش عقب
2. عنوان صفحه نمایش
3. دکمه
4. کنترل برنامه
5. نماد برنامه
6. پیمایش اصلی (برگه ها)
مشخصات - نوار برنامه
نوار برنامه با پیمایش اصلی - تراز وسط
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-8.png?authuser=1&hl=fa)
نوار برنامه با پیمایش اصلی - تراز چپ
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-7.png?authuser=1&hl=fa)
نوار برنامه با پیمایش اصلی - جمع شد (کشو به جای برگه)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-9.png?authuser=1&hl=fa)
مشخصات - هدر برنامه
هدر برنامه با عنوان وسط
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-1.png?authuser=1&hl=fa)
هدر برنامه با کنترل تک برنامه
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-2.png?authuser=1&hl=fa)
هدر برنامه با چند کنترل برنامه
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-3.png?authuser=1&hl=fa)
هدر برنامه با یک دکمه
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-4.png?authuser=1&hl=fa)
هدر برنامه با چند دکمه
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-5.png?authuser=1&hl=fa)
هدر برنامه با سرریز متن
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-6.png?authuser=1&hl=fa)
هدر برنامه با نوار برگه مستقل
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-10.png?authuser=1&hl=fa)
سفارشی سازی
OEM ها می توانند برند خود را با تغییر ظاهر بصری نوار برنامه و هدر منعکس کنند. تغییرات ممکن است شامل موارد زیر باشد:
- آیکون های سفارشی
- فونت های سفارشی
- تنظیم ظاهر دکمه های فعال، غیرفعال و غیرفعال
- تنظیم ابعاد و محل قرارگیری دکمه ها
سیستم طراحی راهنمایی برای سفارشی کردن اجزا با استفاده از چیدمان، رنگ، تایپوگرافی و اندازه ارائه می دهد.
مثال ها
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-1.png?authuser=1&hl=fa)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-2.png?authuser=1&hl=fa)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-3.png?authuser=1&hl=fa)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-4.png?authuser=1&hl=fa)