Liquid Glass Design System (iOS 26)

Système de Design Liquid Glass (iOS 26)

Modèles pour implémenter le Liquid Glass d'Apple — un matériau dynamique qui floute le contenu derrière lui, reflète les couleurs et la lumière du contenu environnant, et réagit aux interactions tactiles et au pointeur. Couvre l'intégration avec SwiftUI, UIKit et WidgetKit.

Quand l'activer

• Construire ou mettre à jour des applications pour iOS 26+ avec le nouveau langage de design
• Implémenter des boutons, cartes, barres d'outils ou conteneurs de style verre
• Créer des transitions morphing entre des éléments en verre
• Appliquer des effets Liquid Glass aux widgets
• Migrer des effets de flou/matériau existants vers la nouvelle API Liquid Glass

Modèle Principal — SwiftUI

Effet Verre de Base

La manière la plus simple d'ajouter du Liquid Glass à n'importe quelle vue :

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()  // Par défaut : variante régulière, forme capsule

Personnalisation de la Forme et de la Teinte

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))

Options de personnalisation clés :

• .regular — effet verre standard
• .tint(Color) — ajouter une teinte de couleur pour la proéminence
• .interactive() — réagir aux interactions tactiles et au pointeur
• Forme : .capsule (par défaut), .rect(cornerRadius:), .circle

Styles de Bouton en Verre

Button("Cliquez-moi") { /* action */ }
    .buttonStyle(.glass)

Button("Important") { /* action */ }
    .buttonStyle(.glassProminent)

GlassEffectContainer pour Éléments Multiples

Enveloppez toujours plusieurs vues en verre dans un conteneur pour des performances et un morphing optimaux :

GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()

        Image(systemName: "eraser.fill")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()
    }
}

Le paramètre spacing contrôle la distance de fusion — plus les éléments sont proches, plus leurs formes en verre se fondent.

Union d'Effets Verre

Combinez plusieurs vues en une seule forme de verre avec glassEffectUnion :

@Namespace private var namespace

GlassEffectContainer(spacing: 20.0) {
    HStack(spacing: 20.0) {
        ForEach(symbolSet.indices, id: \.self) { item in
            Image(systemName: symbolSet[item])
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
        }
    }
}

Transitions Morphing

Créez un morphing fluide lorsque des éléments en verre apparaissent/disparaissent :

@State private var isExpanded = false
@Namespace private var namespace

GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .glassEffect()
            .glassEffectID("pencil", in: namespace)

        if isExpanded {
            Image(systemName: "eraser.fill")
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectID("eraser", in: namespace)
        }
    }
}

Button("Basculer") {
    withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)

Extension du Défilement Horizontal Sous la Barre Latérale

Pour permettre au contenu de défilement horizontal de s'étendre sous une barre latérale ou un inspecteur, assurez-vous que le contenu de ScrollView atteint les bords de tête/de queue du conteneur. Le système gère automatiquement le comportement de défilement sous la barre latérale lorsque la disposition s'étend jusqu'aux bords — aucun modificateur supplémentaire n'est nécessaire.

Modèle Principal — UIKit

UIGlassEffect de Base

let glassEffect = UIGlassEffect()
glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
glassEffect.isInteractive = true

let visualEffectView = UIVisualEffectView(effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.clipsToBounds = true

view.addSubview(visualEffectView)
NSLayoutConstraint.activate([
    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    visualEffectView.widthAnchor.constraint(equalToConstant: 200),
    visualEffectView.heightAnchor.constraint(equalToConstant: 120)
])

// Ajouter du contenu à contentView
let label = UILabel()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])

UIGlassContainerEffect pour Éléments Multiples

let containerEffect = UIGlassContainerEffect()
containerEffect.spacing = 40.0

let containerView = UIVisualEffectView(effect: containerEffect)

let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
let secondGlass = UIVisualEffectView(effect: UIGlassEffect())

containerView.contentView.addSubview(firstGlass)
containerView.contentView.addSubview(secondGlass)

Effets de Bord de Défilement

scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true

Intégration de la Barre d'Outils en Verre

let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
favoriteButton.hidesSharedBackground = true  // Désactiver le fond verre partagé

Modèle Principal — WidgetKit

Détection du Mode de Rendu

struct MyWidgetView: View {
    @Environment(\.widgetRenderingMode) var renderingMode

    var body: some View {
        if renderingMode == .accented {
            // Mode teinté : fond verre blanc-teinté et thématisé
        } else {
            // Mode couleur complète : apparence standard
        }
    }
}

Groupes d'Accentuation pour Hiérarchie Visuelle

HStack {
    VStack(alignment: .leading) {
        Text("Titre")
            .widgetAccentable()  // Groupe d'accentuation
        Text("Sous-titre")
            // Groupe primaire (par défaut)
    }
    Image(systemName: "star.fill")
        .widgetAccentable()  // Groupe d'accentuation
}

Rendu d'Images en Mode Accentué

Image("myImage")
    .widgetAccentedRenderingMode(.monochrome)

Fond de Conteneur

VStack { /* contenu */ }
    .containerBackground(for: .widget) {
        Color.blue.opacity(0.2)
    }

Décisions de Conception Clés

Décision	Justification
Encapsulation par GlassEffectContainer	Optimisation des performances, permet le morphing entre les éléments en verre
Paramètre spacing	Contrôle de la distance de fusion — affiner la proximité nécessaire pour le mélange
@Namespace + glassEffectID	Permet des transitions morphing fluides lors des changements de hiérarchie de vues
Modificateur interactive()	Adhésion explicite pour les réactions tactiles/pointeur — tout le verre ne doit pas réagir
UIGlassContainerEffect dans UIKit	Même modèle de conteneur que SwiftUI pour la cohérence
Mode de rendu accentué dans les widgets	Le système applique un verre teinté lorsque l'utilisateur sélectionne un écran d'accueil teinté

Bonnes Pratiques

• Utilisez toujours GlassEffectContainer lorsque vous appliquez du verre à plusieurs vues frères — cela active le morphing et améliore les performances de rendu
• Appliquez .glassEffect() après les autres modificateurs d'apparence (frame, font, padding)
• Utilisez .interactive() uniquement sur les éléments qui répondent aux interactions utilisateur (boutons, éléments basculables)
• Choisissez l'espacement avec soin dans les conteneurs pour contrôler quand les effets verre fusionnent
• Utilisez withAnimation lors des changements de hiérarchie de vues pour activer des transitions morphing fluides
• Testez sur toutes les apparences — mode clair, mode sombre, et modes accentué/teinté
• Assurez le contraste d'accessibilité — le texte sur le verre doit rester lisible

Anti-Patrons à Éviter

• Utiliser plusieurs vues .glassEffect() autonomes sans GlassEffectContainer
• Emboîter trop d'effets verre — dégrade les performances et la clarté visuelle
• Appliquer du verre à chaque vue — réservez-le pour les éléments interactifs, les barres d'outils et les cartes
• Oublier clipsToBounds = true dans UIKit lors de l'utilisation de coins arrondis
• Ignorer le mode de rendu accentué dans les widgets — casse l'apparence de l'écran d'accueil teinté
• Utiliser des fonds opaques derrière le verre — annule l'effet de translucidité

Quand Utiliser

• Barres de navigation, barres d'outils et barres d'onglets avec le nouveau design iOS 26
• Boutons d'action flottants et conteneurs de type carte
• Contrôles interactifs nécessitant de la profondeur visuelle et un retour tactile
• Widgets qui doivent s'intégrer à l'apparence Liquid Glass du système
• Transitions morphing entre des états d'interface utilisateur connexes