Ios Liquid Glass

Prisma-Labs-Dev/apple-skills/skills/ios-liquid-glass

作者 Prisma-Labs-Dev498626005e65783ebe8570a103b2335cf397768c無授權條款收錄於 2026年10月9日更新於 2026年10月9日

API reference: Liquid Glass (iOS 26+). Query for glass effects, navigation patterns, GlassEffect modifiers, design principles.

僅含說明Software Development
AI 產生的概覽

Apple Liquid Glass 設計系統（iOS 26+）參考，涵蓋玻璃效果、容器、導覽與輔助使用功能。

功能
提供 iOS 26 及更新版本中 Liquid Glass 設計系統的 API 參考，說明 glassEffect 修飾符、玻璃變體、GlassEffectContainer、形變轉場、導覽介面、SF Symbols 效果、觸覺回饋與輔助使用調適。內容包含 SwiftUI 與 UIKit 程式碼範例，以及 Apple 闡述的設計原則。這是供查閱的文件，而非產生檔案的工具。
適用情境
適用於在 App 中實作玻璃材質、glassEffect 修飾符或 GlassEffectContainer，或處理標籤列、工具列、工作表等系統玻璃導覽介面時。也適用於檢查玻璃如何調適輔助使用設定，或使用 Icon Composer 建立 App 圖示時。
執行需求
不需要指令碼或套件，僅為說明與參考資料。範例以 iOS 26 或更新版本上的 SwiftUI 與 UIKit 為對象。

iOS Liquid Glass Reference

API reference for the Liquid Glass design system (iOS 26+): glass effects, containers, morphing transitions, and related system behaviors. This documents what the system provides — design direction is yours.

When to Use

  • Implementing glass materials, glassEffect modifiers, or GlassEffectContainer
  • Navigation surfaces that use system glass (tabs, toolbars, sheets)
  • Checking how glass adapts to accessibility settings
  • Creating app icons with Icon Composer

Apple's Stated Design Principles

Apple describes Liquid Glass with three principles (reference, not a mandate):

PrincipleDescription
HierarchyControls float above content. Glass frames content rather than obscuring it.
HarmonySoftware design aligns with hardware — concentric corners, fluid gestures.
ConsistencyAdapts across iPhone, iPad, Mac — same identity, contextual expression.

One functional constraint worth knowing: glass is designed for the navigation/control layer. Applying it to content surfaces defeats its sampling model (see containers below).

Liquid Glass Core API

Basic Glass Effect

swift
import SwiftUI
// Simple glass applicationText("Action")    .padding()    .glassEffect() // .regular variant, .capsule shape
// With explicit parametersButton("Confirm") { }    .padding()    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

Glass Variants

VariantUse Case
.regularToolbars, nav bars, tab bars, standard controls
.clearFloating controls over media (photos, maps, video)
.identityConditional disable: glassEffect(isActive ? .regular : .identity)

Glass Modifiers

swift
// Semantic tinting.glassEffect(.regular.tint(.accentColor))
// Interactive behaviors (scaling, shimmer, touch illumination).glassEffect(.regular.interactive())
// Combined.glassEffect(.regular.tint(.blue).interactive())

Custom Shapes

swift
// Standard shapes.glassEffect(.regular, in: .capsule).glassEffect(.regular, in: .circle).glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))
// Container-concentric (matches device/container corners).glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

GlassEffectContainer & Morphing

Container Setup

Glass cannot sample other glass. Use containers for multiple glass elements:

swift
GlassEffectContainer(spacing: 30) {    HStack(spacing: 20) {        ForEach(actions) { action in            Button(action.title, systemImage: action.icon) { }                .frame(width: 44, height: 44)                .glassEffect(.regular.interactive())        }    }}

Morphing Transitions

swift
struct ExpandableActions: View {    @State private var isExpanded = false    @Namespace private var namespace
    var body: some View {        GlassEffectContainer(spacing: 30) {            VStack(spacing: 30) {                if isExpanded {                    ActionButton(icon: "rotate.right")                        .glassEffectID("rotate", in: namespace)                }
                HStack(spacing: 30) {                    if isExpanded {                        ActionButton(icon: "slider.horizontal.3")                            .glassEffectID("adjust", in: namespace)                    }
                    Button {                        withAnimation(.bouncy) { isExpanded.toggle() }                    } label: {                        Image(systemName: isExpanded ? "xmark" : "plus")                            .frame(width: 56, height: 56)                    }                    .glassEffect(.regular.tint(.accentColor).interactive())                    .glassEffectID("toggle", in: namespace)
                    if isExpanded {                        ActionButton(icon: "crop")                            .glassEffectID("crop", in: namespace)                    }                }
                if isExpanded {                    ActionButton(icon: "wand.and.stars")                        .glassEffectID("enhance", in: namespace)                }            }        }    }}

Navigation Patterns

Tab Bar (Floating)

swift
TabView {    Tab("Home", systemImage: "house") {        HomeView()    }
    Tab("Search", systemImage: "magnifyingglass") {        SearchView()    }
    Tab("Profile", systemImage: "person") {        ProfileView()    }}// Tab bar now floats, reacts to background, collapses on scroll

Toolbar with Grouping

swift
.toolbar {    ToolbarItemGroup(placement: .topBarTrailing) {        Button("Edit", systemImage: "pencil") { }        Button("Share", systemImage: "square.and.arrow.up") { }    }
    ToolbarSpacer(.flexible, placement: .topBarTrailing)
    ToolbarItem(placement: .topBarTrailing) {        Button("Done", systemImage: "checkmark") { }            .tint(.accentColor)    }}

Sheets with Morphing

swift
struct ContentView: View {    @State private var showSettings = false    @Namespace private var namespace
    var body: some View {        NavigationStack {            ContentView()                .toolbar {                    ToolbarItem(placement: .topBarTrailing) {                        Button("Settings", systemImage: "gear") {                            showSettings = true                        }                        .matchedTransitionSource(id: "settings", in: namespace)                    }                }                .sheet(isPresented: $showSettings) {                    SettingsView()                        .navigationTransition(.zoom(sourceID: "settings", in: namespace))                        .presentationDetents([.medium, .large])                }        }    }}

SF Symbols Effects

swift
Image(systemName: "checkmark.circle")    .symbolEffect(.drawOn, value: isComplete)
Image(systemName: "heart.fill")    .symbolEffect(.bounce, value: isFavorite)

Haptics API

swift
import UIKit
// Impact feedbacklet generator = UIImpactFeedbackGenerator(style: .medium)generator.impactOccurred()
// Selection feedbacklet selection = UISelectionFeedbackGenerator()selection.selectionChanged()
// Success/errorlet notification = UINotificationFeedbackGenerator()notification.notificationOccurred(.success)

Accessibility Behaviors

Automatic Glass Adaptations

Glass automatically adapts to:

  • Reduce Transparency: More frosting
  • Increase Contrast: Stark borders
  • Reduce Motion: Tones down animation

Manual Checks

swift
@Environment(\.accessibilityReduceTransparency) var reduceTransparency@Environment(\.accessibilityReduceMotion) var reduceMotion
var animation: Animation? {    reduceMotion ? nil : .bouncy}

System expectations: minimum 44x44pt touch targets, accessibility labels, Dynamic Type support.

Reference

For official Apple documentation links, WWDC session IDs, and API quick reference tables, see reference.md [blocked].

來源與署名

來源：Prisma-Labs-Dev/apple-skills位於skills/ios-liquid-glass提交4986260

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 Prisma-Labs-Dev/apple-skills 的技能

Eventkit

Prisma-Labs-Dev

Apple EventKit 行事曆與提醒 API 的參考文件，涵蓋 EKEventStore、EKEvent 和 EKReminder。

Software Development2026年10月9日

Swiftui

Prisma-Labs-Dev

本機 SwiftUI API 參考，用來查詢檢視、版面配置、導覽、狀態包裝器與修飾符。

Software Development2026年10月9日

Xcuitest

Prisma-Labs-Dev

用於撰寫可靠 Swift 6 XCUITest UI 測試的參考指南，涵蓋查詢、等待、斷言與截圖。

Software Development2026年10月9日

Swiftdata

Prisma-Labs-Dev

SwiftData API 參考文件，涵蓋 @Model、ModelContext、@Query 與結構描述遷移。

Software Development2026年10月9日

Widgetkit

Prisma-Labs-Dev

透過檢索內建參考文件，回答 WidgetKit 小工具、時間軸項目與提供器的 API 問題。

Software Development2026年10月9日

Hig

Prisma-Labs-Dev

本機可 grep 的 Apple 人機介面指南參考，用於查詢元件、無障礙最低要求與慣例等事實。

Research & Analysis2026年10月9日

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新