Bottom Sheet Nedir?
Bottom sheet, ekranın altından yukarı doğru kayan bir panel. Kullanıcı ana içerikle bağlamını kaybetmeden ek seçeneklere, filtrelere veya detaylara erişebiliyor. 2026 itibarıyla hem iOS hem Android'de bottom sheet, klasik modal'ın yerini neredeyse tamamen aldı. Sebebi basit: kullanıcılar telefonlarını tek elle tutuyor ve ekranın alt kısmına erişmek üst kısma göre çok daha kolay.
Neden Klasik Modal Yerine Bottom Sheet?
- Tek elle kullanımda ergonomik (başparmak erişim alanı)
- Ana içerik kısmen görünür kalır, bağlam korunur
- Gesture ile kapatılabilir (aşağı sürükle)
- Farklı yükseklik seviyelerinde durabilir (detent)
- Kullanıcıya daha az "bloke edilmiş" hissi verir
- Modern platform yönergelerine uygun (HIG, Material 3)
iOS: Sheet ve PresentationDetents
iOS 16 ile Apple .sheet modifier'ına detent desteği ekledi. SwiftUI ile kullanımı oldukça temiz:
- .medium: Ekranın yarısına kadar açılır (half-sheet)
- .large: Tam ekran kaplar
- .fraction(0.3): Ekranın %30'u kadar (custom)
- .height(200): Sabit piksel yüksekliği
UIKit Tarafı
UISheetPresentationController ile programatik kontrol mümkün:
- detents: Hangi seviyelerde durabilir
- prefersGrabberVisible: Üstteki tutma çubuğu
- preferredCornerRadius: Köşe yuvarlaklığı
- prefersEdgeAttachedInCompactHeight: Compact modda davranış
- largestUndimmedDetentIdentifier: Arka planı karartmadan açık kalma seviyesi
iOS'ta .sheet kullanırken interactiveDismissDisabled() ile gesture dismiss'i kapatabilirsiniz. Ancak bunu sadece form gibi veri kaybı riski olan senaryolarda yapın.
Android: BottomSheetDialog ve BottomSheetBehavior
Android tarafında iki yaklaşım var:
BottomSheetDialogFragment
- Bağımsız dialog olarak açılır
- setCancelable(false) ile dismiss engellenebilir
- STATE_COLLAPSED, STATE_EXPANDED, STATE_HALF_EXPANDED, STATE_HIDDEN
- peekHeight ile minimum görünür yükseklik ayarlanır
BottomSheetBehavior (CoordinatorLayout)
- Layout'un bir parçası olarak yaşar (persistent bottom sheet)
- Harita uygulamaları gibi sürekli görünür senaryolar için ideal
- isFitToContents, halfExpandedRatio, expandedOffset
Jetpack Compose
Compose'da ModalBottomSheet composable'ı 2024'ten beri stabil:
- sheetState ile programatik kontrol (show/hide)
- dragHandle parametresi ile tutma çubuğu
- Scaffold ile entegre kullanım
- skipPartiallyExpanded ile yarı açık durumu atlama
React Native: @gorhom/bottom-sheet
React Native ekosisteminde standart bottom sheet kütüphanesi @gorhom/bottom-sheet. Reanimated 3+ ve Gesture Handler 2+ ile çalışır.
Temel Ozellikler
- snapPoints: Durma noktaları (ör. ['25%', '50%', '90%'])
- enablePanDownToClose: Aşağı sürükleyerek kapatma
- backdropComponent: Arka plan overlay'i
- handleComponent: Custom tutma çubuğu
- index: Başlangıç snap noktası
- enableDynamicSizing: İçeriğe göre otomatik boyutlandırma (v5)
BottomSheetModal vs BottomSheet
- BottomSheet: Ekranda her zaman mevcut (persistent)
- BottomSheetModal: Portal üzerinden açılır/kapanır (modal davranış)
- BottomSheetModalProvider ile wrap etmek zorunlu
BottomSheetScrollView / FlatList
- Bottom sheet içinde scroll gerekiyorsa normal ScrollView yerine BottomSheetScrollView kullanılmalı
- Gesture çakışmalarını otomatik çözer
- BottomSheetFlatList ve BottomSheetSectionList de mevcut
Detent Seviyeleri: Nasıl Tasarlanır?
| Seviye | Kullanım Alanı | Oran |
|---|---|---|
| Peek | Bilgi önizleme, harita detayı | %15-25 |
| Half | Filtre, seçenek listesi, paylaşım | %40-55 |
| Expanded | Form, uzun içerik, detay sayfası | %85-95 |
Dikkat edilmesi gerekenler:
- 2'den fazla detent nadiren gerekir (peek + expanded genelde yeterli)
- Safe area inset'lerini hesaba katın (özellikle iPhone'larda home indicator)
- Klavye açıldığında bottom sheet yüksekliğini otomatik ayarlayın
- Landscape modda detent oranlarını yeniden düşünün
Modal vs Bottom Sheet: Karar Kriterleri
Bottom Sheet Kullan
- Filtre ve sıralama seçenekleri
- Paylaş menüsü
- Hızlı aksiyon menüsü (long press sonrası)
- Harita/liste detay önizleme
- Yorum yazma alanı
- Seçenek picker'ları
Klasik Modal Kullan
- Kritik uyarı ve onay diyalogları (silme, çıkış)
- Tam ekran form (kayıt, profil düzenleme)
- Medya önizleme (tam ekran fotoğraf/video)
- Uygulama ilk açılış izin talepleri
Gesture Dismiss ve Accessibility
- Aşağı sürükleme ile kapatma varsayılan olmalı
- VoiceOver/TalkBack ile "kapat" aksiyonu erişilebilir olmalı
- Arka plana dokunarak kapatma (backdrop tap) sunulmalı
- accessibilityRole="dialog" ve accessibilityLabel tanımlanmalı
- Escape tuşu desteği (external keyboard kullanıcıları)
- Focus trap: bottom sheet açıkken arka plandaki elementlere focus geçmemeli
Yaygın Hatalar
- Safe area'yı görmezden gelmek (içerik home indicator altında kalır)
- Her durumda bottom sheet kullanmak (alert dialog gibi kritik senaryolarda klasik modal daha iyi)
- Çok fazla detent tanımlamak (kullanıcı kafası karışır)
- Sheet içinde nested scroll'u düzgün handle etmemek
- Keyboard avoidance'ı unutmak (form içeren sheet'lerde input gizlenir)
Bottom sheet, mobil UX'in en güçlü pattern'lerinden biri. Doğru kullanıldığında kullanıcı akışını bozmadan zengin etkileşim sunar. Ama her şey bottom sheet olmalı diye bir kural yok; kritik kararlar için hala klasik modal en doğru tercih.