Először tisztázzunk valamit: a Liquid Glass nem egy újabb átlátszó háttéreffekt. Sokan ezt hiszik elsőre (én is, őszintén), pedig sokkal több annál. Egy dinamikus anyagrendszerről van szó, amely a valódi üveg optikai tulajdonságait szimulálja — fénytörést, tükröződést, mélységet és mozgásra való reakciót.
A hagyományos blur szétszórja a fényt. A Liquid Glass viszont valós időben hajlítja és fókuszálja a beérkező fényt — ezt nevezi az Apple lensing-nek. Apróságnak tűnhet, de nézz meg egy iOS 26-os toolbar-t pörgetés közben: az élek mentén tényleg úgy viselkedik, mintha üveg lenne.
Az iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26, tvOS 26 és visionOS 4 mind ezt a designnyelvet használja. Ha az appod natív SwiftUI vezérlőket használ, és az iOS 26 SDK-val fordítod újra, a toolbar és a tab bar elemei automatikusan átveszik az új megjelenést. A custom view-knál viszont — és itt kezdődik a munka — explicit módon kell alkalmaznod a glass effektet.
Mikor érdemes használni?
- Igen: navigációs sávok, toolbar-ok, tab bar, lebegő akciógombok (FAB), sheetek, popoverek, menük, rendszerszintű alertek.
- Nem: tartalmi rétegek (List, Table, média), teljes képernyős hátterek, görgethető tartalom, egymásra rétegzett glass felületek — és tényleg ne mindenre, még ha csábító is.
A glassEffect modifier alapjai
Kezdjük az elejéről. A legegyszerűbb használat egyetlen modifier hozzáadásával jár — ennél nehezebb dolgod nincs. Vegyünk egy lebegő gombot, ami Liquid Glass effektet kap:
import SwiftUI
struct FloatingActionButton: View {
var body: some View {
Button(action: { print("Tapped") }) {
Image(systemName: "plus")
.font(.title2)
.foregroundStyle(.primary)
.padding(20)
}
.glassEffect()
}
}
Ennyi. A teljes szignatúra pedig így néz ki:
func glassEffect<S: Shape>(
_ glass: Glass = .regular,
in shape: S = DefaultGlassEffectShape,
isEnabled: Bool = true
) -> some View
A Glass struct változatai
A Glass struct három statikus variánst kínál, és ezek határozzák meg a vizuális karaktert:
.regular — alapértelmezett, kiegyensúlyozott áttetszőség. A legtöbb esetben ez kell..clear — minimálisan átlátszó, élénkebb háttértartalom mellett működik jól..identity — kikapcsolt effekt. Hangzik furán, de animációs átmeneteknél nagyon hasznos.
Ezekhez két fontos modifier kapcsolódik:
.tint(_:) — szemantikus színezés (pl. primary action, hibajelzés)..interactive(_:) — érintésre reagáló viselkedést kapcsol be (megnyomásnál enyhén deformálódik, ami imádnivaló).
Button("Mentés") { save() }
.padding(.horizontal, 24)
.padding(.vertical, 12)
.glassEffect(.regular.tint(.blue).interactive(), in: .capsule)
Támogatott alakzatok
A shape paraméter bármely Shape protokollnak megfelelő típust elfogad. A leggyakoribbak:
.capsule — alapértelmezett, gombokhoz ideális..circle — kör alakú akciógombokhoz..rect(cornerRadius:) — kerekített téglalap kártyákhoz..containerConcentric — a szülő konténer sarkaival koncentrikusan illeszkedő alakzat (új iOS 26-ban, és tényleg jól működik).
GlassEffectContainer: a kompozíció kulcsa
Itt jön a rész, amit a dokumentáció elsőre könnyen átsiklik: az üveg nem tud másik üveget mintavételezni. Ha két .glassEffect() view-t egyszerűen egymásra raksz, a vizuális minőség és a teljesítmény is szenved.
Erre szolgál a GlassEffectContainer — közös mintavételi régiót biztosít, és lehetővé teszi az elemek vizuális egyesülését, ha közel kerülnek egymáshoz. Ez az a "folyékony" érzés, amit a marketinganyagokban is mutogatnak.
struct ToolbarExample: View {
var body: some View {
GlassEffectContainer(spacing: 16) {
HStack(spacing: 12) {
Button(action: {}) {
Image(systemName: "heart")
.padding(12)
}
.glassEffect(in: .circle)
Button(action: {}) {
Image(systemName: "bookmark")
.padding(12)
}
.glassEffect(in: .circle)
Button(action: {}) {
Image(systemName: "square.and.arrow.up")
.padding(12)
}
.glassEffect(in: .circle)
}
}
}
}
A spacing paraméter határozza meg azt a küszöböt, amin belül az elemek vizuálisan összeolvadnak — pontosan úgy, mint a vízcseppek. Ezzel játszani kell egy kicsit, de ha eltalálod, nagyon jó eredményt ad.
Morfológiai animációk: glassEffectID
Na, ez talán a kedvenc részem. A Liquid Glass leglátványosabb képessége a morphing: az üveg alakzatok folyamatos átalakulása egyik formából a másikba. A trükk a .glassEffectID() modifier, ami összekapcsolja az elemeket — így a SwiftUI tudja animálni közöttük az átmenetet.
struct MorphingExample: View {
@Namespace private var glassNamespace
@State private var isExpanded = false
var body: some View {
GlassEffectContainer(spacing: 24) {
if isExpanded {
VStack(spacing: 16) {
Text("Részletes nézet")
.font(.headline)
Button("Bezárás") {
withAnimation(.spring) { isExpanded = false }
}
}
.padding(32)
.glassEffect(in: .rect(cornerRadius: 24))
.glassEffectID("panel", in: glassNamespace)
} else {
Button(action: {
withAnimation(.spring) { isExpanded = true }
}) {
Image(systemName: "info.circle")
.font(.title)
.padding(16)
}
.glassEffect(in: .circle)
.glassEffectID("panel", in: glassNamespace)
}
}
}
}
A két állapot ugyanazt a glassEffectID-t és Namespace-t használja, ezért a SwiftUI nem keresztúsztatást, hanem fizikai morphingot animál: az üveg fenntartja a transzparens anyagát az átalakulás teljes ideje alatt. Az első alkalommal, mikor élesben láttam, nem akartam elhinni, hogy ennyivel megoldható.
Bevált gyakorlatok az Apple szerint
1. Glass csak a navigációs rétegen
Az Apple iránymutatása itt nem hagy mozgásteret: "a Liquid Glass arra a navigációs rétegre van fenntartva, amely az appod tartalma felett lebeg." A tartalom alapszinten marad, a glass vezérlők lebegnek felette — ez a szétválasztás hozza létre a mélységérzetet.
2. Soha ne tegyél üveget üvegre
Ne rétegezz egymásra glass elemeket. Ha közel vannak egymáshoz, csoportosítsd őket egy GlassEffectContainer-ben. Komolyan, ezt a hibát az első napokban én is elkövettem.
3. List soraira ne kerüljön glassEffect
Hibás minta:
// ❌ Helytelen
List(items) { item in
HStack { Text(item.name) }
.glassEffect()
}
Helyes minta — lebegő FAB egy ZStack-ben a lista felett:
// ✅ Helyes
ZStack(alignment: .bottomTrailing) {
List(items) { item in
Text(item.name)
}
Button(action: addItem) {
Image(systemName: "plus")
.padding(20)
}
.glassEffect(.regular.tint(.accentColor).interactive(), in: .circle)
.padding(24)
}
4. A tint legyen szemantikus, ne dekoratív
A tint jelentést hordozzon: elsődleges akció, állapot, figyelmeztetés. Ne csak színesítésre használd — látvány szempontjából egyébként is sokkal letisztultabb így.
5. Bízz rá az akadálymentesítést a rendszerre
A SwiftUI automatikusan kezeli a Reduce Transparency, Increase Contrast és Reduce Motion beállításokat. Csak akkor írd felül, ha tényleg muszáj.
Visszafelé kompatibilitás iOS 25-tel és korábbi rendszerekkel
Mivel a .glassEffect() csak iOS 26-tól érhető el, korábbi rendszereken fallback szükséges. A legtisztább megoldás egy ViewModifier protokoll-konform típus, ami @available-lel ellenőrzi a verziót:
extension View {
@ViewBuilder
func adaptiveGlass<S: Shape>(in shape: S = .capsule) -> some View {
if #available(iOS 26.0, *) {
self.glassEffect(in: shape)
} else {
self
.background(.ultraThinMaterial, in: shape)
.overlay(
shape.stroke(.white.opacity(0.2), lineWidth: 1)
)
}
}
}
Az iOS 25 és korábbi verziókon a .ultraThinMaterial hasonló — bár jóval egyszerűbb — vizuális élményt nyújt, és fenntartja az app működőképességét. Nem azonos, de rendben elfogadható kompromisszum.
Ismert hibák és megkerülő megoldások
- iOS 26.1: ha egy
Menu-t GlassEffectContainer-be teszel, a morphing animáció megszakad. Megoldás: használd a .glassEffect(.regular.interactive())-t közvetlenül a Menu-n.
- Shape inkonzisztencia: a
.glassEffect(.regular.interactive(), in: RoundedRectangle()) néha kapszula alakkal renderelődik. Workaround: gomboknál használd a .buttonStyle(.glass)-t.
- Renderelési artifaktok: a
.glassProminent és .circle kombinációja időnként vizuális hibát produkál — kerüld a kombinációt, vagy használj .capsule-t.
Teljesítmény az új designnyelvvel
A glass effektek valós idejű kompozitálást, blurt és fénytörést igényelnek. Ez papíron drágán hangzik. A gyakorlatban viszont a modern Apple hardvereken (A15 vagy újabb, M1 vagy újabb) a teljesítményhatás elhanyagolható, mivel az iOS 26 grafikus pipeline-ját kifejezetten erre optimalizálták.
Régebbi eszközökön (pl. iPhone XR, iPhone 11 mini) viszont érdemes Instruments segítségével profilozni a kritikus képernyőket. Egy XR-en simán megduplázódhat a frame idő, ha túltolod.
Gyakorlati példa: lebegő tab bar Liquid Glass effekttel
Lássunk egy összetettebb, valós példát: egy egyéni lebegő tab bar, ami az iOS 26 designjához igazodik.
struct FloatingTabBar: View {
@Binding var selection: Tab
var body: some View {
GlassEffectContainer(spacing: 8) {
HStack(spacing: 4) {
ForEach(Tab.allCases) { tab in
Button(action: { selection = tab }) {
VStack(spacing: 4) {
Image(systemName: tab.icon)
.font(.title3)
Text(tab.title)
.font(.caption2)
}
.padding(.horizontal, 16)
.padding(.vertical, 8)
.foregroundStyle(selection == tab ? .primary : .secondary)
}
.glassEffect(
selection == tab
? .regular.tint(.accentColor).interactive()
: .regular.interactive(),
in: .capsule
)
}
}
.padding(6)
}
.padding(.horizontal, 16)
}
}
enum Tab: String, CaseIterable, Identifiable {
case home, search, profile
var id: String { rawValue }
var icon: String {
switch self {
case .home: "house"
case .search: "magnifyingglass"
case .profile: "person"
}
}
var title: String {
switch self {
case .home: "Kezdőlap"
case .search: "Keresés"
case .profile: "Profil"
}
}
}
Ez a komponens egyetlen GlassEffectContainer-en belül egyesíti a tab elemeket, így vizuálisan összeolvadnak — és közben a kiválasztott tab a tint révén kiemelkedik. Pofonegyszerű, mégis nagyon jól mutat.
Gyakran feltett kérdések (FAQ)
Mi a különbség a .ultraThinMaterial és a .glassEffect között?
A .ultraThinMaterial egy egyszerű blur háttér, ami az iOS 15 óta elérhető. A .glassEffect() ezzel szemben fénytörést, lensing-et, dinamikus tükröződést és morfológiai animációkat is támogat — ez egy teljes anyagrendszer, nem csak háttéreffekt. iOS 25 vagy korábbi rendszereken visszaesésként érdemes .ultraThinMaterial-t használni.
Át kell írnom a meglévő appomat Liquid Glass-ra?
Nem azonnal. Ha natív SwiftUI vezérlőket használsz, az iOS 26 SDK-val való újrafordítás automatikusan átveszi az új megjelenést a toolbar és tab bar elemeknél. A custom UI-d viszont csak akkor kap glass effektet, ha explicit alkalmazod. Az Apple a fokozatos átállást javasolja: új komponenseket már Liquid Glass-szal építs, a meglévőket pedig prioritás szerint frissítsd.
Milyen iOS 26-kompatibilis eszközök támogatják a Liquid Glass-t?
Az iOS 26 az iPhone 11-től támogatja a Liquid Glass-t, az iPadOS 26 pedig az M1 vagy újabb chipes iPadeket. Az effekt minden támogatott eszközön elérhető, de a legjobb teljesítményt A15 Bionic vagy újabb chipeken éri el. Régebbi eszközökön a rendszer automatikusan egyszerűsítheti a renderelést.
Hogyan teszteljem a Liquid Glass UI-t Reduce Transparency aktív állapotban?
Az Xcode 26 Simulatorban válaszd a Features → Toggle Reduce Transparency menüpontot, vagy valós eszközön a Settings → Accessibility → Display & Text Size → Reduce Transparency menüben kapcsold be. A SwiftUI automatikusan opacitást ad a glass elemeknek ebben a módban, így nem kell saját logikát írnod — de érdemes ellenőrizni a kontrasztot és olvashatóságot.
Használhatom a glassEffect-et List soraira?
Nem, az Apple kifejezetten kerülendőnek tartja. A glass effekt a navigációs réteghez tartozik, nem a tartalomhoz. List sorokon a transzparencia rontja az olvashatóságot, és felesleges teljesítményköltséget okoz. Helyette használj lebegő akciógombokat (FAB) egy ZStack-ben a lista felett, vagy testreszabott swipe akciókat hagyományos színekkel.
Összegzés
A Liquid Glass nem csupán egy újabb designtrend — őszintén, az Apple platformokon a UI-fejlesztés új alapját jelenti 2026-ban és azután. A .glassEffect(), GlassEffectContainer és .glassEffectID() hármasa együtt egy expresszív, deklaratív API-t alkot, amivel mély, dinamikus felületeket építhetsz minimális kóddal.
A kulcs viszont a fegyelmezett alkalmazás: csak a navigációs rétegen, soha üveget üvegre, és mindig szemantikus tinttel. Ha ezeket az alapelveket követed, az appod nemcsak modernül fog kinézni, hanem a rendszerrel harmonizálva fog viselkedni az összes Apple platformon. És higgyétek el — a felhasználók ezt megérzik, akkor is, ha nem tudják megnevezni, mi az, ami tetszik nekik.
