Tab Bar — nedir, mobil uygulamalarda sekme paneli

Tab Bar Nedir?

Tab Bar (sekme çubuğu), mobil uygulama ekranının alt kısmında bulunan bir grafik arayüz öğesidir. Uygulamanın 3–5 ana bölümüne hızlı erişim sağlar. Her bölüm bir simge ve metin etiketiyle temsil edilir. Kullanıcı, ilgili bölüme geçmek için bir sekmeye dokunur. Tab Bar, her bölüm içindeki tüm ekranlarda görünür kalarak sabit bir giriş noktası sağlar.

Apple, eşit öneme sahip bölümler için Tab Bar kullanılmasını önerir. Human Interface Guidelines (2026) şunları belirtir: "Tab Bar, 3–5 sekme gösterir. Daha fazlası gerekiyorsa, son sekme kalanları içeren 'Daha Fazla' öğesi haline gelir." Google Material Design (2026) aynı amaç için Bottom Navigation'ı önerir — 3–5 öğe, aktif sekme renk ve animasyonla vurgulanır.

Üst sekme çubuğunun aksine, alt panel tek elle kullanım için daha uygundur — başparmak doğal olarak ekranın alt kısmına ulaşır. Nielsen Norman Group (2025) tarafından yapılan bir araştırma, 6 inç veya daha büyük ekrana sahip akıllı telefonlarda alt navigasyonun, üst navigasyona kıyasla görev tamamlama süresini %22 oranında azalttığını göstermiştir.

iOS'ta UITabBarController

UITabBarController, sekmeler aracılığıyla navigasyonu düzenlemek için yerleşik bir iOS denetleyicisidir. Her sekme, genellikle bir UINavigationController içinde düzenlenen kendi ekran kümesini yönetir. UITabBarController, sistem yarı saydam arka planı ve geçiş animasyonuyla ekranın alt kısmında otomatik olarak bir Tab Bar oluşturur.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Ana Sayfa",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Ara",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profil",
            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]
    }
}

Örnekteki her sekme, bölüm içinde yığın navigasyonuna izin veren bir UINavigationController içerir. tabBarItem, simgeyi, başlığı ve rozeti yapılandırır. Sistem, simgeler için otomatik olarak SF Symbols stilini uygular — dinamik tip ve çok renk desteğine sahip standart Apple sembolleri.

Android'de BottomNavigationView

BottomNavigationView, alt navigasyon panelini uygulayan Material Design Library'den bir Android bileşenidir. Android 13+'ta, gelişmiş animasyon ve uyarlanabilir davranışa sahip halefi NavigationBarView kullanılır. BottomNavigationView, Material Design 3 (Material You) spesifikasyonunu takip eder ve uygulama temalarını, dinamik renkleri ve geçiş animasyonlarını destekler.

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'a Bağlama
        navView.setupWithNavController(navController)

        // Bildirimler sekmesinde rozet ayarlama
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

BottomNavigationView bileşeni, üç stille Material Design 3'ü destekler: default (etiket + simge), labeled (daha büyük etiket) ve unlabeled (yalnızca simge). setupWithNavController yöntemi, paneli Navigation Component'e bağlayarak ekran değiştiğinde aktif sekmeyi otomatik olarak günceller. Rozetler, getOrCreateBadge aracılığıyla oluşturulur ve sayısal ve nokta göstergeleri destekler.

Tab Bar'da Rozetler ve Göstergeler

Rozetler, sekme simgelerinde bildirim, yeni mesaj veya görev sayısını gösteren sayısal veya nokta göstergeleridir. iOS'ta rozet, UITabBarItem üzerindeki badgeValue özelliği aracılığıyla ayarlanır. Android'de rozetler, BadgeDrawable (Material 3) veya NavigationBarView'da getOrCreateBadge aracılığıyla yönetilir.

Rozetler güçlü bir etkileşim aracıdır: Localytics (2025) araştırması, rozetli uygulamaların 7. günde %18 daha yüksek kullanıcı tutma oranına sahip olduğunu göstermiştir. Ancak, rozetlerin aşırı kullanımı (aynı anda 3'ten fazla) TO'yu %12 azaltır. Apple ve Google, rozetleri yalnızca ilgili bildirimler için göstermeyi ve bölüm açıldığında sıfırlamayı önerir.

Tab Bar Özelleştirme: Simgeler, Renkler, Animasyonlar

Her iki platform da Tab Bar için kapsamlı özelleştirme seçenekleri sunar. iOS'ta, arka plan rengini, aktif sekmenin tint rengini, etiket yazı tipini değiştirebilir ve SF Symbols veya özel varlıklar aracılığıyla özel simgeler ekleyebilirsiniz. Android'de özelleştirme, Material 3 stilleri, geçiş animasyonu, dalga efekti ve duvar kağıdına dayalı dinamik renkleri içerir.

// iOS'ta Tab Bar Özelleştirme
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'de, BottomNavigationView özelleştirmesi XML nitelikleri veya programlı olarak yapılır. Material 3, dinamik renkler kavramını tanıtır: renk paleti, kullanıcının duvar kağıdından oluşturulur ve bileşenlere otomatik olarak uygulanır. Geliştirici, tema aracılığıyla renkleri geçersiz kılabilir, özel gösterge animasyonu ayarlayabilir ve dalga efektini yapılandırabilir.

// Android'de BottomNavigationView Özelleştirme
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'de: app:menu="@menu/bottom_nav_menu"
// XML'de: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Alt Navigasyon için En İyi Uygulamalar

Bir Tab Bar tasarlarken, platform önerilerini ve kullanılabilirlik araştırmalarını takip etmek önemlidir. Apple HIG: en fazla 5 sekme, kısa metin, anlamsal simgeler. Material Design: 3–5 öğe, aktif öğe vurgulanmış, rozet sayacı en fazla 99. NN Group (2025): alt navigasyon, bir bölümün tüm ekranlarında görünür kalmalıdır, aksi takdirde kullanıcı bağlamı kaybeder.

Yaygın hatalar: 6+ sekme ('Daha Fazla' kullanmaya zorlar — keşfedilebilirliği azaltır), navigasyon sırasında sekme sırasını değiştirme (kullanıcının kafasını karıştırır), iç içe ekranlarda Tab Bar'ı gizleme (navigasyon çapasının kaybı). En iyi uygulamalar arasında sabit sıra, tutarlı simgeler ve metin etiketleri, yalnızca kullanıcı eylemleri için rozetler (pazarlama için değil) bulunur.

• 3–5 sekme — aşırı yüklenme olmadan hızlı seçim için en uygun sayı
• Sabit sıra — sekmeler dinamik yeniden sıralama olmadan sabit olmalıdır
• Simge + etiket — bölümü anlamak için her iki öğe de gereklidir
• Aktif sekme — renk, simge veya animasyonla görsel olarak farklılaşmalıdır
• Rozetler — bildirimler için kullanın, bölümü açarken sıfırlayın