iOS 26'da SwiftUI Toolbar: Liquid Glass Grupları, Spacer'lar ve Başlıklar

Bir uygulamayı iOS 26 SDK ile yeniden derlediğinizde tek satır değiştirmeden toolbar farklı görünür. Düğmeler Liquid Glass üzerinde yüzer, komşu öğeler bir kapsülü paylaşır, arama alanı ekranın altına iner ve inline başlık her zaman ortada kalmaz. Bu rehber iOS 26'da SwiftUI toolbar'ın hangi öğeleri bir arada tutacağına nasıl karar verdiğini ve kontrolü hangi API'lerle elinize alabileceğinizi anlatıyor.

Apple'ın WWDC25 oturumları Build a SwiftUI app with the new design ve What's new in SwiftUI'a, Apple'ın dokümantasyonuna ve iOS geliştiricisi @sarunw'nun paylaşımlarına dayanıyor. Aksi belirtilmedikçe buradaki API'ler iOS 26.0 ile geldi ve bazı davranışlar ara sürümler arasında değişti; bu yüzden desteklediğiniz sürümlerde kontrol edin. Son bölüm, bu toolbar'ların iPhone Duo'da ne olduğunu anlatıyor.

iOS 26 toolbar öğelerini Liquid Glass'ta nasıl gruplar?

iOS 26'da toolbar öğeleri, içeriğinizin üzerinde yüzen ve altındakine uyum sağlayan bir Liquid Glass yüzeyinde durur. Apple'ın oturumu temel kuralı açıkça söylüyor: "Toolbar öğeleri otomatik olarak gruplanır." Aynı placement'ta yan yana duran öğeler tek bir kapsülü paylaşırken sistemin geri düğmesi kendi kapsülünü korur.

Gruplama genellikle istediğiniz şeydir, çünkü bar'ı sakin tutar. Sorun, birbiriyle ilgisiz eylemler aynı kapsüle düştüğünde başlar. Apple'ın forumlarındaki bir geliştirici, iki leading öğenin farklı placement'lara sahip olsalar bile bir spacer onları ayırana kadar her zaman birleştiğini fark etti.

Apple camın içindekilerin görünümünü de değiştirdi. Toolbar ikonları artık daha çok yerde tek renkli; bu da "görsel gürültüyü azaltıyor." Hâlâ renklendirebilirsiniz, ama Apple'ın tavsiyesi bunu "bir eylem çağrısı veya sonraki adım gibi bir anlam iletmek için kullanmak, yalnızca görsel efekt için değil." Oturum ayrıca bar öğelerinin arkasındaki özel arka planları veya karartmaları kaldırmanızı istiyor, çünkü bunlar yeni scroll edge effect ile çakışıyor. Bu efekt iOS 27'de yeniden değişiyor; ayrıntıları SwiftUI scroll edge effect rehberimizde bulabilirsiniz.

Öne çıkan bir düğme neden kendi kapsülünü alır?

Done veya Save gibi birincil bir eylem çevresindeki düğmelerden ayrışmalıdır. iOS 26'da bunu yeni cam düğme stilleriyle elde edersiniz. Apple'ın oturumu bunları "uygulamanızdaki her düğmeye Liquid Glass getiren" stiller olarak tanıtıyor: standart bir düğme için .glass, öne çıkan bir düğme için .glassProminent.

Bir toolbar'da öne çıkan bir düğme gruplamanın işleyişini de değiştirir. @sarunw'nun ifadesiyle: "iOS 26 toolbar'ında öne çıkan bir düğme hiçbir zaman bir cam kapsülü paylaşmaz." .buttonStyle(.glassProminent) ekleyin; düğme grubundan çıkıp kendi renkli dairesine geçer.

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
        Button("Done", systemImage: "checkmark") { save() }
            .buttonStyle(.glassProminent)
    }
}

Bu örnekte Share normal bir cam arka planı korur, Done ise kendi renkli şeklinde ayrı durur. Rengi seçmek için .tint(_:) ekleyin. Apple'ın What's new in SwiftUI oturumu aynı fikri birincil bir eylemde .buttonStyle(.borderedProminent) ve .tint(.pink) ile gösteriyor.

Bunu her bar'da tek bir eylem için kullanın. Her şey öne çıkarsa hiçbir şey öne çıkmaz. Ayrıca bir forum raporuna göre iOS 26.1 release candidate'ta .glassProminent toolbar düğmeleri navigasyondan sonra yaklaşık bir saniye renksiz göründü. Bir Apple mühendisi bunun "bir hata gibi göründüğünü" söyledi; bu yüzden desteklediğiniz sürümleri kontrol edin.

Toolbar grupları ToolbarSpacer ile nasıl ayrılır?

Otomatik gruplama yanlış öğeleri bir araya getirdiğinde ToolbarSpacer kullanın. Apple onu "toolbar'da öğeler arasında görsel kırılmalar oluşturan" bir öğe olarak tanımlıyor. Initializer'ı init(_ sizing: SpacerSizing = .flexible, placement: ToolbarItemPlacement = .automatic) ve iOS 26.0'dan itibaren kullanılabilir.

Apple'ın Landmarks örneği, detay toolbar'ını üç bölüme ayırmak için fixed spacer'lar kullanıyor: önce paylaşma, ardından favori ve koleksiyonlar, en son da inspector düğmesi.

.toolbar {
    ToolbarItem {
        ShareLink(item: landmark, preview: landmark.sharePreview)
    }
    ToolbarSpacer(.fixed)
    ToolbarItemGroup {
        LandmarkFavoriteButton(landmark: landmark)
        LandmarkCollectionsMenu(landmark: landmark)
    }
    ToolbarSpacer(.fixed)
    ToolbarItem {
        Button("Info", systemImage: "info") { showInspector() }
    }
}

Bu örnek Apple'ınkinin kısaltılmış hali. Birbiriyle ilgili iki düğme bir kapsülü paylaşırken Share ve Info'nun her biri kendi kapsülünü alıyor. Spacer'a çevresindeki öğelerle aynı placement'ı verin, örneğin ToolbarSpacer(.fixed, placement: .topBarLeading). Placement verilmezse spacer .automatic kullanır ve kastettiğiniz öğelerin arasına düşmeyebilir; forumdaki geliştiriciyi zorlayan da buydu.

Profil fotoğrafı gibi hiç cam üzerinde durmaması gereken tek bir öğe için Apple'ın oturumu ToolbarItem üzerinde .sharedBackgroundVisibility(.hidden) gösteriyor. Bu, öğeyi arka plansız kendi grubuna ayırır.

Alt bar'daki arama alanına kendi kapsülü nasıl verilir?

iPhone'da iOS 26 aramayı ekranın altına taşır. Apple'ın oturumuna göre toolbar'daki arama "alanı ekranın altına, kolay erişilebilecek bir yere yerleştirir." Alanın kendi alt bar öğeleriniz arasında nereye gideceğine karar vermek için search türünde bir DefaultToolbarItem yerleştirin.

İşin püf noktası, arama alanının da bir toolbar öğesi olması. @sarunw'nun belirttiği gibi iOS 26'da "yanındaki düğmelerle birleşir." Onun çözümü, alana kendi kapsülünü vermek için her iki yanına fixed bir ToolbarSpacer koymak:

NavigationStack {
    NoteList()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Filter", systemImage: "line.3.horizontal.decrease") { }
            }
            ToolbarSpacer(.fixed, placement: .bottomBar)
            DefaultToolbarItem(kind: .search, placement: .bottomBar)
            ToolbarSpacer(.fixed, placement: .bottomBar)
            ToolbarItem(placement: .bottomBar) {
                Button("New Note", systemImage: "square.and.pencil") { }
            }
        }
}
.searchable(text: $searchText)

Filter, arama ve New Note artık üç ayrı kapsülde duruyor. Apple'ın aynı oturumdaki Mail tarzı örneği ise aramadan önce flexible bir spacer kullanarak filtreyi baş kenara itiyor, arama ile yeni ileti düğmesi arasına da fixed bir spacer koyuyor. Öğelerin birbiriyle ne kadar ilgili olduğuna uyan versiyonu seçin.

Cihaz boyutuna ve düğme sayısına bağlı olarak sistem alanı bir düğmeye küçültebilir. Arama uygulamanızın merkezinde değilse .searchToolbarBehavior(.minimize) ile bunu açıkça seçin. Natalia Panferova'nın iOS 26 aramasıyla ilgili yazısı, aynı kodun eski hedefler için de derlenmesi amacıyla bu çağrıları if #available(iOS 26.0, *) içine sarıyor.

Inline navigation title'ım neden baş kenara kaydı?

iOS 26'daki bir diğer sürpriz inline başlık. iOS 18'de navigation bar'ın ortasında duruyordu. iOS 26'da ise @sarunw'nun gösterdiği gibi "inline bir başlık yalnızca sığdığında ortada kalır. Bir toolbar öğesi daha ekleyin, başlık baş kenara kayar."

Geliştiriciler buna iki yönden de rastladı. Apple'ın forumlarındaki bir UIKit geliştiricisi, title view'daki bir segmented control'ün hiç bar button item yokken ortalandığını, tek bir trailing öğe göründüğünde ise sola hizalandığını gördü. Apple'ın yanıtı yalnızca bir hata raporu istedi; yani kesin kural hakkında resmi bir açıklama yok.

Pratik tavsiye, iki konum için de tasarlamak:

• Başlıkları kısa tutun ki daha sık ortaya sığsınlar.
• İçeriği ortalanmış bir başlığa göre hizalamayın. Orada kalmayabilir.
• Öğelerinizi sayın. Nadiren kullanılan bir eylemi bir Menu'ye taşımak bar'da yer açar.

iOS 26'da segmented picker'lar ve slider'lar için ne değişti?

Değişen tek kontrol toolbar'lar değil. Apple'ın oturumuna göre "toggle'lar, segmented picker'lar ve slider'lar artık etkileşim sırasında Liquid Glass'a dönüşüyor." Kod değişikliği olmadan geldikleri için iki ayrıntıyı bilmekte fayda var.

Segmented picker'lar. @sarunw, SwiftUI'ın segmented picker'ını iOS 26'da daha temiz olarak tarif ediyor: daha yuvarlak bir seçili segment, kaybolan ayırıcılar ve aynı kod. Apple'ın örneğindeki gibi standart bir picker yeni görünümü kendiliğinden alır:

Picker("View", selection: $selection) {
    Text("Map").tag(ViewMode.map)
    Text("List").tag(ViewMode.list)
}
.pickerStyle(.segmented)

Adımlı slider'lar. Slider'lar artık tick mark'ları destekliyor ve Apple bunların "bir slider step parametresiyle oluşturulduğunda otomatik olarak göründüğünü" söylüyor. @sarunw'nun örneği: step: 1 her değer için bir tick mark ekler.

Slider(value: $rating, in: 1...5, step: 1) {
    Text("Rating")
}

Slider(value: $speed, in: 0.5...2, step: 0.25, neutralValue: 1) {
    Text("Playback speed")
}

İlk slider beş tick gösterir. İkincisi, Apple'ın iOS 26'da eklediği neutralValue'yu kullanıyor; böylece track dolgusu normal oynatma hızı gibi ortadaki bir değerden başlar. Aynı initializer, seçilebilir aralığı sınırlamak için enabledBounds'u ve tick'leri kendiniz yerleştirmek için bir SliderTick döndüren tick closure'ını da alır. Bir slider'ın çok sayıda adımı varsa tick'ler istediğinizden fazla olabilir; bu yüzden yayınlamadan önce bakın.

iOS 26 toolbar'ları iPhone Duo'nun dikey bar'ında nasıl davranır?

iPhone Duo'da iOS 27.1 SDK ile derlenen uygulamalar dış ekranda ve iç ekran yataydayken bir dikey bar alır: navigation ve toolbar öğeleri bir yan kenar boyunca uzanan bir sütuna taşınır. Bunun tamamını iPhone Duo dikey toolbar rehberimiz anlatıyor. Apple'ın Raise the bar with iPhone Duo Tech Talk'una göre iOS 26 toolbar API'leri şöyle aktarılıyor.

• Spacer'lar. "Varsayılan olarak flexible spacer'ların dikey eksende boyutu sıfırdır. Ama fixed spacer'lar minimum boyutlarına uymaya devam eder." Grupları yatayda birbirinden uzaklaştıran flexible bir spacer dikeyde hiçbir şey yapmaz; fixed bir spacer ise grupları ayırmaya devam eder.
• Gruplama. Üst ve alt bar'lar tek bir dikey bar'a dönüştüğünde Apple, kalan öğelerin "orijinal gruplarını koruduğunu" söylüyor; üstten ve alttan gelenleri bir spacer ayırıyor.
• Ekstra padding yok. Apple'ın tavsiyesi, uygulamanızın "bir bar ister yatay ister dikey olsun ek boşluk oluşturmaması." Boşluk taklidi yapmak için öğelerin içine padding eklemeyin; ToolbarSpacer kullanın.
• İkonlar ve başlıklar. @sarunw'nun belirttiği gibi ikonu olan öğeler dikey bar'a taşınır, yalnızca metin içeren öğeler yatay kalır. Öne çıkan Done düğmenize başlığın yanında bir systemImage de verin.
• Done nereye gider. Apple, Done gibi öne çıkan eylemleri iOS 27.0 ile gelen ToolbarItem(placement: .topBarPinnedTrailing) ile üste yakın koymanızı istiyor. Apple'ın dokümantasyonuna göre sabitlenen öğeler yalnızca arama etkinken ve yeterli yer olmadığında taşma menüsüne geçer.

Tech Talk, .glassProminent'in veya alt bar'daki arama alanının dikey bar'da nasıl göründüğünü anlatmıyor; bu yüzden bunları iPhone Duo simülatöründe kontrol edin. Tab bar'lar da yana taşınıyor; bunu iPhone Duo'da tab bar'lar ve NavigationSplitView rehberimiz açıklıyor.

Önemli çıkarımlar

• iOS 26, komşu toolbar öğelerini otomatik olarak ortak Liquid Glass kapsüllerinde gruplar.
• .buttonStyle(.glassProminent) bir düğmeyi grubundan çıkarıp kendi renkli şekline taşır. Bunu tek bir birincil eylem için kullanın.
• ToolbarSpacer(.fixed) grupları böler, ToolbarSpacer(.flexible) onları birbirinden uzaklaştırır. Spacer'lara komşularıyla aynı placement'ı verin.
• Aramaya kendi kapsülünü vermek için DefaultToolbarItem(kind: .search, placement: .bottomBar)'ı fixed spacer'larla çevreleyin.
• Inline başlıklar yalnızca sığdıklarında ortada kalır; bu yüzden baş kenardaki bir başlık için de tasarlayın.
• iPhone Duo'nun dikey bar'ında flexible spacer'lar sıfıra iner, fixed spacer'lar kalır ve gruplar korunur.

Sırada, bu bar'ların yeni cihazda nasıl yana taşındığını iPhone Duo dikey toolbar rehberimizde görün, ardından iPhone Duo hazırlık kontrol listesini uygulayın. Menteşeyle gerçekten bir şey yapan uygulamalar için Built for the fold sayfasına göz atın.