Bottom Navigation: الأساسيات، BottomNavigationView و TabView

ما هو Bottom Navigation؟

Bottom Navigation هو نمط تنقل حيث يمكن الوصول إلى الأقسام الرئيسية للتطبيق عبر لوحة في الجزء السفلي من الشاشة. أصبح هذا النمط معيارًا للتصميم المحمول بفضل سهولة استخدامه بيد واحدة. على عكس القائمة الجانبية (Drawer)، فإن Bottom Navigation مرئي دائمًا ولا يتطلب إيماءات إضافية لفتحه.

يحدد Material Design 3 (2026) Navigation Bar كمكون بثلاث حالات: default (أيقونة + تسمية)، labeled (تسمية موسعة، علامة تبويب واحدة نشطة)، و unlabeled (أيقونات فقط). توصي Google باستخدام Navigation Bar للتطبيقات التي تحتوي على 3–5 أقسام متساوية. لـ 6+ أقسام — Navigation Drawer. في iOS SwiftUI، يستخدم TabView تلقائيًا لوحة سفلية بنمط النظام.

أظهرت دراسة UX Movement (2025) أن Bottom Navigation يحسن وقت إنجاز المهام بنسبة 27% مقارنة بالقائمة المنزلقة، حيث يرى المستخدم جميع الأقسام المتاحة دون إجراءات إضافية. ينخفض عدد النقرات غير الصحيحة بنسبة 34% بفضل أهداف اللمس الكبيرة (48x48 dp كحد أدنى على Android، 44x44 pt على iOS).

BottomNavigationView في Android (Material 3)

BottomNavigationView في Android هو مكون من مكتبة Material 3 (com.google.android.material.navigation.NavigationBarView). لقد حل محل BottomNavigationView القديم من Material 2 وأضاف دعم الألوان الديناميكية لـ Material You، مؤشر متحرك لعلامة التبويب النشطة وشارات مدمجة. يتم تكوين المكون عبر قائمة XML وهو متوافق تمامًا مع Navigation Component.

// النشاط مع BottomNavigationView و NavHostFragment
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // المزامنة التلقائية للتنقل
        navView.setupWithNavController(navController)

        // إعداد الشارة
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// قائمة XML لـ Bottom Navigation (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="الرئيسية" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="الدردشات" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="الملف الشخصي" />
// </menu>

يدعم NavigationBarView من Material 3 ثلاثة أوضاع labelVisibilityMode: LABEL_VISIBILITY_AUTO (افتراضي — تظهر التسمية لعلامة التبويب النشطة)، LABEL_VISIBILITY_LABELED (تسميات للجميع)، LABEL_VISIBILITY_UNLABELED (أيقونات فقط). يتم تكوين المؤشر المتحرك لعلامة التبويب النشطة عبر itemActiveIndicatorStyle مع تأثير ripple مخصص.

TabView في SwiftUI لنظام iOS

TabView هي حاوية SwiftUI المدمجة لإنشاء تنقل سفلي. يتم تعريف كل علامة تبويب باستخدام معدل .tabItem مع أيقونة ونص. ينشئ TabView تلقائيًا UITabBarController داخليًا ويدعم جميع ميزات اللوحة الأصلية: الشارات، لون الشارة، حركة التبديل والتكيف مع Dynamic Type.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("الرئيسية", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("بحث", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("الإشعارات", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("الملف الشخصي", systemImage: "person.circle.fill")
                }
        }
    }
}

يدعم TabView المعدل .badge (iOS 15+)، الذي يقبل Int (شارة رقمية) أو String (شارة نصية). يمكن تغيير لون الشارة عبر .badgeProminence(.increased) — يجعل الشارة أكثر سطوعًا. يتم تكوين حركة تبديل علامات التبويب عبر .tabViewStyle(.automatic) أو أنماط مخصصة. للتحكم البرمجي في التبديل، يُستخدم @State مع selection.

الجمع بين التنقل السفلي والمكدس

Bottom Navigation نادرًا ما يُستخدم بمفرده — كل علامة تبويب تحتوي عادةً على متصفح مكدس (NavigationView/NavigationStack في SwiftUI، NavHostFragment في Android). يمنح هذا المزيج المستخدم وصولًا سريعًا إلى الأقسام (Tab) وتنقلًا عميقًا داخل كل قسم (Stack). هذه هي البنية المعمارية القياسية لتطبيقات الإنتاج.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("الرئيسية", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("بحث", systemImage: "magnifyingglass")
            }
        }
    }
}

// داخل HomeView — تنقل مكدس
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

في Android، يتم تنفيذ نفس المزيج عبر NavHostFragment لكل علامة تبويب. يقوم Navigation Component بأتمتة إنشاء مكدس الرجوع لكل علامة تبويب: عند تبديل علامات التبويب، يتم الحفاظ على حالة المكدس، وعند العودة — يتم استعادتها. يوفر هذا تجربة مستخدم سلسة، كما في تطبيقات نظام Google (Play Market، YouTube).

Material 3: الألوان الديناميكية والرسوم المتحركة

Material 3 (Material You) يقدم تغييرًا رئيسيًا في Bottom Navigation — ألوان ديناميكية يتم توليدها من خلفية المستخدم. يستخرج النظام الألوان السائدة من الخلفية وينشئ لوحة من 5 ألوان رئيسية. يطبق NavigationBarView هذه الألوان تلقائيًا: علامة التبويب النشطة تحصل على اللون الأساسي، غير النشطة — متغير onSurface.

أصبحت حركة مؤشر علامة التبويب النشطة سلسة: عند التبديل، يتحرك المؤشر بحركة محسنة إلى علامة التبويب الجديدة مع الاستيفاء. يستخدم تأثير ripple عند اللمس اللون الثانوي. Bottom Navigation في Material 3 يدعم أيضًا الرسوم المتحركة المخصصة عبر itemActiveIndicatorStyle — يمكن للمطور تعيين الشكل (بيضاوي، مستطيل)، الهوامش ولون المؤشر.

<!-- نمط المؤشر النشط لـ NavigationBarView -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

توصيات UX لـ Bottom Navigation

عند تصميم Bottom Navigation، يجب مراعاة أبحاث سهولة الاستخدام. NN Group (2026): يجب أن يكون ارتفاع اللوحة السفلية 56 dp على الأقل، أهداف اللمس — 48 dp على الأقل. نص التسميات — بحد أقصى 12 حرفًا (لاتيني) أو 8 أحرف (سيريلي). يجب أن تختلف علامة التبويب النشطة ليس فقط في اللون ولكن أيضًا في حالة الأيقونة (مملوءة vs محددة).

يوصي Material Design 3 بالأنماط التالية: 4 علامات تبويب — مثالية للمسح السهل؛ أيقونة "+" في المنتصف (FloatingActionButton) — للإجراء الرئيسي؛ الشارات — فقط لعدادات إجراءات المستخدم. تجنب: استخدام Bottom Navigation مع علامتي تبويب (استخدم Tab Layout بدلاً من ذلك)، تغيير ترتيب علامات التبويب ديناميكيًا، إخفاء اللوحة على الشاشات المتداخلة.

• الارتفاع — 56 dp كحد أدنى للوصول المريح للإبهام
• التباين — يجب أن تكون علامة التبويب النشطة قابلة للتمييز (اللون + تعبئة الأيقونة)
• التسميات — قصيرة، 1-2 كلمة، بدون اقتطاع (لا يزيد عن 12 حرفًا)
• الترتيب — ثابت، من الأكثر أهمية إلى الأقل أهمية
• العدادات — فقط لإشعارات المستخدم، وليس للتسويق