Tab Bar — ما هو، شريط التبويب في تطبيقات الهاتف المحمول

ما هو Tab Bar؟

Tab Bar (شريط التبويب) هو عنصر واجهة رسومية يقع في الجزء السفلي من شاشة تطبيق الهاتف المحمول. يوفر وصولاً سريعاً إلى 3–5 أقسام رئيسية للتطبيق. كل قسم ممثل بأيقونة وتسمية نصية. ينقر المستخدم على تبويب للتبديل إلى القسم المقابل. يبقى Tab Bar مرئياً على جميع الشاشات داخل كل قسم، مما يوفر نقطة دخول ثابتة.

توصي Apple باستخدام Tab Bar للأقسام ذات الأهمية المتساوية. تشير إرشادات واجهة المستخدم (2026): «يعرض Tab Bar من 3 إلى 5 تبويبات. إذا احتاج الأمر المزيد، يصبح آخر تبويب عنصر «المزيد» الذي يحتوي على الباقي». يوصي Material Design من Google (2026) بـ Bottom Navigation لنفس الغرض — من 3 إلى 5 عناصر، مع تمييز التبويب النشط باللون والرسوم المتحركة.

على عكس شريط التبويب العلوي، فإن اللوحة السفلية أكثر راحة للاستخدام بيد واحدة — حيث يصل الإبهام بشكل طبيعي إلى الجزء السفلي من الشاشة. أظهرت دراسة من Nielsen Norman Group (2025) أن التنقل السفلي يقلل وقت إنجاز المهام بنسبة 22% مقارنة بالتنقل العلوي على الهواتف الذكية التي يبلغ قياس شاشتها 6 بوصات أو أكثر.

UITabBarController في iOS

UITabBarController هو وحدة تحكم مدمجة في iOS لتنظيم التنقل عبر التبويبات. يدير كل تبويب مجموعته الخاصة من الشاشات، المنظمة عادةً في UINavigationController. ينشئ UITabBarController تلقائياً Tab Bar في الجزء السفلي من الشاشة بخلفية شفافة للنظام ورسوم متحركة عند التبديل.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "الرئيسية",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "بحث",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "الملف الشخصي",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

يحتوي كل تبويب في المثال على UINavigationController، مما يسمح بالتنقل التراكمي داخل القسم. يقوم tabBarItem بتكوين الأيقونة والعنوان والشارة. يطبق النظام تلقائياً نمط SF Symbols للأيقونات — رموز Apple القياسية مع دعم النوع الديناميكي والألوان المتعددة.

BottomNavigationView في Android

BottomNavigationView هو مكون Android من Material Design Library ينفذ لوحة التنقل السفلي. في Android 13+ يُستخدم NavigationBarView — خليفته مع رسوم متحركة محسنة وسلوك تكيفي. يتبع BottomNavigationView مواصفات Material Design 3 (Material You) ويدعم تنسيق التطبيق والألوان الديناميكية والرسوم المتحركة عند التبديل.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // ربط BottomNavigation بـ NavController
        navView.setupWithNavController(navController)

        // إعداد شارة على تبويب الإشعارات
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

يدعم المكون BottomNavigationView Material Design 3 بثلاثة أنماط: default (تسمية + أيقونة)، labeled (تسمية أكبر) و unlabeled (أيقونة فقط). تربط طريقة setupWithNavController اللوحة بـ Navigation Component، مما يحدث التبويب النشط تلقائياً عند تغيير الشاشة. يتم إنشاء الشارات عبر getOrCreateBadge وتدعم المؤشرات الرقمية والنقطية.

الشارات والمؤشرات على Tab Bar

الشارات هي مؤشرات رقمية أو نقطية على أيقونات التبويبات، تعرض عدد الإشعارات أو الرسائل الجديدة أو المهام. على iOS، تُضبط الشارة عبر خاصية badgeValue على UITabBarItem. على Android، تُدار الشارات عبر BadgeDrawable (Material 3) أو getOrCreateBadge في NavigationBarView.

الشارات أداة تفاعل قوية: أظهرت أبحاث Localytics (2025) أن التطبيقات ذات الشارات تحقق احتفاظاً أعلى بنسبة 18% في اليوم السابع. ومع ذلك، فإن الإفراط في استخدام الشارات (أكثر من 3 في وقت واحد) يقلل نسبة النقر إلى الظهور بنسبة 12%. توصي Apple و Google بعرض الشارات فقط للإشعارات ذات الصلة وإعادة تعيينها عند فتح القسم.

تخصيص Tab Bar: الأيقونات والألوان والرسوم المتحركة

توفر كلتا المنصتين خيارات تخصيص واسعة لـ Tab Bar. على iOS، يمكن تغيير لون الخلفية، ولون التحديد للتبويب النشط، وخط التسمية، وإضافة أيقونات مخصصة عبر SF Symbols أو الأصول الخاصة. على Android، يشمل التخصيص أنماط Material 3، والرسوم المتحركة للتبديل، وتأثير التموج، والألوان الديناميكية المستندة إلى خلفية الشاشة.

// تخصيص Tab Bar في iOS
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

على Android، يتم تخصيص BottomNavigationView عبر سمات XML أو برمجياً. يقدم Material 3 مفهوم الألوان الديناميكية: يتم إنشاء لوحة الألوان من خلفية المستخدم وتطبق تلقائياً على المكونات. يمكن للمطور تجاوز الألوان من خلال السمة، وتعيين رسوم متحركة مخصصة للمؤشر، وتكوين تأثير التموج.

// تخصيص BottomNavigationView في Android
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// في XML: app:menu="@menu/bottom_nav_menu"
// في XML: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

أفضل ممارسات التنقل السفلي

عند تصميم Tab Bar، من المهم اتباع توصيات المنصة وأبحاث سهولة الاستخدام. Apple HIG: لا يزيد عن 5 تبويبات، نص موجز، أيقونات دلالية. Material Design: من 3 إلى 5 عناصر، العنصر النشط مميز، عداد الشارة لا يزيد عن 99. NN Group (2025): يجب أن يظل التنقل السفلي مرئياً على جميع شاشات القسم، وإلا يفقد المستخدم السياق.

الأخطاء الشائعة: 6 تبويبات أو أكثر (يجبر على استخدام «المزيد» — يقلل من قابلية الاكتشاف)، تغيير ترتيب التبويبات أثناء التنقل (يربك المستخدم)، إخفاء Tab Bar على الشاشات المتداخلة (فقدان مرتكز التنقل). تشمل أفضل الممارسات ترتيباً ثابتاً، أيقونات وتسميات نصية متناسقة، شارات فقط لإجراءات المستخدم (وليس للتسويق).

• 3–5 تبويبات — العدد الأمثل للاختيار السريع دون إرهاق
• ترتيب ثابت — يجب أن تكون التبويبات مستقرة، دون إعادة ترتيب ديناميكية
• أيقونة + تسمية — كلا العنصرين ضروريان لفهم القسم
• التبويب النشط — يجب أن يختلف بصرياً باللون أو الأيقونة أو الرسوم المتحركة
• الشارات — استخدم للإشعارات، وأعد تعيينها عند فتح القسم