Que fait 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 la couleur et la lumière du contenu environnant, et réagit aux interactions tactiles et au pointeur. Couvre l'intégration SwiftUI, UIKit et WidgetKit.
Quand l'activer
- Construire ou mettre à jour des applications pour iOS 26+ avec le nouveau langage de conception
- Implémenter des boutons, cartes, barres d'outils ou conteneurs de style verre
- Créer des transitions de morphing entre des éléments en verre
- Appliquer des effets Liquid Glass aux widgets
- Migrer les effets de flou/matériau existants vers la nouvelle API Liquid Glass
Modèle Principal — SwiftUI
Effet Verre de Base
La façon 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 plus de 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 Plusieurs Éléments
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 — des éléments plus proches mélangent leurs formes en verre.
Unir les Effets Verre
Combinez plusieurs vues en une seule forme en 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 de Morphing
Créez un morphing fluide lors de l'apparition/disparition d'éléments en verre :
@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)
Étendre le Défilement Horizontal Sous la Barre Latérale
Pour permettre au contenu à 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 début/fin 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 Plusieurs Éléments
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 en 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 en verre blanc-teinté, thème
} 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 des Images en Mode Accentué
Image("myImage")
.widgetAccentedRenderingMode(.monochrome)
Fond du Conteneur
VStack { /* contenu */ }
.containerBackground(for: .widget) {
Color.blue.opacity(0.2)
}
Décisions de Conception Clés
| Décision | Justification |
|---|---|
| Wrapping avec GlassEffectContainer | Optimisation des performances, permet le morphing entre éléments en verre |
Paramètre spacing | Contrôle la distance de fusion — ajuster la proximité nécessaire pour le mélange |
@Namespace + glassEffectID | Permet des transitions de morphing fluides lors des changements de hiérarchie de vues |
Modificateur interactive() | Adhésion explicite pour les réactions tactiles/pointeur — tous les verres ne doivent 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 choisit 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 soigneusement l'espacement dans les conteneurs pour contrôler quand les effets de verre fusionnent
- Utilisez
withAnimationlors des changements de hiérarchie de vues pour activer des transitions de morphing fluides - Testez à travers les apparences — mode clair, mode sombre, et modes accentués/teintés
- Assurez le contraste d'accessibilité — le texte sur le verre doit rester lisible
Anti-Modèles à Éviter
- Utiliser plusieurs vues
.glassEffect()autonomes sans GlassEffectContainer - Emboîter trop d'effets de verre — dégrade les performances et la clarté visuelle
- Appliquer du verre à chaque vue — réserver aux éléments interactifs, barres d'outils et cartes
- Oublier
clipsToBounds = truedans UIKit lors de l'utilisation de rayons de bord - Ignorer le mode de rendu accentué dans les widgets — casse l'apparence teintée de l'écran d'accueil
- Utiliser des arrière-plans 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 qui nécessitent de la profondeur visuelle et un retour tactile
- Widgets qui doivent s'intégrer à l'apparence Liquid Glass du système
- Transitions de morphing entre des états d'interface utilisateur liés