🥛

【SwiftUI】GlassEffectContainerの使い方

に公開
Swift
SwiftUI
tech

iOS 26以降で導入された「Liquid Glass」は、ガラスのような質感をビューに適用できる新機能です。
複数のビューにこの効果を使う場合は、GlassEffectContainerでまとめると描画が最適化され、
ビュー同士が自然にブレンドして形が溶け合うようなアニメーションを作ることができます。

基本構造

GlassEffectContainer(spacing:) の中に、glassEffect() を付けたビューを配置します。
spacingはビュー同士の距離を示し、この値でブレンドの起こり方が変わります。
例：

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()
            .offset(x: -40.0, y: 0.0)
    }
}

2つの画像を近づけると、ガラス効果がにじむように融合します。
spacingが大きいほど、ブレンドや形のモーフィングが早く起こります。

設定値 プレビュー
spacing: 40
spacing: 10

glassEffect() の注意点

glassEffect(_:in:) はビューの見た目をキャプチャして描画するため、
.frame や .font などの外観変更を先に書き、最後に .glassEffect() を呼びます。

複数ビューを1つのガラス効果にまとめる

静止時でも複数のビューをひとつのガラスカプセルとして扱いたい場合は、
glassEffectUnion(id:namespace:) を使います。

例：

struct ContentView: View {
    let symbolSet = ["cloud.bolt.rain.fill", "sun.rain.fill", "moon.stars.fill", "moon.fill"]
    @Namespace private var namespace

    var body: some View {
        GlassEffectContainer(spacing: 20) {
            HStack(spacing: 20) {
                Image(systemName: "cloud.bolt.rain.fill")
                    .frame(width: 80.0, height: 80.0)
                    .font(.system(size: 36))
                    .glassEffect()
                    .glassEffectUnion(id: "group1", namespace: namespace)

                Image(systemName: "sun.rain.fill")
                    .frame(width: 80.0, height: 80.0)
                    .font(.system(size: 36))
                    .glassEffect()
                    .glassEffectUnion(id: "group1", namespace: namespace)

                Image(systemName: "moon.stars.fill")
                    .frame(width: 80.0, height: 80.0)
                    .font(.system(size: 36))
                    .glassEffect()
                    .glassEffectUnion(id: "group2", namespace: namespace)

                Image(systemName: "moon.fill")
                    .frame(width: 80.0, height: 80.0)
                    .font(.system(size: 36))
                    .glassEffect()
                    .glassEffectUnion(id: "group2", namespace: namespace)
            }
        }
    }
}


これにより、同じIDを持つビューが1つのLiquid Glassカプセルとして結合されます。

まとめ

・複数のガラス効果を使うときはGlassEffectContainerでまとめる
・spacingでブレンドやモーフィングの挙動を調整できる
・glassEffectは外観修飾子のあとに適用する
・glassEffectUnionで複数ビューをひとつの効果に統合できる

リソース：
https://developer.apple.com/documentation/swiftui/glasseffectcontainer
https://developer.apple.com/documentation/swiftui/applying-liquid-glass-to-custom-views#Combine-multiple-views-with-Liquid-Glass-containers

Discussion