Apples Liquid Glass Design-Sprache, eingeführt mit iOS 26, bringt eine frische Ästhetik zu iOS Apps mit transluzenten, glasartigen UI-Elementen. Hier zeigen wir, wie wir es in Skyscraper, unserem Bluesky-Client für iOS, implementiert haben.

Was ist Liquid Glass?

Liquid Glass ist Apples Evolution von Glassmorphismus—ein Design-Trend mit transluzenten Oberflächen mit Blur-Effekten, die darunterliegende Inhalte durchscheinen lassen. In iOS 26 wird dies systemweit angewandt auf:

  • Tab Bars – Transluzent mit scrollendem Content
  • Navigation Bars – Glass-Effekt mit Blur
  • Toolbars – Separierte Buttons mit visuellem Abstand
  • Sidebars – Adaptive Layouts auf iPad

Die wichtigste Erkenntnis: Sie implementieren Liquid Glass nicht manuell. Sie nutzen native iOS-Verhaltensweisen und lassen das System die visuellen Effekte handhaben.

Skyscrapers Tab Bar Implementierung

So implementiert Skyscraper die Haupt-Tab-Bar mit SwiftUIs nativen iOS 18+ Features:

TabView(selection: $selectedTab) {
    Tab("Timeline", systemImage: "house.fill", value: 0) {
        TimelineView()
    }
    .accessibilityLabel("Timeline")

    Tab("Discover", systemImage: "sparkles", value: 1) {
        DiscoverView()
    }

    Tab("Activity", systemImage: hasUnseenActivity
        ? "tray.badge.fill"
        : "tray.fill", value: 2) {
        NotificationsView()
    }

    Tab("Chat", systemImage: hasUnreadMessages
        ? "message.badge.filled.fill"
        : "message.fill", value: 3) {
        ChatListView()
    }
}
.tabViewStyle(.sidebarAdaptable)
.tint(appTheme.accentColor)

Schlüsselelemente

  • .tabViewStyle(.sidebarAdaptable) – Der iOS 18+ adaptive Style, der automatisch zwischen Sidebar und Tab Bar wechselt
  • Dynamische SF Symbols – Badge-Icons ändern sich basierend auf Benachrichtigungs-Status
  • .tint() – Globales Accent-Color-Theming

Den Glass-Effekt erstellen

Der Glass/transluzente Effekt entsteht durch Content, der unter der Navigation und Tab Bar scrollt:

TimelineCollectionView(
    viewModel: viewModel,
    navigationState: $navigationState,
    uiState: uiState,
    theme: theme,
    mediaSettings: mediaSettings
)
.ignoresSafeArea(edges: [.top, .bottom])

Wie es funktioniert

  1. .ignoresSafeArea(edges: [.top, .bottom]) erlaubt dem Content unter Navigation Bar und Tab Bar zu erweitern
  2. Kombiniert mit .systemBackground erzeugt dies den Frosted-Glass-Blur-Effekt
  3. Content scrollt hinter den Bars während diese sichtbar bleiben
  4. iOS handhabt Blur-Intensität und Transluzenz automatisch

UIKit Collection View Konfiguration

Für hybride SwiftUI/UIKit Apps wie Skyscraper (das UICollectionView für Performance nutzt):

func makeUIView(context: Context) -> UICollectionView {
    let collectionView = UICollectionView(
        frame: .zero,
        collectionViewLayout: layout
    )

    // System Background für automatische Light/Dark Adaption
    collectionView.backgroundColor = .systemBackground

    // Smooth Scrolling unter Bars ermöglichen
    collectionView.contentInsetAdjustmentBehavior = .automatic
    collectionView.bounces = true
    collectionView.alwaysBounceVertical = true

    return collectionView
}

iPad-spezifische Behandlung

iOS 18 führte eine schwebende Tab Bar auf iPad ein. Skyscraper erzwingt die traditionelle Bottom Tab Bar:

#if os(iOS)
if #available(iOS 18.0, *) {
    if UIDevice.current.userInterfaceIdiom == .pad {
        if let windowScene = UIApplication.shared
            .connectedScenes.first as? UIWindowScene,
           let rootVC = windowScene.windows.first?
            .rootViewController {
            rootVC.traitOverrides.horizontalSizeClass = .compact
        }
    }
}
#endif

Schlüsselprinzipien für Liquid Glass

Tun

  • Native System-Verhaltensweisen nutzen – iOS Blur und Transluzenz handhaben lassen
  • .ignoresSafeArea() anwenden – Content unter Bars erlauben
  • .systemBackground nutzen – Automatische Light/Dark Adaption
  • .sidebarAdaptable nutzen – Moderne adaptive Tab Bar

Nicht tun

  • Keinen eigenen Blur implementieren – Konflikte mit System-Effekten
  • Keine opaken Hintergründe – Bricht den Glass-Effekt
  • Nicht gegen das System kämpfen – Plattform-Konventionen annehmen

Verwandte Ressourcen

Skyscraper ausprobieren

Sehen Sie Liquid Glass in Aktion in unserem Bluesky-Client:

Eine Bluesky App bauen? Starten Sie mit nativen iOS-Patterns und lassen Sie das System glänzen.

Skyscraper herunterladen um Liquid Glass in Aktion zu sehen →