Liquid Glass

TabView

Avec l’arrivée d’iOS 26, Apple redéfinit le design de son OS avec l’intégration du Liquid Glass. Qui dit grosse mise à jour de design de l’OS dit aussi nouveau jouet pour nous, développeurs.

Cette mise à jour apporte de nouveaux visuels sur les composants natifs d’iOS, mais aussi de nouveaux outils que je vais te présenter dans ce cours. Let’s go !

PS : dans la première partie, je te présente simplement le nouveau rendu des différents composants mis à jour par Apple. Pour découvir l’ensemble des nouveautés mise à jour par Apple, je t’invite à consulter le kit UI d’iOS 26 disponible pour Figma ici. 

TabView

Slider

Alert

 Retour de navigation

 .glassEffect()

Le nouveau modifier .glassEffect() permet d’appliquer automatiquement le style Liquid Glass à une vue. Utilisé sans paramètre, il génère le rendu par défaut que tu peux voir ici.

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blur")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Text("Liquid Glass")
                .padding()
                .glassEffect()
        }
    }
}

Rendu en DarkMode

 .glassEffect() Avec un style d’effet

Le GlassEffectStyle peut être :

• .regular → effet standard translucide.
• .clear → plus transparent / moins flouté.
• .identity → neutralise l’effet (utile pour activer/désactiver).

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blurp")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Text("Liquid Glass")
                .padding()
                .glassEffect(.regular)
        }
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blurp")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Text("Liquid Glass")
                .padding()
                .glassEffect(.clear)
        }
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blurp")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Text("Liquid Glass")
                .padding()
                .glassEffect(.identity)
        }
    }
}

 .glassEffect() Ajouter une couleur de teinte

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blur")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Text("Liquid Glass")
                .padding()
                .glassEffect(.regular.tint(.orange))
        }
    }
}

 .glassEffect() Active les réactions visuelles aux interactions

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blur")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Text("Liquid Glass")
                .padding()
                .glassEffect(.regular.interactive())
        }
    }
}

 .glassEffect() Donner une shape au GlassEffect

Plusieurs shapes sont présente par défaut :

• .capsule
• .circle
• .rect(cornerRadius: CGFloat)

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blur")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Text("Rectangle arrondi")
                .padding()
                .glassEffect(in: .rect(cornerRadius: 20))
        }
    }
}

 Liquid Glass sur les Boutons

Les boutons ont également le droit à leurs propre modificateur, voici les différentes variantes proposé.

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blur")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            VStack {
                Button {
                    //
                } label: {
                    Text("Go iOS 26 !")
                }
                .buttonStyle (.glass)
                Button {
                    //
                } label: {
                    Text("Go iOS 26 !")
                }
                .buttonStyle (.glassProminent)
            }
            
        }
    }
}

 GlassEffectContainer

GlassEffectContainer est un nouveau conteneur pensé pour les perfs et la fluidité des vues utilisant .glassEffect(). Sans lui, chaque vue applique son effet de verre dans son coin, ce qui peut vite devenir lourd côté rendu. Avec lui, le système prend la main et regroupe toutes les surfaces de verre dans une même zone optimisée.

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("blur")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            VStack {
                HStack(spacing: 15) {
                    Image(systemName: "scribble.variable")
                        .frame(width: 80, height: 80)
                        .font(.system(size: 36))
                        .glassEffect()
                    Image(systemName: "eraser.fill")
                        .frame(width: 80, height: 80)
                        .font(.system(size: 36))
                        .glassEffect()
                }
                GlassEffectContainer(spacing: 40) {
                    HStack(spacing: 15) {
                        Image(systemName: "scribble.variable")
                            .frame(width: 80, height: 80)
                            .font(.system(size: 36))
                            .glassEffect()

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

En bonus, ça permet d’activer des effets avancés comme la fusion ou le morphing entre les éléments. Ci-dessous, un exemple de fusion d’effet de verre grâce au GlassEffectContainer

struct GlassMorphingDemo: View {
    @State private var showEraser = false
   
    var body: some View {
        ZStack {
            VStack(spacing: 40) {
                
                GlassEffectContainer(spacing: 50) {
                    HStack(spacing: 20) {
                        
                        Image(systemName: "scribble.variable")
                            .frame(width: 80, height: 80)
                            .font(.system(size: 36))
                            .glassEffect()
                        if showEraser {
                            Image(systemName: "eraser.fill")
                                .frame(width: 80, height: 80)
                                .font(.system(size: 36))
                                .glassEffect()
                               
                        }
                    }
                }
                .animation(.easeInOut(duration: 0.5), value: showEraser)
                
                Button(showEraser ? "Masquer la gomme" : "Afficher la gomme") {
                    showEraser.toggle()
                }
                .buttonStyle(.glassProminent)
            }
            .padding()
        }
    }
}

On viens de faire un rapide tour d’horizon des nouveauté apporté par iOS26 sur SwiftUI concernant le design Liquid Glass. Il reste quelques outils spécifique sur cette notion à découvrir, pour en savoir plus je te dirige directement vers la doc officiel d’apple sur le sujet : https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views