SwiftUI Liquid Glass คู่มือ iOS 26 (2026)

Liquid Glass คืออะไร — การเปลี่ยนแปลงครั้งใหญ่ที่สุดตั้งแต่ iOS 7

ใน WWDC 2025 Apple เปิดตัว Liquid Glass — ภาษาการออกแบบใหม่ที่ถือว่าเป็นการปฏิวัติ UI ครั้งใหญ่ที่สุดนับตั้งแต่ iOS 7 สมัยปี 2013 เลย พูดง่าย ๆ มันคือวัสดุโปร่งแสงแบบไดนามิกที่สะท้อนและหักเหเนื้อหาโดยรอบแบบเรียลไทม์ มีทั้งการดัดแสง (Lensing), แสงสะท้อน (Specular Highlights) ที่ตอบสนองต่อการเคลื่อนไหวของอุปกรณ์, เงาที่ปรับตัวอัตโนมัติ, และพฤติกรรมแบบ Interactive ที่ตอบสนองต่อการสัมผัส

สิ่งที่น่าสนใจคือ Liquid Glass ใช้ร่วมกันทุกแพลตฟอร์มเลย ทั้ง iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26, tvOS 26 และ visionOS 26 แอปของคุณจะดูสอดคล้องกันไม่ว่าจะรันบนอุปกรณ์ไหน

ในบทความนี้เราจะพาคุณเรียนรู้การใช้งาน Liquid Glass ใน SwiftUI แบบครบทุกมิติ ตั้งแต่พื้นฐานจนถึงเทคนิคขั้นสูง พร้อมโค้ดตัวอย่างที่เอาไปใช้ในโปรเจกต์จริงได้เลย มาเริ่มกันเลยดีกว่า

เริ่มต้นกับ glassEffect — Modifier หลักของ Liquid Glass

การเพิ่ม Liquid Glass ให้กับ View ใน SwiftUI ทำได้ง่ายกว่าที่คิดมาก แค่ใช้ modifier .glassEffect() ตัวเดียว ระบบจะจัดการเรื่องความโปร่งใส แสง และเงาให้อัตโนมัติหมด

การใช้งานเบื้องต้น

import SwiftUI

struct BasicGlassView: View {
    var body: some View {
        Text("สวัสดี Liquid Glass!")
            .padding()
            .glassEffect() // ค่าเริ่มต้น: .regular, รูปร่าง capsule
    }
}

จริง ๆ แค่นี้ก็ได้เอฟเฟกต์กระจกใสแล้ว ง่ายใช่ไหม? modifier .glassEffect() มี signature แบบนี้:

func glassEffect<S: Shape>(
    _ glass: Glass = .regular,
    in shape: S = DefaultGlassEffectShape,
    isEnabled: Bool = true
) -> some View

พารามิเตอร์ทั้งสามตัวมีค่าเริ่มต้นให้หมด เรียกใช้แบบไม่ระบุค่าอะไรเลยก็ได้

ระบุรูปร่าง (Shape) เอง

คุณกำหนดรูปร่างของ Glass Effect ได้อิสระเลย โดยส่ง Shape ใด ๆ ที่ conform ต่อ Shape protocol:

// Capsule (ค่าเริ่มต้น)
.glassEffect(.regular, in: .capsule)

// วงกลม
.glassEffect(.regular, in: .circle)

// สี่เหลี่ยมมุมมน
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))

// ปรับมุมโค้งให้สอดคล้องกับ Container
.glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

// วงรี
.glassEffect(.regular, in: .ellipse)

// Shape แบบกำหนดเอง
.glassEffect(.regular, in: CustomShape())

ตรงนี้อยากแนะนำเรื่อง .containerConcentric เพราะมันจะปรับมุมโค้งให้สอดคล้องกับ container หรือหน้าต่างที่ครอบอยู่อัตโนมัติ ทำให้ UI ดูกลมกลืนขึ้นเยอะ

ทำความรู้จัก Glass Struct — 3 Variant ที่ต้องรู้

Glass struct คือหัวใจหลักที่กำหนดลักษณะของเอฟเฟกต์กระจก มี 3 variant หลัก กับอีก 2 chainable modifier:

struct Glass {
    static var regular: Glass   // กระจกมาตรฐาน — ความโปร่งใสปานกลาง
    static var clear: Glass     // กระจกใสมาก — เหมาะกับพื้นหลังที่มี media
    static var identity: Glass  // ไม่มีเอฟเฟกต์ — ใช้เปิด/ปิดแบบมีเงื่อนไข

    func tint(_ color: Color) -> Glass
    func interactive() -> Glass
}

เมื่อไหร่ควรใช้ Variant ไหน

.regular — ตัวเลือกเริ่มต้นที่ใช้บ่อยที่สุด เหมาะกับ Toolbar, Navigation Bar, ปุ่มต่าง ๆ ให้ความโปร่งใสระดับปานกลาง
.clear — ใช้เมื่อ View อยู่เหนือเนื้อหาที่มีรูปภาพหรือแผนที่เป็นพื้นหลัง จะให้ความโปร่งใสสูง เห็นเนื้อหาด้านล่างได้ชัดเจน
.identity — ไม่แสดงเอฟเฟกต์อะไรเลย เหมาะกับการเปิด/ปิด Glass Effect แบบมีเงื่อนไข เช่น ตาม Accessibility settings

การ Tint สี — เพิ่มสีให้กระจกอย่างมีความหมาย

เพิ่มสีให้กับ Glass Effect ด้วยเมธอด .tint() ได้ แต่สิ่งสำคัญคือ ใช้ tint เพื่อสื่อความหมายเท่านั้น ไม่ใช่เพื่อตกแต่ง ตัวอย่างเช่น สีแดงสำหรับปุ่มลบ หรือสีน้ำเงินสำหรับปุ่มหลัก

// Tint สีพื้นฐาน
.glassEffect(.regular.tint(.blue))

// Tint พร้อม opacity เพื่อความโปร่งใสที่นุ่มนวลขึ้น
.glassEffect(.regular.tint(.purple.opacity(0.6)))

// Chain หลาย modifier — ลำดับไม่มีผล
.glassEffect(.regular.tint(.orange).interactive())
.glassEffect(.clear.interactive().tint(.blue))

สีที่ใช้กับ tint จะถูกปรับเป็นสีแบบ vibrant ที่เปลี่ยนตามเนื้อหาด้านหลังอัตโนมัติ ข้อความกับไอคอนจึงมองเห็นได้ชัดเสมอ (ไม่ต้องมานั่ง manual adjust เอง)

Interactive Glass — สร้าง Effect ที่ตอบสนองต่อการสัมผัส

นี่คือส่วนที่ส่วนตัวชอบมาก บน iOS เมื่อต้องการให้ Glass Effect ตอบสนองต่อการกด ให้ใช้ .interactive() modifier ซึ่งจะเพิ่มเอฟเฟกต์:

ย่อ-ขยายขนาดเมื่อกด (Scale)
เอฟเฟกต์เด้ง (Bounce)
ประกายแสง (Shimmer)
แสงสว่างที่จุดสัมผัส แผ่กระจายไปยัง Glass Element ข้างเคียง

struct InteractiveGlassButton: View {
    var body: some View {
        Button(action: {
            print("กดแล้ว!")
        }) {
            Label("ตั้งค่า", systemImage: "gear")
                .font(.headline)
                .foregroundStyle(.white)
                .padding()
        }
        .glassEffect(.regular.tint(.blue).interactive())
    }
}

หมายเหตุ: .interactive() จะเพิ่มการใช้ GPU เพียงเล็กน้อย ดังนั้นควรใช้กับ element สำคัญจริง ๆ อย่างปุ่มหลัก (Primary Button) หรือ element ที่เป็นจุดสนใจของหน้าจอ อย่าไปใส่กับทุกอย่าง

GlassEffectContainer — จัดกลุ่ม Glass Element ให้ถูกวิธี

GlassEffectContainer เป็น container view สำหรับจัดกลุ่ม Glass Element หลายตัวเข้าด้วยกัน สำคัญมากจริง ๆ ด้วย 3 เหตุผล:

ประสิทธิภาพการ render — ระบบ render glass element ที่อยู่ใน container เดียวกันได้มีประสิทธิภาพกว่ามาก
ความถูกต้องทางภาพ — Glass material ต้อง sample สีจากเนื้อหาโดยรอบ แต่ glass ไม่สามารถ sample glass ตัวอื่นได้ การใช้ container จะช่วยให้ element ต่าง ๆ แชร์ sampling region ร่วมกัน ผลลัพธ์ทางภาพจึงสม่ำเสมอ
Morphing Animation — Element ที่อยู่ใน container เดียวกันจะ morph (หลอมรวม) เข้าหากันได้เมื่ออยู่ใกล้กัน

การใช้งานพื้นฐาน

struct GlassToolbar: View {
    var body: some View {
        GlassEffectContainer {
            HStack(spacing: 20) {
                Button(action: {}) {
                    Image(systemName: "pencil")
                        .frame(width: 44, height: 44)
                }
                .glassEffect(.regular.interactive())

                Button(action: {}) {
                    Image(systemName: "eraser")
                        .frame(width: 44, height: 44)
                }
                .glassEffect(.regular.interactive())

                Button(action: {}) {
                    Image(systemName: "paintbrush")
                        .frame(width: 44, height: 44)
                }
                .glassEffect(.regular.interactive())
            }
        }
    }
}

Spacing Parameter — ควบคุมระยะ Morphing

พารามิเตอร์ spacing กำหนดระยะห่างที่ Glass Element จะเริ่ม morph เข้าหากัน ถ้า element สองตัวอยู่ใกล้กันภายในระยะนี้ มันจะหลอมรวมเป็น Glass ชิ้นเดียว

GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        // element ที่อยู่ภายในระยะ 40pt จะ morph เข้าหากัน
        ForEach(tools) { tool in
            ToolButton(tool: tool)
                .glassEffect(.regular.interactive())
        }
    }
}

glassEffectID — สร้าง Morphing Transition ที่สวยงาม

ตรง ๆ เลย นี่คือฟีเจอร์ที่ทำให้ตื่นเต้นมากที่สุด Liquid Glass สามารถสร้าง Morphing Transition ได้ — คือการเปลี่ยนผ่านที่ element กระจกแตก-รวมตัวอย่างเลื่อนไหล ทำได้ด้วย glassEffectID

เงื่อนไข 4 ข้อสำหรับ Morphing ที่สมบูรณ์

Element ทั้งหมดต้องอยู่ใน GlassEffectContainer เดียวกัน
แต่ละ View ต้องมี glassEffectID ที่ใช้ร่วมกับ @Namespace
View ต้องถูกแสดง/ซ่อนตามเงื่อนไข เพื่อกระตุ้น morph
การเปลี่ยนสถานะต้องอยู่ใน withAnimation

ขาดข้อไหนข้อหนึ่ง morphing จะไม่ทำงาน (เคยลืมข้อ 4 แล้วนั่งหาบั๊กอยู่พักใหญ่)

ตัวอย่างสมบูรณ์: ปุ่ม Action ที่ขยายได้

struct ExpandableActionMenu: View {
    @State private var isExpanded = false
    @Namespace private var namespace

    var body: some View {
        GlassEffectContainer(spacing: 30) {
            VStack(spacing: 16) {
                if isExpanded {
                    Button(action: { /* แชร์ */ }) {
                        Image(systemName: "square.and.arrow.up")
                            .frame(width: 50, height: 50)
                    }
                    .glassEffect(.regular.interactive())
                    .glassEffectID("share", in: namespace)

                    Button(action: { /* บันทึก */ }) {
                        Image(systemName: "bookmark")
                            .frame(width: 50, height: 50)
                    }
                    .glassEffect(.regular.interactive())
                    .glassEffectID("bookmark", in: namespace)
                }

                Button(action: {
                    withAnimation(.bouncy) {
                        isExpanded.toggle()
                    }
                }) {
                    Image(systemName: isExpanded ? "xmark" : "plus")
                        .font(.title2)
                        .frame(width: 60, height: 60)
                        .contentTransition(.symbolEffect(.replace))
                }
                .glassEffect(.regular.tint(.blue).interactive())
                .glassEffectID("main", in: namespace)
            }
        }
    }
}

เมื่อกดปุ่ม + ปุ่มย่อยจะ "แตกตัว" ออกมาจากปุ่มหลัก และเมื่อกดปุ่ม x ปุ่มย่อยจะ "หลอมรวม" กลับเข้าไป เอฟเฟกต์นี้ทำให้ UI ดูมีชีวิตชีวาและเป็นธรรมชาติมาก ลองไปเล่นดูรับรองว่าจะติดใจ

Button Style สำหรับ Liquid Glass

SwiftUI มี button style สำเร็จรูปให้ใช้งานทันทีโดยไม่ต้องเขียนเอง:

// ปุ่มกระจกมาตรฐาน — สำหรับ action รอง
Button("บันทึก") { /* ... */ }
    .buttonStyle(.glass)

// ปุ่มกระจกเด่นชัด — สำหรับ action หลัก (Primary CTA)
Button("ยืนยัน") { /* ... */ }
    .buttonStyle(.glassProminent)

// กำหนดรูปร่างปุ่ม
Button(action: {}) {
    Image(systemName: "heart.fill")
}
.buttonStyle(.glass)
.buttonBorderShape(.circle)  // ปุ่มกลม

Button("ส่ง") { /* ... */ }
    .buttonStyle(.glass)
    .buttonBorderShape(.capsule)  // ปุ่มแคปซูล

แล้วเมื่อไหร่ควรใช้ .buttonStyle(.glass) กับ .glassEffect() ล่ะ?

ใช้ .buttonStyle(.glass) เมื่อต้องการปุ่มกระจกมาตรฐานที่ไม่ต้องปรับแต่งอะไรมาก — สะดวกดี
ใช้ .glassEffect() โดยตรงเมื่อต้องการปรับแต่งเต็มที่ เช่น กำหนด tint, shape, หรือจะใช้กับ View ที่ไม่ใช่ปุ่มก็ได้

ตัวอย่างโปรเจกต์จริง: Floating Action Toolbar

มาดูตัวอย่างที่ใกล้เคียงกับโปรเจกต์จริงกันบ้าง — Floating Action Toolbar ที่ลอยอยู่เหนือเนื้อหา แบบที่เราเห็นในแอป Notes หรือ Pages ของ Apple:

struct ContentEditorView: View {
    @State private var showToolbar = true
    @Namespace private var toolbarNamespace

    var body: some View {
        ZStack(alignment: .bottom) {
            // เนื้อหาหลัก
            ScrollView {
                LazyVStack(spacing: 16) {
                    ForEach(0..<20) { index in
                        RoundedRectangle(cornerRadius: 12)
                            .fill(.blue.gradient)
                            .frame(height: 200)
                            .overlay {
                                Text("เนื้อหาที่ \(index + 1)")
                                    .font(.title2)
                                    .foregroundStyle(.white)
                            }
                    }
                }
                .padding()
            }

            // Floating Toolbar ด้วย Liquid Glass
            if showToolbar {
                GlassEffectContainer(spacing: 12) {
                    HStack(spacing: 12) {
                        ForEach(["bold", "italic", "underline",
                                 "list.bullet", "photo"], id: \.self) { icon in
                            Button(action: {}) {
                                Image(systemName: icon)
                                    .font(.system(size: 18))
                                    .frame(width: 40, height: 40)
                            }
                            .glassEffect(.regular.interactive())
                            .glassEffectID(icon, in: toolbarNamespace)
                        }
                    }
                    .padding(.horizontal, 8)
                    .padding(.vertical, 4)
                }
                .transition(.move(edge: .bottom).combined(with: .opacity))
                .padding(.bottom, 20)
            }
        }
    }
}

โค้ดนี้สร้าง toolbar ลอยอยู่ด้านล่างของหน้าจอ แต่ละปุ่มมี Liquid Glass ที่ตอบสนองต่อการสัมผัส เวลาปุ่มต่าง ๆ อยู่ใกล้กันภายในระยะ spacing ที่กำหนด มันจะ morph เข้าหากันอัตโนมัติ ดูสวยงามมาก

หลักการออกแบบ — ควรใช้ Liquid Glass ที่ไหน (และที่ไหนไม่ควร)

จุดนี้สำคัญมาก Apple กำหนดชัดเจนว่า Liquid Glass อยู่ใน Navigation Layer เท่านั้น ไม่ใช่ Content Layer

ควรใช้

Toolbar และ Navigation Bar
ปุ่มลอย (Floating Action Buttons)
Tab Bar
Control ที่อยู่เหนือเนื้อหา
Search Bar แบบลอย

ไม่ควรใช้

ทุกแถวใน List — UI จะดูรกและสับสนมาก
พื้นหลังของหน้าจอ — Liquid Glass ออกแบบมาเพื่อ "ลอย" เหนือเนื้อหา ไม่ใช่เป็นพื้นหลังเอง
ซ้อน Glass บน Glass — หลีกเลี่ยงเด็ดขาด เพราะ glass ไม่สามารถ sample glass ตัวอื่นได้อยู่แล้ว
ใช้ tint เพื่อความสวยงามอย่างเดียว — ต้องใช้เพื่อสื่อความหมาย

กฎง่าย ๆ: เนื้อหาหลัก (Content) อยู่ชั้นล่าง → Glass Control ลอยอยู่ชั้นบน แค่นี้เลย

Accessibility — การรองรับการเข้าถึง

ข่าวดีคือ SwiftUI จัดการ Accessibility ของ Liquid Glass ให้อัตโนมัติแทบทั้งหมด ไม่ต้องเขียนอะไรเพิ่ม:

Reduce Transparency — ระบบเพิ่มความทึบ (frosting) ของกระจกให้อัตโนมัติ
Increase Contrast — เพิ่มความคมชัดของสีและขอบ
Reduce Motion — ลดเอฟเฟกต์การเคลื่อนไหว
Tinted Mode (iOS 26.1+) — ผู้ใช้ปรับ opacity ของ Liquid Glass ได้เองในตั้งค่า → จอภาพและความสว่าง

ถ้าอยากควบคุมเอง (ซึ่งจริง ๆ ไม่แนะนำ ยกเว้นจำเป็นมากจริง ๆ) ก็ทำได้แบบนี้:

struct AccessibleGlassView: View {
    @Environment(\.accessibilityReduceTransparency)
    var reduceTransparency

    var body: some View {
        Text("ข้อความบนกระจก")
            .padding()
            .glassEffect(
                reduceTransparency ? .identity : .regular
            )
    }
}

แนวปฏิบัติที่ดีที่สุดคือปล่อยให้ระบบจัดการ Accessibility อัตโนมัติไปเลย

Performance — เคล็ดลับเพิ่มประสิทธิภาพ

Liquid Glass ใช้ทรัพยากรมากกว่า View ธรรมดาอยู่พอสมควร เพราะต้องประมวลผลแสง เงา และการหักเหแบบเรียลไทม์ ดังนั้นมีเรื่องที่ควรคำนึง:

ใช้ GlassEffectContainer เสมอ — เมื่อมี Glass Element หลายตัว จัดกลุ่มใน container จะช่วยให้ระบบ render ได้ดีกว่า render แยกกันเยอะ
จำกัดจำนวน Glass Layer — แต่ละ layer มีต้นทุนการประมวลผล อย่าใส่ Liquid Glass กับทุก element บนหน้าจอ
Implement Equatable — สำหรับ View ที่มี Glass Effect ให้ implement Equatable เพื่อป้องกัน re-render ที่ไม่จำเป็นตอน SwiftUI ทำ diffing
ใช้ .interactive() อย่างประหยัด — modifier นี้เพิ่ม GPU usage ควรใช้กับ element ที่เป็นจุดโฟกัสหลักเท่านั้น

การ Migrate แอปที่มีอยู่สู่ Liquid Glass

สำหรับแอปที่มีอยู่แล้ว การ migrate สู่ Liquid Glass ง่ายกว่าที่คิด:

อัตโนมัติ — แค่ recompile ด้วย Xcode 26 SDK พวก component มาตรฐานอย่าง TabView, NavigationSplitView, toolbar button จะได้ Liquid Glass styling อัตโนมัติเลย
สิ่งที่ต้องระวัง — Navigation Element จะ "ลอย" เหนือ content ทำให้แนวคิด safe area เปลี่ยนไป ต้องตรวจ layout ให้ดีว่าเนื้อหาไม่ถูกบดบัง
ลบ .background() ก่อน — ถ้า View ที่จะใส่ .glassEffect() มี .background() อยู่ ต้องลบ background ออกก่อน ไม่งั้น glass จะมองไม่เห็น (ตรงนี้ลืมบ่อย)

ข้อผิดพลาดที่พบบ่อยและวิธีแก้

1. Glass Effect ไม่แสดง

สาเหตุที่พบบ่อยที่สุดคือมี .background() modifier อยู่ ลบออกได้เลย เพราะ background จะทับ glass effect จนมองไม่เห็น

2. Morphing Animation กระตุก

อาจเกิดจาก Glass Effect ที่ morph จากรูปร่างที่ต่างกันมาก เช่น จากวงกลมเป็นสี่เหลี่ยม ลองใช้รูปร่างที่คล้ายกันมากขึ้นจะช่วยได้

3. Menu ใน GlassEffectContainer ทำให้ Morphing พัง

นี่เป็นบั๊กที่ทราบกันใน iOS 26.1 — วาง Menu ใน GlassEffectContainer จะทำให้ morphing animation ไม่ทำงาน แก้ไขชั่วคราวคือวาง Menu ไว้นอก container ไปก่อน

4. ไม่รองรับ iOS เก่า

Liquid Glass API ใช้ได้เฉพาะ iOS 26 ขึ้นไป ถ้าแอปต้องรองรับ iOS เวอร์ชันเก่า ใช้ #available guard ตามนี้:

if #available(iOS 26, *) {
    Text("Liquid Glass")
        .padding()
        .glassEffect()
} else {
    Text("Standard View")
        .padding()
        .background(.ultraThinMaterial)
        .clipShape(Capsule())
}

คำถามที่พบบ่อย (FAQ)

Liquid Glass ต่างจาก .ultraThinMaterial อย่างไร?

.ultraThinMaterial ที่มีใน SwiftUI รุ่นก่อน ๆ เป็นเพียงเอฟเฟกต์เบลอพื้นหลังแบบคงที่ แต่ Liquid Glass ต่างกันมาก มันเป็นวัสดุไดนามิกที่มีคุณสมบัติเพิ่มเติมทั้งการหักเหแสง (Lensing), แสงสะท้อน (Specular Highlights), การตอบสนองต่อการสัมผัส, และ morphing animation ที่หลอมรวม element เข้าหากัน ถือว่าเป็นคนละระดับกันเลย

ใช้ Liquid Glass กับ UIKit ได้ไหม?

ได้ Apple มี API สำหรับ UIKit เหมือนกัน แต่บทความนี้เน้นที่ SwiftUI เป็นหลัก สำหรับ UIKit จะมี API ที่ต่างในรายละเอียดบ้าง แต่แนวคิดหลักเหมือนกัน ทั้ง UIKit และ SwiftUI ทำงานร่วมกันในสถาปัตยกรรม Hybrid ได้ด้วย

Liquid Glass ต้องใช้ iOS เวอร์ชันอะไรเป็นอย่างน้อย?

ต้องใช้ iOS 26 ขึ้นไป และ build ด้วย Xcode 26 หากแอปต้องรองรับ iOS เวอร์ชันเก่ากว่า ใช้ #available(iOS 26, *) guard ได้เลย

Liquid Glass มีผลต่อ performance ของแอปมากไหม?

ใช้ GPU มากกว่า View ธรรมดาอยู่บ้าง เพราะต้องประมวลผลแสงและการหักเหแบบเรียลไทม์ แต่ Apple ได้ optimize มาดีพอสมควร ตัวช่วยสำคัญคือ GlassEffectContainer ที่เพิ่มประสิทธิภาพ render ได้มาก แค่อย่าไปใส่ glass effect กับทุก element บนหน้าจอก็พอ

TabView และ NavigationBar จะเปลี่ยนเป็น Liquid Glass อัตโนมัติไหม?

ใช่ แค่ compile แอปด้วย Xcode 26 SDK พวก TabView, NavigationSplitView และ toolbar button จะได้ Liquid Glass styling อัตโนมัติโดยไม่ต้องแก้โค้ดอะไรเลย สะดวกมาก