Mobil geliştirmede Sheet — özü, türleri ve nasıl çalıştığı

Mobil uygulamalarda Sheet nedir

Sheet, ekranın altından yukarı kayan ve kullanıcıyı mevcut ekrandan uzaklaştırmadan ek içerik veya eylemler görüntüleyen yüzey seviyesinde bir UI bileşenidir. Tam ekran geçişlerinin aksine, Sheet bağlamı korur: kullanıcı arka plan ekranını görür ve Sheet'in nereden geldiğini anlar.

Bir Sheet'in mimarisi ayarlanabilir yükseklikte bir kapsayıcıya dayanır. Minimum durumda (collapsed), içeriğin yalnızca bir kısmı görünür — genellikle bir başlık veya küçük bir panel. Kullanıcı Sheet'i yukarı sürükleyerek genişletebilir (expanded) veya aşağı kaydırarak kapatabilir. Bu davranış, bir yığının altından çekilen fiziksel bir kağıt yaprağını andırır — adı da buradan gelir.

Google, Material Design 3 kılavuzunda (2024) Sheet kullanımı için iki temel senaryoyu vurgular: ana araç çubuğuna sığmayan ek eylemleri görüntüleme ve ayrı bir ekrana gitmeden formlar veya ayrıntılı bilgiler gösterme. iOS'ta Apple, iOS 15'ten itibaren UISheetPresentationController aracılığıyla sistem düzeyinde Sheet desteği ekleyerek modelin evrenselliğini doğrulamıştır.

Bottom Sheet türleri: standart, modal ve genişletilmiş

Material Design, her biri kendi davranışı ve uygulama alanına sahip üç tür Bottom Sheet tanımlar. Doğru türü seçmek, kullanıcı deneyimini ve platform kılavuzlarına uyumu doğrudan etkiler.

Standart Bottom Sheet

Standart Bottom Sheet modal olmayan bir bileşendir: kullanıcı Sheet'i kapatmadan arka plan ekranıyla etkileşime girebilir. Örneğin, arka planda bir ürün listesine göz atarken, kullanıcı Bottom Sheet'te filtreleri görür ve paneli kapatmadan bunları değiştirebilir. Sheet, yüksekliğini içeriğe göre ayarlar — ekranın %30'undan %90'ına kadar.

Standart Bottom Sheet arka planı engellemez ve ana içerikle etkileşime izin verir. Bu, devam etmek için zorunlu bir eylem gerektiren modal Sheet'ten temel farktır. Ek bilgiler ana senaryo için kritik olmadığında standart Sheet kullanın.

Modal Bottom Sheet

Modal Bottom Sheet, kullanıcı Sheet içinde bir eylem gerçekleştirene kadar arka plan ekranıyla etkileşimi engeller. Böyle bir Sheet her zaman genişletilmiş durumda gösterilir ve açıkça kapatılması gerekir — bir düğme, eylem veya aşağı kaydırma yoluyla. Material Design, modal Sheet'i giriş formları, onaylar ve kritik ayarlar için önerir.

Android'de modal Bottom Sheet, arka planı otomatik olarak engelleyen BottomSheetDialogFragment aracılığıyla uygulanır. iOS'ta, .mediumDetent parametresiyle UISheetPresentationController'ın modal çeşidi benzer bir davranış sağlar. Modal Sheet yalnızca bağlam kullanıcının dikkatini gerektirdiğinde kullanılmalıdır.

Genişletilmiş Bottom Sheet

Genişletilmiş Bottom Sheet, standart ve modalın özelliklerini birleştirir: collapsed durumunda modal olmayan olarak başlar, ancak yukarı sürüklendiğinde modal hale gelir. Pratikte bu, kullanıcının önce içeriğe bir göz atabileceği ve ardından Sheet'i ayrıntılı inceleme için genişletmeye veya kapatmaya karar verebileceği anlamına gelir.

Bu model özellikle haritalar ve navigasyon uygulamalarında popülerdir; alt panel, bir rota noktası hakkında kısa bilgiler gösterir ve yukarı kaydırıldığında ayrıntılarla genişler. Google Maps, yerler ve rotalar hakkında bilgi görüntülemek için tam olarak bu genişletilmiş Sheet'i kullanır.

Android'de Bottom Sheet: Material Design ve Jetpack Compose

Android SDK, klasik View tabanlı yaklaşımdan modern Jetpack Compose'a kadar Bottom Sheet uygulamak için çeşitli API'ler sağlar. Android için Material Components kitaplığı, BottomSheetDialogFragment ve BottomSheetBehavior'un hazır uygulamalarını içerir.

XML düzeninde BottomSheetBehavior

BottomSheetBehavior, herhangi bir View'a eklenen ve ekrandaki konumunu kontrol eden Material Components sınıfıdır. Geliştirici üç durum belirler: STATE_COLLAPSED, STATE_EXPANDED ve STATE_HIDDEN. Behavior, sürükleme hareketlerini ve animasyonu otomatik olarak işler.

val sheet = findViewById<View>(R.id.bottom_sheet)
val behavior = BottomSheetBehavior.from(sheet)
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
behavior.peekHeight = 200

Jetpack Compose'ta Bottom Sheet

Jetpack Compose, Material 3'teki ModalBottomSheet bileşeni aracılığıyla daha bildirimsel bir API sağlar. View tabanlı yaklaşımın aksine, Compose'ta Bottom Sheet, durum ve içerik kabul eden bir composable işlevidir. Sheet, sürükleme sırasında görünme, gizlenme ve yükseklik değişikliklerini otomatik olarak canlandırır.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(onDismissRequest = onDismiss) {
        Text("Filtreler")
        Button(onClick = onDismiss) { Text("Uygula") }
    }
}

Modal senaryolar için BottomSheetDialogFragment

BottomSheetDialogFragment, Bottom Sheet olarak görüntülenen özel bir DialogFragment'tir. Modaliteyi, yaşam döngüsünü ve yapılandırma değişikliklerini otomatik olarak işler. Geliştiricinin yalnızca onCreateView'ı geçersiz kılması ve Sheet düzenini döndürmesi gerekir. Google belgelerine (Android Developers, 2024) göre BottomSheetDialogFragment, klasik Android'de modal Bottom Sheet'ler için önerilen yaklaşımdır.

iOS'ta Sheet: UISheetPresentationController ve SwiftUI

Apple, iOS 15'ten itibaren UISheetPresentationController aracılığıyla sistem düzeyinde Sheet desteği sunmuştur. Bundan önce geliştiriciler, Bottom Sheet'i özel geçişler veya üçüncü taraf kitaplıklarla manuel olarak uyguluyordu. Apple'ın yerel Sheet'i, önceden tanımlanmış genişletme seviyeleri olan detents'i destekler.

UIKit'te UISheetPresentationController

UISheetPresentationController, bir View Controller'ı Sheet olarak görüntüleyen yerleşik bir sunum denetleyicisidir. Geliştirici, Sheet'in durabileceği yükseklik değerleri olan bir detents dizisi belirtir. iOS 16, isteğe bağlı yükseklikte özel detents eklemiştir. Apple, birincil olarak medium (.medium) ve large (.large) detents kullanılmasını önerir.

let viewController = MySheetViewController()
if let sheet = viewController.sheetPresentationController {
    sheet.detents = [.medium, .large]
    sheet.prefersGrabberVisible = true
    sheet.preferredCornerRadius = 16
}
present(viewController, animated: true)

SwiftUI'da .sheet değiştiricisi

SwiftUI, Sheet görüntülemesini bir duruma bağlayan .sheet değiştiricisini sağlar. Yayınlanan bir değişken true olduğunda, SwiftUI otomatik olarak Sheet'i gösterir. SwiftUI ayrıca iOS 16'da eklenen .presentationDetents değiştiricisi aracılığıyla detents'i destekler.

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Sheet'i Göster") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                FilterView()
                    .presentationDetents([.medium, .large])
            }
    }
}

Çapraz platform frameworklerinde Sheet: Flutter ve React Native

Çapraz platform frameworkleri de Bottom Sheet'i destekler ve davranışı hedef platforma göre uyarlar. Flutter ve React Native, farklı esneklik derecelerinde yerleşik ve özel uygulamalar sağlar.

Flutter'da Bottom Sheet

Flutter SDK, Bottom Sheet görüntülemek için iki yöntem içerir: showBottomSheet (standart) ve showModalBottomSheet (modal). Flutter'da Material Design, Android'dekiyle aynı ilkeleri izler — Sheet alttan görünür, sürüklemeyi destekler ve ayarlanabilir yüksekliğe sahiptir. Detents ile genişletilmiş davranış için DraggableScrollableSheet kullanılır.

Scaffold.of(context).showBottomSheet((context) {
    return Container(
        padding: EdgeInsets.all(16),
        child: Column(
            children: [
                Text("Sheet İçeriği"),
                ElevatedButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text("Kapat")
                )
            ]
        )
    );
})

React Native'de Bottom Sheet

React Native çekirdeğinde yerleşik bir Bottom Sheet bileşeni yoktur, bu nedenle geliştiriciler üçüncü taraf kitaplıklar kullanır. En popüler olanı @gorhom/bottom-sheet'tir (GitHub'da 7.000'den fazla yıldız, 2024). Snap noktaları, animasyonlar ve sabit başlıklar desteğiyle hareket tabanlı bir Bottom Sheet sağlar. Kitaplık, 60 FPS performansı için Reanimated 2 ve Gesture Handler üzerine inşa edilmiştir.

En iyi uygulamalar ve yaygın hatalar

Bottom Sheet'in doğru kullanımı, platform kılavuzlarına uymayı ve Sheet'in uygun olduğu senaryoları anlamayı gerektirir. Sheet tasarlarken temel önerileri ve yaygın hataları gözden geçirelim.

Bottom Sheet ne zaman kullanılır

Bottom Sheet, ekrandaki ana içeriğe ek olan eylemler için optimale yakındır. Filtreler, sıralama, seçenek seçimi, bir öğe hakkında kısa bilgi — tipik senaryolar. Material Design, tüm ekranı kaplamaması gereken ancak bir Action Sheet veya Popup Menu'den daha fazla alan gerektiren araçlar için Bottom Sheet kullanılmasını önerir.

Bottom Sheet ne zaman KULLANILMAZ

Kritik uyarılar veya hatalar için Bottom Sheet kullanmayın — bunun için diyalog pencereleri daha uygundur. Kaydırma gerektiren çok sayıda giriş alanı olan Sheet'lerden kaçının: kullanıcı klavyeye ulaşmakta zorlanır ve bağlamı kaybeder. Bir Sheet yedi'den fazla eylem öğesi içeriyorsa, Sheet yerine ayrı bir ekran düşünün.

Hata: çok yüksek collapsed modu

Yaygın bir hata, peekHeight (daraltılmış durumdaki yükseklik) değerini ekranın %40'ından fazlasına ayarlamaktır. Kullanıcı Sheet'i tamamen mi gördüğünü yoksa genişletilebilir mi olduğunu anlamaz. Material Design, içeriğin gözle görülür bir kısmını gizli bırakmak ve sürüklemeyi teşvik etmek için peekHeight'ı ekran yüksekliğinin %15-30'u arasında önerir.

Hata: iOS'ta kaydırma hareketini yok saymak

iOS'ta kullanıcılar, bir Sheet'in herhangi bir konumdan aşağı kaydırılarak kapatılabileceğini bekler. Bu hareketi devre dışı bırakırsanız (UISheetPresentationController.prefersEdgeAttachedInCompactHeight aracılığıyla), kullanıcı Sheet'i alışılmış şekilde kapatmaya çalışırken hayal kırıklığı yaşar. Apple İnsan Arayüzü Kılavuzları (2024), kapatmak için kaydırmanın iOS kullanıcılarının temel bir beklentisi olduğunu vurgular.