Bottom Navigation: مبانی، BottomNavigationView و TabView

Bottom Navigation چیست؟

Bottom Navigation — الگوی ناوبری که در آن بخش‌های اصلی برنامه از طریق پنل پایین صفحه قابل دسترسی هستند. این الگو به دلیل راحتی استفاده با یک دست به استاندارد طراحی موبایل تبدیل شده است. برخلاف منوی کناری (Drawer)، Bottom Navigation همیشه قابل مشاهده است و برای باز شدن نیاز به حرکات اضافی ندارد.

Material Design 3 (2026) Navigation Bar را به عنوان کامپوننتی با سه حالت تعریف می‌کند: default (آیکون + برچسب)، labeled (برچسب بزرگ شده، یک زبانه فعال) و unlabeled (فقط آیکون‌ها). Google Navigation Bar را برای برنامه‌های با ۳–۵ بخش هم‌ارز توصیه می‌کند. برای ۶+ بخش — Navigation Drawer. در iOS SwiftUI، TabView به طور خودکار از پنل پایین با استایل سیستمی استفاده می‌کند.

تحقیق UX Movement (2025) نشان داد: Bottom Navigation زمان انجام وظایف را ۲۷٪ در مقایسه با منوی کشویی بهبود می‌بخشد، زیرا کاربر تمام بخش‌های موجود را بدون اقدامات اضافی می‌بیند. تعداد کلیک‌های اشتباه به دلیل اهداف لمسی بزرگ (حداقل 48x48 dp در Android، 44x44 pt در iOS) ۳۴٪ کاهش می‌یابد.

BottomNavigationView در Android (Material 3)

BottomNavigationView در Android — کامپوننتی از Material 3 Library (com.google.android.material.navigation.NavigationBarView). این کامپوننت جایگزین BottomNavigationView قدیمی از Material 2 شده و پشتیبانی از رنگ‌های پویای Material You، نشانگر متحرک زبانه فعال و نشان‌های داخلی را اضافه کرده است. کامپوننت از طریق XML-منو پیکربندی شده و کاملاً با Navigation Component سازگار است.

// Activity با 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>

Material 3 NavigationBarView از سه حالت 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 ایجاد back stack را برای هر زبانه خودکار می‌کند: هنگام جابجایی زبانه‌ها وضعیت پشته ذخیره می‌شود، هنگام بازگشت — بازیابی می‌شود. این UX روانی مانند برنامه‌های سیستمی Google (Play Market, YouTube) ارائه می‌دهد.

Material 3: رنگ‌های پویا و انیمیشن‌ها

Material 3 (Material You) تغییر کلیدی در Bottom Navigation ایجاد می‌کند — رنگ‌های پویا که از کاغذدیواری کاربر تولید می‌شوند. سیستم رنگ‌های غالب را از wallpaper استخراج کرده و پالتی از ۵ تن کلیدی ایجاد می‌کند. NavigationBarView به طور خودکار این رنگ‌ها را اعمال می‌کند: زبانه فعال رنگ primary را دریافت می‌کند، زبانه‌های غیرفعال — onSurface variant.

انیمیشن نشانگر زبانه فعال روان شده است: هنگام جابجایی نشانگر با درون‌یابی به سمت زبانه جدید حرکت می‌کند. افکت ripple در لمس از رنگ secondary استفاده می‌کند. 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 باید تحقیقات کاربردپذیری را در نظر گرفت. NN Group (2026): پنل پایین باید حداقل 56 dp ارتفاع داشته باشد، اهداف لمسی — حداقل 48 dp. متن برچسب‌ها — حداکثر ۱۲ کاراکتر (لاتین) یا ۸ کاراکتر (سیریلیک). زبانه فعال باید نه تنها از نظر رنگ، بلکه از نظر وضعیت آیکون (filled vs outlined) نیز متفاوت باشد.

Material Design 3 الگوهای زیر را توصیه می‌کند: ۴ زبانه — برای اسکن آرام optimal؛ نماد «+» در مرکز (FloatingActionButton) — برای اقدام اصلی؛ نشان‌ها — فقط برای شمارنده‌های اقدامات کاربر. توصیه نمی‌شود: استفاده از Bottom Navigation با ۲ زبانه (بهتر Tab Layout)، تغییر ترتیب زبانه‌ها به صورت پویا، مخفی کردن پنل در صفحه‌های تو در تو.

• ارتفاع — حداقل 56 dp برای لمس راحت با انگشت شست
• کنتراست — زبانه فعال باید قابل تشخیص باشد (رنگ + پر شدن آیکون)
• برچسب‌ها — کوتاه، ۱-۲ کلمه، بدون برش (حداکثر ۱۲ کاراکتر)
• ترتیب — ثابت، از مهم‌ترین به کم‌اهمیت‌ترین
• شمارنده‌ها — فقط برای اعلان‌های کاربر، نه برای بازاریابی