يقدم شريط التحكم عناصر التحكم المرتبطة بعرض معين. يعرض هذا الإصدار ما يصل إلى 5 عناصر تحكم في الإصدار غير الموسّع، وما يصل إلى 5 عناصر تحكم إضافية عند توسيعه.
في تطبيقات الوسائط، يُستخدم شريط التحكّم في عرض التشغيل لعناصر التحكّم "تشغيل/إيقاف مؤقت" و"السابق" و"التالي" وعناصر التحكّم الأخرى، بما في ذلك عناصر الإجراءات المخصّصة التابعة لجهات خارجية.
علم التشريح
يحتوي شريط التحكم على تنسيقين: غير موسع وموسَّع. ويمكن أن يتضمّن الإصدار غير الموسّع ما يصل إلى 5 عناصر تحكّم. في تطبيقات الوسائط، أحد هذه الإجراءات هو "التشغيل/الإيقاف المؤقت".
عند توسيع شريط التحكم، يمكن أن يتضمن ما يصل إلى 5 عناصر تحكم إضافية في الصف الثاني. يمكن للمستخدمين اختيار زر القائمة الكاملة لتوسيع شريط التحكّم أو تصغيره.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=8&hl=ar)
2- جزء موسّع من شريط الإجراءات
3- أحد عناصر التحكّم
4- زر القائمة الكاملة (لتوسيع شريط التحكّم وتصغيره)
المواصفات
شريط التحكّم
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=8&hl=ar)
تم توسيع شريط التحكّم.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=8&hl=ar)
وضع عناصر تحكّم من 1 إلى 4 على شريط التحكّم مع عنصر تحكّم مركزي ثابت
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=8&hl=ar)
وضع عناصر تحكّم من 1 إلى 4 على شريط التحكّم بدون عنصر تحكّم ثابت
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=8&hl=ar)
وضع عناصر التحكم من 6 إلى 9 على شريط التحكم
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=8&hl=ar)
تغيير حجم التخطيطات
توضح هذه التخطيطات المرجعية كيفية تكييف شريط التحكم ليناسب الشاشات ذات العرض والارتفاع المختلفة. (يتم تحديد فئات العرض والارتفاع في قسم التصميم). تجدر الإشارة إلى أنّ جميع قيم البكسل تكون في وحدات البكسل المعروضة، قبل حدوث أي انخفاض في أخذ العينات أو زيادة العيّنات.
شاشات عريضة للغاية تضمّ الهوامش أكثر من 1028 بكسل مستقل الكثافة
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=8&hl=ar)
شاشات عريضة جدًا ولا تفصل بين الهوامش أكثر من 1028 بكسل مستقل الكثافة
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=8&hl=ar)
شاشات عريضة
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=8&hl=ar)
شاشات بعرض عادي
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=8&hl=ar)
الشاشات القصيرة
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=8&hl=ar)
تم توسيع شريط التحكّم على الشاشات التي تقلّ مدتها عن 1000 بكسل مستقل الكثافة.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=8&hl=ar)
تم توسيع شريط التحكّم على الشاشات القصيرة.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=8&hl=ar)
تم توسيع شريط التحكّم على الشاشات التي يزيد طولها عن 1000 بكسل مستقل الكثافة.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=8&hl=ar)
الأنماط
اللون
عنصر | اللون(الوضع اليومي) | الألوان (الوضع الليلي) |
---|---|---|
الرموز الأساسية | بالأبيض | أبيض @ 88٪ |
حاجب ملء الشاشة | أسود @ 78٪ | أسود @ 84% |
حاجب متدرج | يُحدَّد لاحقًا | يُحدَّد لاحقًا |
مقاسات الشعار
عنصر | الحجم (dp) |
---|---|
شريط التحكّم | 96 (الشاشات القصيرة) / 128 (ارتفاع عادي وأعلى) |
الرمز الأساسي | 44 |
أمثلة
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=8&hl=ar)