Introduktion: En ny visuell era för Apple-plattformarna
Under WWDC25 presenterade Apple en av de mest genomgripande visuella förändringarna i plattformens historia: Liquid Glass. Och nej, det handlar inte om någon diskret uppdatering av ikoner eller typsnitt — det här är ett helt nytt designspråk som fundamentalt förändrar hur kontroller, navigeringselement och interaktiva komponenter ser ut och känns i iOS 26, macOS Tahoe, watchOS 26 och tvOS 26.
Liquid Glass hämtar inspiration från de optiska egenskaperna hos glas och flytande vätskors rörelse. Resultatet är ett lätt, dynamiskt material som lyfter fram underliggande innehåll. Istället för traditionell oskärpa (blur) som sprider ljus, böjer och koncentrerar Liquid Glass ljus i realtid. Skillnaden är påtaglig när man väl ser det.
Så, vad innebär det här för oss SwiftUI-utvecklare? Jo, en helt ny uppsättning API:er att lära sig — och det är precis vad den här guiden handlar om. Vi går igenom allt från grundläggande .glassEffect()-modifierare till avancerade morfande övergångar med GlassEffectContainer och glassEffectID. Oavsett om du bygger din första iOS 26-app eller uppgraderar en befintlig, ska du ha en solid förståelse för Liquid Glass när du läst klart.
Designfilosofin bakom Liquid Glass
Innan vi dyker ner i koden är det viktigt att förstå den grundläggande designfilosofin. Det här trippade upp mig i början: Liquid Glass är uteslutande avsett för navigeringsskiktet som flyter ovanpå appens innehåll. Det ska aldrig appliceras på själva innehållet — listor, tabeller, media eller textblock.
Principen är egentligen ganska enkel. Innehåll förblir primärt, medan kontroller fungerar som ett funktionellt överlag. Navigeringselement får glaseffekten, och appens faktiska innehåll förblir orört och tydligt.
Tre grundprinciper
- Navigering, inte innehåll: Liquid Glass hör hemma på verktygsfält, knappar, flikar och navigeringselement. Att applicera det på innehållsrader skapar bara förvirring.
- Mening, inte dekoration: Tintning av glaseffekter ska förmedla semantisk mening — exempelvis markera en primär åtgärd eller ett aktivt tillstånd. Använd det inte bara för att det ser snyggt ut.
- Låt systemet arbeta: Liquid Glass hanterar automatiskt tillgänglighetsanpassningar som minskad transparens och ökad kontrast. Lita på systemets standardbeteende istället för att försöka överrida det.
Grundläggande API: glassEffect()-modifieraren
Kärnan i Liquid Glass-implementationen är glassEffect()-modifieraren. Dess fullständiga signatur ser ut så här:
func glassEffect<S: Shape>(
_ glass: Glass = .regular,
in shape: S = DefaultGlassEffectShape,
isEnabled: Bool = true
) -> some ViewDen enklaste användningen kräver faktiskt inga parametrar alls:
Text("Hej, Liquid Glass!")
.padding()
.glassEffect()Det här applicerar standardvarianten .regular med kapselform (.capsule) som standardform. Resultatet är en halvtransparent glasyta bakom texten som böjer ljuset från bakgrunden på ett riktigt snyggt, realistiskt sätt.
Glass-varianter
Det finns tre huvudsakliga varianter av glaseffekten, och var och en har sitt specifika användningsområde:
.regular — standardvarianten som passar för de flesta situationer. Tänk verktygsfält, knappar, navigeringsfält och liknande. Ger medelhög transparens med en bra balans mellan synlighet och genomskinlighet.
Button("Spara") {
save()
}
.padding()
.glassEffect(.regular).clear — en betydligt mer transparent variant avsedd för medieanvändning. Använd den när ett element sitter ovanpå en bild, karta eller video. Innehållet under glaset behåller sin ljusstyrka, och det som visas ovanpå ska vara tillräckligt kontraststarkt för att synas tydligt.
// Perfekt för knappar ovanpå bilder
Image("landskapsfoto")
.overlay(alignment: .bottomTrailing) {
Button {
toggleFavorite()
} label: {
Image(systemName: "heart.fill")
.foregroundStyle(.white)
.frame(width: 44, height: 44)
}
.glassEffect(.clear)
.padding()
}.identity — stänger av glaseffekten helt. Praktisk när du vill villkorligt aktivera eller inaktivera effekten:
@State private var glasAktiverat = true
Text("Villkorligt glas")
.padding()
.glassEffect(glasAktiverat ? .regular : .identity)Former och tintning
Liquid Glass stöder en rad fördefinierade former, men du kan också använda helt egna. Låt oss titta på båda.
Fördefinierade former
// Kapsel (standard)
.glassEffect(.regular, in: .capsule)
// Cirkel
.glassEffect(.regular, in: .circle)
// Rundad rektangel
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))
// Behållarkoncentriskt rundade hörn
.glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))
// Ellips
.glassEffect(.regular, in: .ellipse)Det där alternativet .containerConcentric är faktiskt riktigt smart — det anpassar glaseffektens hörn automatiskt så att de följer den omgivande behållarens hörnradie. Resultatet blir en visuellt sammanhängande design utan att du behöver räkna ut pixelvärden manuellt.
Anpassade former
Du kan också skapa helt egna former genom att implementera Shape-protokollet:
struct DiamantForm: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.midX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.midY))
path.closeSubpath()
return path
}
}
// Användning
Image(systemName: "star.fill")
.font(.title)
.foregroundStyle(.white)
.frame(width: 80, height: 80)
.glassEffect(.regular, in: DiamantForm())Tintning med färg
Tintning lägger till en färgton över glaseffekten, och det handlar om att förmedla semantisk mening — inte bara göra saker färgglada:
// Grundläggande tintning
Button("Radera") {
deleteItem()
}
.padding()
.glassEffect(.regular.tint(.red))
// Tintning med opacitet för subtilare effekt
Button("Redigera") {
editItem()
}
.padding()
.glassEffect(.regular.tint(.blue.opacity(0.6)))En röd tint signalerar naturligt en destruktiv åtgärd, medan blått kan markera en primär åtgärd. Att tinta allting i olika färger bara för att det ser snyggt ut undergräver hela den semantiska funktionen. Var sparsam.
Interaktivt glas
Okej, det här är ärligt talat den mest imponerande delen av Liquid Glass. När du lägger till .interactive() får glaseffekten en rad dynamiska beteenden som verkligen känns magiska:
- Skalning vid nedtryckning
- Studssäker animation
- Shimrande ljuseffekt
- Beröringspunktens ljus sprids till närliggande glaselement
- Responsiv reaktion på tryck- och draggester
Button {
performAction()
} label: {
Label("Åtgärd", systemImage: "bolt.fill")
.labelStyle(.iconOnly)
.frame(width: 50, height: 50)
.foregroundStyle(.white)
}
.glassEffect(.regular.interactive())Kombinera modifierare
En smidig detalj: glass-modifierarna kan kedjas fritt, och ordningen spelar ingen roll:
// Dessa ger samma resultat
.glassEffect(.regular.tint(.orange).interactive())
.glassEffect(.regular.interactive().tint(.orange))Här är ett komplett exempel på en interaktiv, tintad knapp i cirkulär form:
Button {
toggleRecording()
} label: {
Image(systemName: isRecording ? "stop.fill" : "mic.fill")
.font(.title2)
.foregroundStyle(.white)
.frame(width: 60, height: 60)
}
.glassEffect(.regular.tint(.red.opacity(0.8)).interactive(), in: .circle)Knappformat med Liquid Glass
SwiftUI i iOS 26 introducerar dedikerade knappformat för Liquid Glass, och de förenklar implementationen avsevärt.
.glass — standardglasknappen
Knappformatet .glass ger en genomskinlig, glasliknande yta som reagerar vid interaktion och reflekterar bakgrunden:
Button("Spara dokument") {
saveDocument()
}
.buttonStyle(.glass).glassProminent — den framträdande glasknappen
För primära åtgärder finns .glassProminent. Den är mer opak men behåller fortfarande glasliknande effekter. Perfekt för den viktigaste åtgärden i en vy:
VStack(spacing: 16) {
Button("Köp nu") {
purchase()
}
.buttonStyle(.glassProminent) // Primär åtgärd
Button("Lägg till i kundvagn") {
addToCart()
}
.buttonStyle(.glass) // Sekundär åtgärd
}Knappformer
Kombinera knappformaten med buttonBorderShape för att kontrollera formen:
Button {
action()
} label: {
Image(systemName: "plus")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)GlassEffectContainer: Gruppera glaselement
När du har flera glaselement som ska arbeta tillsammans behöver du GlassEffectContainer. Den fyller flera viktiga funktioner:
- Delad samplingregion: Glas kan inte sampla annat glas (det blir en visuell röra). Behållaren ger alla element en gemensam referensyta.
- Prestandaoptimering: Gruppering av glaselement förbättrar renderingsprestandan märkbart.
- Morfande övergångar: Behållaren möjliggör de där flytande övergångarna mellan glaselement som vi kommer till strax.
GlassEffectContainer {
HStack(spacing: 20) {
Button {
selectTool(.pencil)
} label: {
Image(systemName: "pencil")
.frame(width: 44, height: 44)
}
.glassEffect(.regular.interactive())
Button {
selectTool(.eraser)
} label: {
Image(systemName: "eraser")
.frame(width: 44, height: 44)
}
.glassEffect(.regular.interactive())
Button {
selectTool(.ruler)
} label: {
Image(systemName: "ruler")
.frame(width: 44, height: 44)
}
.glassEffect(.regular.interactive())
}
}Avståndskontroll
Behållaren har en spacing-parameter som styr tröskelvärdet för morfning — element inom detta avstånd smälter visuellt samman under övergångar:
GlassEffectContainer(spacing: 40.0) {
ForEach(verktyg) { verktyg in
VerktygVy(verktyg: verktyg)
.glassEffect()
}
}Morfande övergångar med glassEffectID
Det här är (enligt min mening) den mest spektakulära funktionen i hela Liquid Glass. Med glassEffectID-modifieraren kan glaselement transformeras smidigt från en form till en annan — och det ser helt otroligt ut i praktiken.
Förutsättningar
För att morfande övergångar ska fungera behövs tre saker:
- Alla element måste befinna sig i samma
GlassEffectContainer - Varje element behöver en unik
glassEffectIDkopplad till ett gemensamtNamespace - Tillståndsändringar som visar eller döljer element måste ske med animation
Grundläggande exempel
Här är ett komplett exempel på en expanderande åtgärdsmeny:
struct ExpanderandeMeny: View {
@State private var ärExpanderad = false
@Namespace private var namespace
var body: some View {
GlassEffectContainer(spacing: 30) {
HStack(spacing: 30) {
if ärExpanderad {
Button {
dela()
} label: {
Image(systemName: "square.and.arrow.up")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
.glassEffectID("dela", in: namespace)
Button {
kopiera()
} label: {
Image(systemName: "doc.on.doc")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
.glassEffectID("kopiera", in: namespace)
}
Button {
withAnimation(.bouncy) {
ärExpanderad.toggle()
}
} label: {
Image(systemName: ärExpanderad ? "xmark" : "ellipsis")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
.glassEffectID("växla", in: namespace)
if ärExpanderad {
Button {
redigera()
} label: {
Image(systemName: "pencil")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
.glassEffectID("redigera", in: namespace)
Button {
radera()
} label: {
Image(systemName: "trash")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
.glassEffectID("radera", in: namespace)
}
}
}
}
}När användaren trycker på den centrala knappen animeras de fyra åtgärdsknapparna ut med en vätskemässig övergång — det ser ut som om knapparna separeras från huvudknappen. Trycker man igen smälter de tillbaka samman. Ärligt talat, effekten är visuellt slående och ger en riktigt polerad känsla till gränssnittet.
Avancerat: Radial layout
Morfande övergångar fungerar inte bara horisontellt. Här är ett exempel med radiell layout som jag tycker visar konceptets fulla potential:
struct RadiellMeny: View {
@State private var visaÅtgärder = false
@Namespace private var namespace
var body: some View {
GlassEffectContainer(spacing: 30) {
VStack(spacing: 30) {
// Övre knapp
if visaÅtgärder {
knapp(systemImage: "rotate.right") {}
.glassEffectID("rotera", in: namespace)
}
HStack(spacing: 30) {
// Vänster knapp
if visaÅtgärder {
knapp(systemImage: "circle.lefthalf.filled") {}
.glassEffectID("kontrast", in: namespace)
}
// Central knapp (alltid synlig)
knapp(systemImage: visaÅtgärder ? "xmark" : "slider.horizontal.3") {
withAnimation(.bouncy) {
visaÅtgärder.toggle()
}
}
.glassEffectID("växla", in: namespace)
// Höger knapp
if visaÅtgärder {
knapp(systemImage: "flip.horizontal") {}
.glassEffectID("spegelvänd", in: namespace)
}
}
// Undre knapp
if visaÅtgärder {
knapp(systemImage: "crop") {}
.glassEffectID("beskär", in: namespace)
}
}
}
}
@ViewBuilder
private func knapp(
systemImage: String,
action: @escaping () -> Void
) -> some View {
Button(action: action) {
Image(systemName: systemImage)
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
}
}En viktig detalj: avståndsvärdet (spacing) i VStack och HStack bör matcha för att övergångarna ska bli konsekventa.
Liquid Glass med NavigationBar och TabView
I iOS 26 får standardkomponenter som NavigationStack och TabView automatiskt Liquid Glass-utseende. Men det finns några nya möjligheter att anpassa dem som är värda att känna till.
TabView med ny design
TabView har omdesignats rejält i iOS 26 med en splitverktygsfältstil som liknar en flytande knapp. Flikfältet animeras och rör sig dynamiskt vid scrollning:
TabView {
Tab("Hem", systemImage: "house.fill") {
HemVy()
}
Tab("Sök", systemImage: "magnifyingglass") {
SökVy()
}
Tab("Profil", systemImage: "person.fill") {
ProfilVy()
}
}
.tabViewStyle(.tabBarOnly)Flikfältet får automatiskt Liquid Glass-utseende utan att du behöver göra något särskilt. Ikoner och text renderas med vibranta färger som anpassar sig till bakgrunden.
ToolbarSpacer för bättre layout
Den nya ToolbarSpacer-komponenten hjälper dig gruppera relaterade knappar och kontrollera layouten i verktygsfält:
NavigationStack {
ContentView()
.toolbar {
ToolbarItem(placement: .topBarLeading) {
Button("Tillbaka", systemImage: "chevron.left") {
goBack()
}
}
ToolbarSpacer(.fixed)
ToolbarItem(placement: .topBarTrailing) {
Button("Dela", systemImage: "square.and.arrow.up") {
share()
}
}
ToolbarItem(placement: .topBarTrailing) {
Button("Mer", systemImage: "ellipsis") {
showMore()
}
}
}
}Text och ikoner med glaseffekt
Text som visas ovanpå Liquid Glass får automatiskt en vibrant behandling — färg, ljusstyrka och mättnad justeras baserat på bakgrunden. Det här är en av de där detaljerna som gör att helheten känns riktigt genomtänkt:
// Text med glaseffekt
Text("Glastext")
.font(.title)
.bold()
.foregroundStyle(.white)
.padding()
.glassEffect()
// Ikon med interaktiv glaseffekt
Image(systemName: "heart.fill")
.font(.largeTitle)
.foregroundStyle(.white)
.frame(width: 60, height: 60)
.glassEffect(.regular.interactive(), in: .circle)
// Label med glaseffekt
Label("Inställningar", systemImage: "gear")
.labelStyle(.iconOnly)
.padding()
.glassEffect()Tips: .foregroundStyle(.white) ger bäst kontrast mot glasmaterialet. Systemet anpassar sedan automatiskt renderingen baserat på den faktiska bakgrunden.
Tillgänglighet och Liquid Glass
En av de verkligt starka sidorna med Liquid Glass är dess inbyggda tillgänglighetsstöd. Systemet hanterar automatiskt flera anpassningar utan att du behöver skriva en enda rad extra kod:
- Minskad transparens: Ökar frosting-effekten för tydligare kontrast
- Ökad kontrast: Tydligare färger och kantlinjer
- Minskat rörelseinnehåll: Dämpar animationer och elastiska effekter
- Tintningsläge (iOS 26.1+): Användarkontrollerad opacitetsökning via Inställningar → Bildskärm & ljusstyrka → Liquid Glass
Behöver du anpassa beteendet manuellt kan du använda miljövariabler:
struct TillgängligVy: View {
@Environment(\.accessibilityReduceTransparency)
var minskadTransparens
@Environment(\.accessibilityReduceMotion)
var minskadRörelse
var body: some View {
VStack {
Text("Tillgänglig glasknapp")
.padding()
.glassEffect(
minskadTransparens ? .identity : .regular
)
}
}
}Min rekommendation? Låt systemet hantera tillgängligheten automatiskt. Överrid bara när det är absolut nödvändigt för ett specifikt användningsfall — Apple har lagt ner mycket arbete på att få standardbeteendet att fungera bra.
Migrera befintliga appar till Liquid Glass
Apple ger utvecklare en nådeperiod: befintliga appar kan fortsätta använda det traditionella UI-utseendet på iOS 26 genom att inaktivera Liquid Glass. Men förr eller senare vill du uppgradera. Här är en stegvis strategi som fungerat bra för mig.
Steg 1: Låt standardkomponenter uppdateras automatiskt
Många standardkomponenter — NavigationStack, TabView, Alert, verktygsfält — får Liquid Glass automatiskt. Börja med att kompilera och köra din app mot iOS 26 SDK utan att ändra någon kod. Granska hur standardelementen ser ut och identifiera eventuella problem.
Steg 2: Identifiera anpassade kontroller
Gå igenom din app och hitta alla anpassade kontroller som fungerar som navigeringselement: flytande knappar, anpassade verktygsfält, översiktsknappar och liknande. Dessa är dina kandidater för Liquid Glass.
Steg 3: Applicera glaseffekter selektivt
Lägg till .glassEffect() på dina anpassade navigeringselement. Kom ihåg — navigering, inte innehåll:
// Före: Anpassad flytande åtgärdsknapp
Button {
createNew()
} label: {
Image(systemName: "plus")
.font(.title2)
.foregroundStyle(.white)
.frame(width: 56, height: 56)
.background(.blue)
.clipShape(Circle())
.shadow(radius: 8)
}
// Efter: Med Liquid Glass
Button {
createNew()
} label: {
Image(systemName: "plus")
.font(.title2)
.foregroundStyle(.white)
.frame(width: 56, height: 56)
}
.glassEffect(
.regular.tint(.blue.opacity(0.7)).interactive(),
in: .circle
)Steg 4: Gruppera relaterade element
Identifiera grupper av relaterade knappar eller kontroller och placera dem i GlassEffectContainer. Det förbättrar både visuell koherens och prestanda.
Steg 5: Testa tillgänglighet
Kör din app med tillgänglighetsinställningar aktiverade — minskad transparens, ökad kontrast, minskad rörelse. Verifiera att allt förblir användbart och läsbart. Det här steget är lätt att hoppa över, men det är verkligen värt tiden.
Praktiskt projekt: Glasbaserad musikspelare
Nu ska vi sätta ihop allt vi lärt oss i ett praktiskt exempel — en minimusikspelare med Liquid Glass-design. Det här exemplet visar hur flera koncept samverkar i en verklig kontext:
struct MinMusikspelare: View {
@State private var spelar = false
@State private var visaDetaljer = false
@Namespace private var namespace
var body: some View {
ZStack(alignment: .bottom) {
// Bakgrundsbild (albumomslag)
Image("albumomslag")
.resizable()
.aspectRatio(contentMode: .fill)
.ignoresSafeArea()
// Spelarkontroller
GlassEffectContainer(spacing: 20) {
VStack(spacing: 16) {
if visaDetaljer {
// Expanderad vy med låtinfo
VStack(spacing: 8) {
Text("Låttitel")
.font(.headline)
.foregroundStyle(.white)
Text("Artistnamn")
.font(.subheadline)
.foregroundStyle(.white.opacity(0.8))
}
.padding()
.glassEffect(.clear)
.glassEffectID("info", in: namespace)
// Tidslinje
ProgressView(value: 0.4)
.tint(.white)
.padding(.horizontal)
.glassEffectID("tidslinje", in: namespace)
}
HStack(spacing: 30) {
if visaDetaljer {
Button {
föregående()
} label: {
Image(systemName: "backward.fill")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
.glassEffectID("föregående", in: namespace)
}
Button {
withAnimation(.bouncy) {
if !visaDetaljer {
visaDetaljer = true
} else {
spelar.toggle()
}
}
} label: {
Image(systemName: spelar
? "pause.fill"
: "play.fill")
.font(.title2)
.frame(width: 56, height: 56)
}
.glassEffect(
.regular
.tint(.white.opacity(0.3))
.interactive(),
in: .circle
)
.glassEffectID("spelPaus", in: namespace)
if visaDetaljer {
Button {
nästa()
} label: {
Image(systemName: "forward.fill")
.frame(width: 44, height: 44)
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)
.glassEffectID("nästa", in: namespace)
}
}
if visaDetaljer {
// Stäng-knapp
Button {
withAnimation(.bouncy) {
visaDetaljer = false
}
} label: {
Image(systemName: "chevron.down")
.frame(width: 36, height: 36)
}
.buttonStyle(.glass)
.buttonBorderShape(.capsule)
.glassEffectID("stäng", in: namespace)
}
}
.padding()
}
}
}
}Notera hur vi kombinerar GlassEffectContainer för gruppering, glassEffectID för morfande övergångar, .clear-varianten för text ovanpå albumomslaget, tintning och interaktivt glas för spela/paus-knappen, samt villkorlig visning med animationer. Allt hänger ihop.
Prestanda och bästa praxis
Liquid Glass är beräkningsintensivt — det involverar realtidsrendering av ljusbrytning och materialeffekter. Här är några tips jag lärt mig för optimal prestanda.
Minimera antalet glaselement
Varje .glassEffect() lägger till renderingskostnad. Använd det på navigeringselement, inte på varje rad i en lista. Frestelsen att "glassa allt" är stor, men motstå den.
Gruppera alltid i GlassEffectContainer
Flera fristående glaselement renderas var för sig. Att placera dem i en GlassEffectContainer ger en delad samplingregion och märkbart bättre prestanda.
Undvik glas på scrollbara innehållslistor
Att applicera glaseffekt på varje cell i en List eller LazyVStack kan kraftigt påverka scrollprestandan. Glas hör hemma på fasta navigeringselement, inte på rullande innehåll. Jag testade det på en lista med 100 rader och det var inte en trevlig upplevelse.
Testa på äldre enheter
Glaseffekten är hårdvaruaccelererad men kräver ändå mer GPU-prestanda. Testa alltid på de äldre enheter som stöds av iOS 26 för att säkerställa acceptabel prestanda.
Använd isEnabled-parametern
Om du villkorligt behöver stänga av glaseffekten, använd isEnabled-parametern — det är mer effektivt än att byta mellan varianter:
// Effektivare
.glassEffect(.regular, isEnabled: visaGlas)
// Fungerar också men ger en övergång mellan varianter
.glassEffect(visaGlas ? .regular : .identity)Liquid Glass kontra det traditionella utseendet
Det är värt att nämna att Apple ger utvecklare möjlighet att tillfälligt inaktivera Liquid Glass. Appar som riktar in sig på iOS 26 SDK kan använda en Info.plist-nyckel för att behålla det traditionella utseendet under en övergångsperiod. Det ger tid att anpassa designen ordentligt utan att behöva göra allt på en gång.
Men signalerna är tydliga: Liquid Glass är framtiden för Apples plattformar. Ju snabbare du börjar implementera det, desto bättre positionerad är du inför kommande versioner.
Sammanfattning och nästa steg
Liquid Glass representerar ett stort steg framåt i Apples designspråk. För oss SwiftUI-utvecklare innebär det nya kraftfulla verktyg för att skapa visuellt imponerande och funktionella gränssnitt:
glassEffect()— grundmodifieraren med tre varianter:.regular,.clearoch.identity- Tintning och interaktivitet — kedja
.tint()och.interactive()för dynamiska effekter - Former — från kapslar och cirklar till helt anpassade former
- Knappformat —
.glassoch.glassProminentför enkel integration GlassEffectContainer— gruppering för prestanda och visuell koherensglassEffectID— morfande övergångar med namespace-baserade identifierare- Tillgänglighet — automatiskt stöd för minskad transparens, kontrast och rörelse
Som nästa steg rekommenderar jag att öppna Xcode 26, skapa ett nytt iOS 26-projekt och börja experimentera med glaseffekterna. Börja med enskilda knappar, bygg upp till grupperade kontroller i behållare, och testa slutligen morfande övergångar. Liquid Glass känns fantastiskt när man ser det i aktion — inget skriftligt kan riktigt ersätta upplevelsen av att faktiskt interagera med det.
Och om du redan läst vår guide om Approachable Concurrency i Swift 6.2, har du nu en solid grund i både det nya visuella designspråket och den nya concurrency-modellen. Tillsammans utgör de stommen i en modern, framtidssäker iOS 26-applikation.