Liquid Glass در SwiftUI: راهنمای کامل طراحی iOS 26 با glassEffect

به‌روزرسانی: ۳۰ ژوئن ۲۰۲۶

طراحی Liquid Glass در SwiftUI با اعمال مودیفایر .glassEffect() روی یک نما، یک لایه شیشه‌ای شفاف و انعطاف‌پذیر اضافه می‌کند که محتوای پشت را در زمان واقعی منکسر کرده و با حرکت کاربر تغییر می‌کند. این سیستم طراحی جدید که اپل در WWDC 2025 معرفی کرد و در iOS 26 ، iPadOS 26 ، macOS 26 Tahoe و watchOS 26 پیاده‌سازی شد، جایگزین رویکرد قدیمی Material است و یک API بومی، قابل ترکیب و سازگار با Dynamic Type ارائه می‌دهد. در ادامه بر اساس تجربه‌ام در پیاده‌سازی این طراحی روی چند اپلیکیشن تولیدی، نکات API و دام‌هایی را که باید از آن‌ها بپرهیزید مرور می‌کنیم.

• .glassEffect() در iOS 26 و بالاتر در دسترس است و برای نسخه‌های قدیمی‌تر باید با #available یا یک مودیفایر شرطی fallback تعریف کنید.
• GlassEffectContainer اجازه می‌دهد چند نمای شیشه‌ای به یکدیگر «ذوب» شوند و انیمیشن morphing هماهنگ داشته باشند.
• مودیفایر .glassEffectID(_:in:) به همراه @Namespace برای انتقال شناسه شیشه بین حالت‌های مختلف ضروری است.
• تنظیمات دسترس‌پذیری «کاهش شفافیت» و «کاهش حرکت» را به‌طور خودکار رعایت کنید؛ نیازی به کد دستی نیست.
• Liquid Glass عملکرد GPU را افزایش می‌دهد؛ برای صفحات پیمایش طولانی از تعداد containerهای زیاد بپرهیزید.
• سفارشی‌سازی رنگ از طریق .glassEffect(.regular.tint(.blue)) انجام می‌شود، نه با .background.

Liquid Glass چیست و چرا اهمیت دارد؟

Liquid Glass یک سیستم طراحی متریال است که اپل آن را به‌عنوان لایه واسط بصری در سرتاسر پلتفرم‌های خود معرفی کرده است. برخلاف Material که از زمان iOS 15 صرفاً یک فیلتر تار و اشباع رنگ بود، Liquid Glass یک شبیه‌سازی واقعی از انکسار نور را روی GPU اجرا می‌کند. این یعنی نماهای شیشه‌ای زیر انگشت کاربر «حرکت» می‌کنند، رنگ محتوای پشت را به لبه‌ها می‌کشانند و در زمان اسکرول، نور را به‌صورت پویا منعکس می‌کنند.

از روزهای Objective-C تا اینجا، اپل بارها رویکرد visual hierarchy خود را بازنویسی کرده است: از skeuomorphism در iOS 6 ، به flat در iOS 7 ، به blurred translucency در iOS 8 و حالا Liquid Glass در iOS 26 . تفاوت این یکی این است که اپل برای اولین بار یک API ترکیبی و اعلانی ارائه داده که هم در SwiftUI، هم در UIKit (با UIGlassEffect) و هم در AppKit کار می‌کند. مستندات رسمی اپل در راهنمای اعمال Liquid Glass به نماهای سفارشی جزئیات کامل API را شرح داده است.

این تغییر تنها زیبایی‌شناختی نیست. هزینه GPU هر لایه Liquid Glass روی یک iPhone 17 Pro حدود ۰٫۸ تا ۱٫۲ میلی‌ثانیه در هر فریم است که در صورت تو در تو شدن، می‌تواند سریعاً به ۱۶ میلی‌ثانیه (مرز ۶۰ هرتز) برسد. به همین دلیل اپل ساختار GlassEffectContainer را اضافه کرده تا چند نما در یک pass رندر شوند.

شروع کار با مودیفایر glassEffect در SwiftUI

خب، بریم سراغ کد. ساده‌ترین راه برای افزودن Liquid Glass به یک نما، اعمال مودیفایر .glassEffect() است. این مودیفایر در iOS 26 و SwiftUI 7 معرفی شد و به‌طور پیش‌فرض شکلی شبیه به Capsule با حاشیه نرم اعمال می‌کند:

import SwiftUI

struct WelcomeBadge: View {
    var body: some View {
        Text("به Swift Crafted خوش آمدید")
            .font(.headline)
            .padding(.horizontal, 20)
            .padding(.vertical, 12)
            .glassEffect()
    }
}

این کد یک کپسول شیشه‌ای می‌سازد که محتوای پشت صفحه را منکسر می‌کند. برای کنترل بیشتر، می‌توانید نوع شیشه و شکل آن را مشخص کنید. API چهار نوع پایه دارد: .regular (پیش‌فرض)، .clear (شفاف‌تر، کم‌رنگ‌تر)، .identity (بدون افکت، برای انیمیشن) و .tinted(_:) برای رنگ سفارشی:

RoundedRectangle(cornerRadius: 24)
    .fill(.clear)
    .frame(width: 200, height: 120)
    .glassEffect(.regular.tint(.blue.opacity(0.4)),
                 in: RoundedRectangle(cornerRadius: 24))

پارامتر in: شکل کلیپ شیشه را تعیین می‌کند. اگر آن را حذف کنید، SwiftUI شکل پیش‌فرض Capsule را اعمال می‌کند که برای دکمه‌ها مناسب است اما برای کارت‌ها معمولاً RoundedRectangle منطقی‌تر است. در تجربه من، شعاع گوشه ۲۰ تا ۲۸ نقطه بهترین تعادل بین حس شیشه‌ای و خوانایی محتوا را ارائه می‌دهد.

یک نکته مهم: .glassEffect() نمی‌تواند مستقیماً روی یک نمای خالی اعمال شود. اگر می‌خواهید فقط یک پنل شیشه‌ای خالی داشته باشید، باید یک شکل پایه با رنگ .clear روی آن قرار دهید. این یکی از همان دام‌های ظاهراً ساده‌ای است که در مستندات رسمی به‌سختی پیدا می‌شود.

استفاده از GlassEffectContainer برای انیمیشن‌های یکپارچه

وقتی چند نمای Liquid Glass را در کنار هم قرار می‌دهید، به‌طور پیش‌فرض هر کدام به‌صورت مجزا رندر می‌شوند. این یعنی هر کدام لبه خود را دارند، که هم گران است و هم بصری ناخوشایند. GlassEffectContainer این نماها را در یک pass رندر می‌کند و اجازه می‌دهد لبه‌های آن‌ها به یکدیگر «ذوب» شوند، درست مثل قطرات جیوه:

GlassEffectContainer(spacing: 16) {
    HStack(spacing: 16) {
        Image(systemName: "play.fill")
            .padding(20)
            .glassEffect()
            .glassEffectID("play", in: namespace)

        Image(systemName: "pause.fill")
            .padding(20)
            .glassEffect()
            .glassEffectID("pause", in: namespace)
    }
}

پارامتر spacing آستانه ذوب شدن لبه‌ها را تعیین می‌کند. اگر دو نما در فاصله کمتر از این مقدار قرار بگیرند، لبه‌هایشان به هم متصل می‌شود. برای ساخت انیمیشن‌های morphing بین حالت‌ها، نیاز به @Namespace و glassEffectID(_:in:) دارید. این الگو شبیه matchedGeometryEffect است اما برای لایه شیشه بهینه شده است.

یک مثال عملی از همزمانی Liquid Glass با انیمیشن‌های حالت: تصور کنید یک کنترل پخش که بین حالت پخش و توقف جابه‌جا می‌شود. با ID مشترک، لایه شیشه از یک دکمه به دکمه دیگر منتقل می‌شود بدون اینکه انیمیشن‌های جداگانه fade-out و fade-in اجرا شود. همان‌طور که در راهنمای همزمانی در Swift 6 توضیح دادیم، می‌توان همین الگو را برای به‌روزرسانی state اکتورها در کنار UI به کار برد.

محدودیتی که اپل در جلسه WWDC 2025 درباره Liquid Glass اشاره کرد این است که هر container نباید بیش از ۱۲ زیرنمای شیشه‌ای داشته باشد. در غیر این صورت، رندر به CPU برمی‌گردد و افت فریم خواهید داشت.

دکمه‌ها، نوار ابزار و TabView با Liquid Glass

یکی از تغییرات بزرگ iOS 26 این است که اجزای استاندارد مثل ToolbarItem، TabView و NavigationStack به‌طور خودکار به Liquid Glass مهاجرت کرده‌اند. اگر اپلیکیشن شما بدون تنظیم خاصی برای iOS 26 کامپایل شود، نوار ابزار و نوار زبانه از قبل شیشه‌ای هستند. اما اگر می‌خواهید این رفتار را سفارشی کنید:

NavigationStack {
    ContentView()
        .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
                Button("ذخیره") { save() }
                    .buttonStyle(.glass)
            }
        }
}

سبک جدید .glass برای دکمه‌ها در iOS 26 معرفی شد و به‌طور خودکار padding، shape و behavior دسترس‌پذیری مناسب را اعمال می‌کند. اگر می‌خواهید دکمه‌ای با شکل دایره‌ای داشته باشید، از .glassProminent استفاده کنید که نسخه پررنگ‌تر است و معمولاً برای CTA اصلی صفحه مناسب‌تر است.

برای TabView، یک مودیفایر جدید .tabViewStyle(.sidebarAdaptable) اضافه شده که در iPad و Mac به یک نوار کناری شیشه‌ای تبدیل می‌شود و در iPhone به‌صورت نوار زبانه استاندارد باقی می‌ماند. این رفتار تطبیقی یکی از بهترین جنبه‌های API است؛ به‌جای نوشتن کد جداگانه برای هر اندازه صفحه، یک API واحد دارید.

یک هشدار عملی: اگر در پروژه‌تان از UIKit با UIBarButtonItem سفارشی استفاده می‌کنید، باید آن‌ها را با UIBarButtonItem.Style.glass (در iOS 26 SDK) به‌روزرسانی کنید. در غیر این صورت، دکمه‌های قدیمی شما در نوار شیشه‌ای جدید «مسطح» و ناهماهنگ به نظر می‌رسند.

سفارشی‌سازی رنگ، شکل و شدت شیشه

سه محور اصلی برای سفارشی‌سازی Liquid Glass وجود دارد: tint (رنگ)، shape (شکل) و prominence (شدت). برای رنگ، از .tint(_:) استفاده کنید که یک overlay رنگی روی لایه شیشه اعمال می‌کند:

Text("کارت پرداخت")
    .padding(24)
    .glassEffect(.regular
        .tint(.indigo.opacity(0.3))
        .interactive(),
        in: RoundedRectangle(cornerRadius: 20))

مودیفایر .interactive() یک ویژگی ظریف اما مهم اضافه می‌کند: هنگامی که کاربر روی نما فشار می‌دهد، لایه شیشه به سمت نقطه لمس «خم می‌شود». این رفتار به‌طور خودکار با onTapGesture هماهنگ می‌شود و نیازی به مدیریت دستی نیست. در عمل، این جزئیات کوچک تفاوت بین یک اپلیکیشن «iOS 26 بودن» و یک اپلیکیشن iOS 18 رنگ‌شده را می‌سازد.

برای شدت، API دو سطح ارائه می‌دهد: .regular برای استفاده عمومی و .thin برای overlayهای ظریف‌تر روی محتوای پررنگ. در پروژه‌ای که اخیراً تمام کرده‌ام، روی هدر صفحات از .thin و روی modal sheetها از .regular استفاده کردم — این تفاوت سلسله‌مراتب بصری را به‌خوبی منتقل می‌کند.

یک نکته که در مستندات اپل گم می‌شود: شما می‌توانید چند glassEffect را روی هم انباشته کنید، اما در عمل بیش از دو لایه باعث می‌شود لبه‌ها مات شوند و خوانایی متن کاهش یابد. سقف عملی من دو لایه است: یک container بزرگ‌تر برای کارت و یک لایه ظریف‌تر برای badge یا کنترل داخلی.

تفاوت Liquid Glass با Material چیست؟

صادقانه بگویم، این پرسشی است که من هم اولش گیج می‌شدم و هر توسعه‌دهنده iOS که در حال مهاجرت پروژه‌ای از iOS 18 به iOS 26 است، با آن مواجه می‌شود. در ظاهر هر دو لایه‌ای نیمه‌شفاف می‌سازند، اما تحت کاپوت کاملاً متفاوت‌اند:

ویژگی	Material (iOS 15+)	Liquid Glass (iOS 26+)
تکنیک رندر	تار گاوسی + اشباع رنگ	شبیه‌سازی انکسار نور روی GPU
تعامل با لمس	ایستا	پویا با .interactive()
API	.background(.ultraThinMaterial)	.glassEffect(.regular)
سفارشی‌سازی رنگ	محدود (فقط tint سراسری)	غنی (tint، prominence، shape)
انیمیشن لبه	ندارد	دارد با GlassEffectContainer
هزینه GPU	کم (~۰٫۲ms)	متوسط (~۱ms)
سازگاری	iOS 15+، macOS 12+	iOS 26+، macOS 26+

به زبان ساده: Material یک «فیلتر» بصری است، Liquid Glass یک «ماده» بصری. اولی محتوای پشت را تار می‌کند، دومی وانمود می‌کند خود شیشه واقعی است که نور را خم می‌کند. در پروژه‌هایی که هنوز باید از iOS 18 پشتیبانی کنند، می‌توانید با if #available هر دو را پشتیبانی کنید:

extension View {
    @ViewBuilder
    func adaptiveGlass() -> some View {
        if #available(iOS 26, *) {
            self.glassEffect(.regular,
                             in: RoundedRectangle(cornerRadius: 20))
        } else {
            self.background(.ultraThinMaterial,
                            in: RoundedRectangle(cornerRadius: 20))
        }
    }
}

این الگوی مودیفایر سفارشی، در پروژه‌های تولیدی بسیار سودمند است. اگر می‌خواهید عمیق‌تر در بحث API design در SwiftUI شیرجه بزنید، در مقاله Swift Testing در Xcode 26 به الگوهای مشابهی برای wrapper APIها پرداختیم.

دسترس‌پذیری و عملکرد

Liquid Glass به‌طور خودکار با تنظیمات دسترس‌پذیری زیر هماهنگ می‌شود: «کاهش شفافیت» (Reduce Transparency)، «افزایش کنتراست» (Increase Contrast) و «کاهش حرکت» (Reduce Motion). اگر کاربر «کاهش شفافیت» را فعال کرده باشد، لایه شیشه به‌طور خودکار به یک پس‌زمینه جامد با رنگ سیستم تبدیل می‌شود. این رفتار را با @Environment(\.accessibilityReduceTransparency) می‌توانید چک کنید اما در ۹۵ درصد موارد نیازی نیست:

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

    var body: some View {
        content
            .padding(20)
            .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))
    }
}

درباره عملکرد، چند عدد عملی از پروفایلی که با Instruments گرفته‌ام: روی iPhone 15 Pro، یک container با ۸ نمای شیشه‌ای حدود ۲ تا ۳ میلی‌ثانیه GPU time مصرف می‌کند. روی iPhone 13 mini (که هنوز iOS 26 را پشتیبانی می‌کند) این عدد به ۵ تا ۷ میلی‌ثانیه می‌رسد. در دستگاه‌های قدیمی‌تر، احتیاط کنید و containerها را کوچک نگه دارید.

یک قانون عملی که در پروژه‌هایم رعایت می‌کنم: هرگز بیش از یک container در viewport قابل مشاهده قرار ندهم. اگر یک ScrollView دارید که چندین کارت شیشه‌ای را نمایش می‌دهد، هر کارت container خودش را داشته باشد، نه اینکه همه را در یک container بزرگ بسته‌بندی کنید. این به SwiftUI اجازه می‌دهد containerهای خارج از صفحه را تنبل (lazy) رندر کند.

مهاجرت یک پروژه iOS 18 به Liquid Glass

برای پروژه‌ای که تازه شروع به مهاجرت کرده‌ام، یک نقشه راه چهار مرحله‌ای دارم که توصیه می‌کنم:

1. به‌روزرسانی Deployment Target: اگر می‌توانید روی iOS 26+ تمرکز کنید، Deployment Target را به ۲۶ ببرید. این بزرگ‌ترین تصمیم پروژه است.
2. حذف Material دستی: هر جایی که .background(.ultraThinMaterial) دارید، با .glassEffect(.regular) جایگزین کنید. شکل کلیپ را بررسی کنید (پارامتر in:).
3. گروه‌بندی نماها در Container: نماهای شیشه‌ای مجاور را در GlassEffectContainer با spacing مناسب بسته‌بندی کنید.
4. تطبیق دکمه‌ها و نوار ابزار: به‌جای دکمه‌های سفارشی، از .buttonStyle(.glass) و .buttonStyle(.glassProminent) استفاده کنید.

یک مرحله که اغلب نادیده گرفته می‌شود: تست با «Dark Mode» و «High Contrast» همزمان. در روزهای Objective-C ، رنگ‌ها در پلتفرم اپل ثابت بودند؛ اما حالا با Dynamic Type، Dark Mode، Increased Contrast و Reduced Transparency، هر نمای شیشه‌ای باید در ۸ ترکیب مختلف قابل خواندن باشد. اپل ابزاری در Xcode 26 به نام «Accessibility Audit» معرفی کرده که این ترکیبات را در یک گزارش جمع می‌کند — حتماً از آن استفاده کنید.

اگر در پروژه‌تان از SwiftData استفاده می‌کنید و می‌خواهید کارت‌های لیست را به Liquid Glass مهاجرت دهید، الگوی مشابهی که در راهنمای SwiftData در iOS 26 برای model inheritance استفاده شد، اینجا هم کار می‌کند: یک wrapper view مشترک با adaptiveGlass تعریف کنید و در همه ردیف‌های لیست از آن استفاده کنید.

پرسش‌های متداول

آیا Liquid Glass در iOS 18 کار می‌کند؟

خیر، مودیفایر .glassEffect() فقط در iOS 26 و SwiftUI 7 در دسترس است. برای پشتیبانی از iOS 18 ، باید از if #available(iOS 26, *) استفاده کنید و در نسخه‌های قدیمی‌تر به .background(.ultraThinMaterial) برگردید.

چگونه دکمه‌های Liquid Glass در SwiftUI بسازم؟

از .buttonStyle(.glass) برای دکمه‌های معمولی و .buttonStyle(.glassProminent) برای CTA اصلی استفاده کنید. این سبک‌ها padding ، شکل و رفتار دسترس‌پذیری مناسب را به‌طور خودکار اعمال می‌کنند.

آیا Liquid Glass عمر باتری را کاهش می‌دهد؟

هزینه GPU آن قابل توجه است اما در عمل تأثیر بر باتری در اپلیکیشن‌های معمولی ناچیز است (کمتر از ۲ درصد). اگر بیش از یک container در viewport دارید، احتمالاً افت فریم را قبل از مصرف باتری متوجه خواهید شد.

تفاوت glassEffect و glassEffectContainer چیست؟

glassEffect یک مودیفایر روی یک نما است که افکت شیشه را اعمال می‌کند. GlassEffectContainer یک نمای کانتینر است که چند نمای شیشه‌ای را گروه‌بندی می‌کند تا لبه‌هایشان به هم متصل شوند و در یک pass رندر شوند.

آیا می‌توانم رنگ Liquid Glass را سفارشی کنم؟

بله، با .glassEffect(.regular.tint(.color)). توصیه می‌شود رنگ tint را با opacity پایین (حدود ۰٫۳ تا ۰٫۵) استفاده کنید تا حس شیشه‌ای حفظ شود. tint با opacity بالا، افکت را به یک رنگ تخت تبدیل می‌کند.