SwiftUI iOS 26: Liquid Glass гайд

Въведение: SwiftUI в iOS 26 — наистина нова ера

С представянето на iOS 26 на WWDC 2025, Apple направи може би най-значимата визуална трансформация на платформите си от iOS 7 насам. В центъра на всичко стои Liquid Glass — нов дизайн език, който придава на приложенията полупрозрачен, динамичен и откровено елегантен облик. Но промените далеч не се изчерпват само с визията.

SwiftUI в iOS 26 носи десетки нови API-та, подобрения в производителността, 3D графики, богато текстово редактиране, нов WebView, обновен drag-and-drop и доста повече.

В тази статия ще минем през всички ключови нововъведения — с практически примери и код. Ще обясним как да мигрирате приложенията си и ще споделим най-добрите практики. Ако вече сте запознати с нашите статии за Swift Concurrency, SwiftData и Swift Testing, тук е естественото продължение — SwiftUI е слоят, който свързва всичко в едно цялостно потребителско изживяване.

Liquid Glass: Философия и основни концепции

Liquid Glass не е просто нов визуален ефект — това е цялостна дизайн философия. Apple го описва като „полупрозрачен, динамичен материал, който пречупва и отразява околното съдържание, трансформирайки се, за да фокусира вниманието на потребителя". На практика, Liquid Glass въвежда реално пречупване на светлината (lensing), спекулярни отблясъци, реагиращи на движението на устройството, адаптивни сенки и интерактивни поведения.

Честно казано, когато го видях за първи път в действие — впечатлението е силно.

Основни принципи на Liquid Glass

Преди да започнете да прилагате Liquid Glass, е важно да разберете няколко ключови принципа:

Навигационен слой: Liquid Glass е предназначен изключително за навигационния слой — елементите, които „плават" над съдържанието. Никога не го прилагайте директно към съдържанието (списъци, таблици, мултимедия).
Системна интеграция: TabBar, NavigationBar и Toolbar автоматично получават Liquid Glass облик при компилиране за iOS 26.
Потребителски контроли: За персонализирани изгледи Apple предоставя модификатори като .glassEffect(), GlassEffectContainer и .glassEffectID().
Морфинг: Стъклените елементи могат плавно да се преливат един в друг, създавайки визуално кохерентни анимации.

Работа с glassEffect модификатора

Прилагането на Liquid Glass към потребителски изглед е изненадващо лесно. Модификаторът glassEffect(_:in:isEnabled:) по подразбиране използва обикновения (regular) вариант на стъкления ефект и го прилага в капсулна форма.

Основен пример

import SwiftUI

struct GlassButtonView: View {
    var body: some View {
        Button(action: {
            print("Натиснат бутон")
        }) {
            Label("Настройки", systemImage: "gear")
                .padding()
        }
        .glassEffect()
    }
}

Толкова просто. Бутонът автоматично получава полупрозрачния стъклен ефект — .glassEffect() без параметри прилага стандартния вариант с капсулна форма.

Персонализиране на формата

Разбира се, можете да промените формата:

struct CustomShapeGlassView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("Кръгъл стъклен ефект")
                .padding(24)
                .glassEffect(in: .circle)

            Text("Правоъгълен с закръглени ъгли")
                .padding()
                .glassEffect(in: .rect(cornerRadius: 12))

            Text("Капсула (по подразбиране)")
                .padding()
                .glassEffect(in: .capsule)
        }
    }
}

Варианти на стъкления ефект

Apple предлага няколко варианта на Liquid Glass за различни контексти:

.regular — стандартният полупрозрачен стъклен ефект, подходящ за повечето UI елементи.
.clear — по-субтилен вариант с по-малко визуално доминиране.

struct GlassVariantsView: View {
    var body: some View {
        HStack(spacing: 20) {
            Label("Обикновен", systemImage: "star")
                .padding()
                .glassEffect(.regular)

            Label("Прозрачен", systemImage: "star.fill")
                .padding()
                .glassEffect(.clear)
        }
    }
}

GlassEffectContainer: Групиране и морфинг

Когато имате няколко стъклени елемента, които трябва да работят заедно — да се свързват визуално и да се преливат — използвайте GlassEffectContainer. Този контейнер координира как стъклените елементи се смесват и преминават един в друг.

Основен пример с контейнер

struct GlassToolbarView: View {
    let icons = ["sun.max", "moon", "cloud", "wind"]

    var body: some View {
        GlassEffectContainer(spacing: 30.0) {
            HStack(spacing: 16) {
                ForEach(icons, id: \.self) { icon in
                    Image(systemName: icon)
                        .font(.title2)
                        .padding(12)
                        .glassEffect()
                }
            }
        }
    }
}

Параметърът spacing контролира прага за морфинг — елементи на разстояние по-малко от зададеното визуално се сливат по време на преходи. Ефектът е доста впечатляващ.

Морфинг с glassEffectID

За кохерентни анимации между стъклени елементи при промяна на състоянието, използвайте .glassEffectID(_:in:). Той свързва елементите чрез уникален идентификатор и споделен namespace.

struct MorphingGlassView: View {
    @Namespace private var glassNamespace
    @State private var isExpanded = false

    var body: some View {
        GlassEffectContainer {
            if isExpanded {
                HStack(spacing: 12) {
                    ForEach(["house", "magnifyingglass", "person", "gear"], id: \.self) { icon in
                        Button(action: {}) {
                            Image(systemName: icon)
                                .font(.title2)
                                .padding(12)
                        }
                        .glassEffect()
                        .glassEffectID(icon, in: glassNamespace)
                    }
                }
            } else {
                Button(action: {
                    withAnimation(.spring(duration: 0.5)) {
                        isExpanded = true
                    }
                }) {
                    Image(systemName: "plus")
                        .font(.title)
                        .padding(16)
                }
                .glassEffect()
                .glassEffectID("plus", in: glassNamespace)
            }
        }
    }
}

При натискане на бутона „плюс" той плавно се разгръща в набор от четири бутона, като всеки нов бутон морфира от общия стъклен елемент. Анимацията е изключително плавна — определено от нещата, които трябва да се видят на живо.

Liquid Glass в навигацията

Една от най-забележимите промени е автоматичната Liquid Glass интеграция в стандартните навигационни компоненти. На macOS и iPadOS NavigationSplitView автоматично преобразува страничната лента в Liquid Glass стил, а toolbar елементите получават скрол ефект, който визуално разделя стъклото от съдържанието.

struct MainNavigationView: View {
    @State private var selectedTab: String? = "home"

    var body: some View {
        NavigationSplitView {
            List(selection: $selectedTab) {
                Label("Начало", systemImage: "house")
                    .tag("home")
                Label("Търсене", systemImage: "magnifyingglass")
                    .tag("search")
                Label("Профил", systemImage: "person")
                    .tag("profile")
                Label("Настройки", systemImage: "gear")
                    .tag("settings")
            }
            .navigationTitle("Моето приложение")
        } detail: {
            ContentDetailView(tab: selectedTab)
        }
    }
}

При компилиране за iOS 26 тази стандартна навигационна структура автоматично получава Liquid Glass облик. Без нито един допълнителен ред код.

Liquid Glass Sheets

SwiftUI в iOS 26 поддържа и Liquid Glass стил за sheets (модални изгледи). Можете да представяте модални прозорци с полупрозрачен стъклен ефект, като използвате matchedTransitionSource за плавни анимации:

struct SheetTransitionView: View {
    @State private var showSheet = false
    @Namespace private var transitionNamespace

    var body: some View {
        Button("Отвори настройки") {
            showSheet = true
        }
        .matchedTransitionSource(id: "settings", in: transitionNamespace)
        .sheet(isPresented: $showSheet) {
            SettingsView()
                .navigationTransition(.zoom(sourceID: "settings", in: transitionNamespace))
        }
    }
}

Chart3D: Триизмерни графики в SwiftUI

Добре, сега стигаме до наистина вълнуващата част. Chart3D е разширение на Swift Charts, което позволява визуализация на данни в три измерения. Можете да създавате 3D точкови диаграми, линейни графики и дори математически повърхнини.

PointMark в 3D пространство

import Charts
import SwiftUI

struct DataPoint: Identifiable {
    let id = UUID()
    let x: Double
    let y: Double
    let z: Double
    let category: String
}

struct ScatterPlot3DView: View {
    let dataPoints: [DataPoint] = [
        DataPoint(x: 1, y: 2, z: 3, category: "A"),
        DataPoint(x: 4, y: 5, z: 1, category: "B"),
        DataPoint(x: 2, y: 8, z: 6, category: "A"),
        DataPoint(x: 7, y: 3, z: 4, category: "B"),
        DataPoint(x: 5, y: 6, z: 2, category: "A")
    ]

    var body: some View {
        Chart3D {
            ForEach(dataPoints) { point in
                PointMark(
                    x: .value("X", point.x),
                    y: .value("Y", point.y),
                    z: .value("Z", point.z)
                )
                .foregroundStyle(by: .value("Категория", point.category))
            }
        }
        .chartXAxisLabel("Ос X")
        .chartYAxisLabel("Ос Y")
        .chartZAxisLabel("Ос Z")
        .frame(height: 400)
    }
}

SurfacePlot: Математически повърхнини

SurfacePlot е уникален компонент за Chart3D, който визуализира математически повърхнини с до две променливи. Мислете за него като за триизмерния аналог на LinePlot.

struct SurfacePlotView: View {
    var body: some View {
        Chart3D {
            SurfacePlot(x: "x", y: "y", z: "z") { x, y in
                sin(x) * cos(y)
            }
            .foregroundStyle(
                Gradient(colors: [.blue, .cyan, .green, .yellow, .orange])
            )
        }
        .chartXScale(domain: -3...3)
        .chartYScale(domain: -3...3)
        .chartZScale(domain: -1...1)
        .chart3DPose(azimuth: .degrees(45), inclination: .degrees(30))
    }
}

Модификаторът .chart3DPose() контролира ъгъла на наблюдение — azimuth завърта графиката наляво-надясно, а inclination я наклонява нагоре-надолу.

Камера и проекции

Chart3D предлага две камерни проекции:

Ортографска (по подразбиране) — паралелните линии остават паралелни.
Перспективна — обектите по-далеч изглеждат по-малки, линиите се сближават.

Потребителите могат да взаимодействат с графиките чрез жестове — завъртане и промяна на перспективата. Това прави визуализацията интуитивна и доста ангажираща.

Богато текстово редактиране с TextEditor и AttributedString

Ето нещо, което Swift разработчиците чакаха от доста време — пълна поддръжка на богато текстово редактиране в SwiftUI. TextEditor вече поддържа AttributedString, което означава пълнофункционални текстови редактори без да прибягвате до UIKit или AppKit.

Основен богат текстов редактор

struct RichTextEditorView: View {
    @State private var attributedText = AttributedString("Започнете да пишете тук...")
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $attributedText, selection: $selection)
            .padding()
            .frame(minHeight: 300)
    }
}

Само с този код получавате текстов редактор с вградена поддръжка за клавишни комбинации за форматиране (Bold, Italic, Underline) и менюта за контрол. Никакво допълнително конфигуриране.

Потребителски контроли за форматиране

За по-прецизен контрол можете да добавите собствени бутони:

struct AdvancedTextEditorView: View {
    @Environment(\.fontResolutionContext) var fontResolutionContext
    @State private var attributedText = AttributedString("Вашият текст тук...")
    @State private var selection = AttributedTextSelection()

    var body: some View {
        VStack {
            HStack(spacing: 12) {
                Button(action: toggleBold) {
                    Image(systemName: "bold")
                }
                Button(action: toggleItalic) {
                    Image(systemName: "italic")
                }
                Button(action: toggleUnderline) {
                    Image(systemName: "underline")
                }
            }
            .padding()

            TextEditor(text: $attributedText, selection: $selection)
                .padding()
                .frame(minHeight: 300)
        }
    }

    private func toggleBold() {
        attributedText.transformAttributes(in: selection) { attributes in
            let currentFont = attributes.uiKit.font ?? .systemFont(ofSize: 17)
            if currentFont.fontDescriptor.symbolicTraits.contains(.traitBold) {
                attributes.uiKit.font = currentFont.removingTrait(.traitBold)
            } else {
                attributes.uiKit.font = currentFont.addingTrait(.traitBold)
            }
        }
    }

    private func toggleItalic() {
        attributedText.transformAttributes(in: selection) { attributes in
            let currentFont = attributes.uiKit.font ?? .systemFont(ofSize: 17)
            if currentFont.fontDescriptor.symbolicTraits.contains(.traitItalic) {
                attributes.uiKit.font = currentFont.removingTrait(.traitItalic)
            } else {
                attributes.uiKit.font = currentFont.addingTrait(.traitItalic)
            }
        }
    }

    private func toggleUnderline() {
        attributedText.transformAttributes(in: selection) { attributes in
            if attributes.underlineStyle != nil {
                attributes.underlineStyle = nil
            } else {
                attributes.underlineStyle = .single
            }
        }
    }
}

TextEditor в iOS 26 поддържа удебеляване, курсив, подчертаване, зачертаване, персонализирани шрифтове, цвят на текста и фона, интервали и дори Genmoji — генерираните от AI емоджита на Apple. Доста солиден набор от възможности.

WebView: Уеб съдържание в SwiftUI

iOS 26 въвежда нативен WebView в SwiftUI. Край на обвиването на WKWebView чрез UIViewRepresentable — новият API е чист, декларативен и изцяло интегриран.

import SwiftUI
import WebKit

struct BrowserView: View {
    @State private var page = WebPage()
    @State private var urlText = "https://developer.apple.com"

    var body: some View {
        VStack {
            HStack {
                TextField("Въведете URL", text: $urlText)
                    .textFieldStyle(.roundedBorder)

                Button("Зареди") {
                    if let url = URL(string: urlText) {
                        page.load(URLRequest(url: url))
                    }
                }
            }
            .padding()

            WebView(page)
                .ignoresSafeArea()
        }
        .onAppear {
            if let url = URL(string: urlText) {
                page.load(URLRequest(url: url))
            }
        }
    }
}

WebView предоставя гъвкавост за зареждане на URL адреси, обновяване на страници и персонализиране на обработката на заявки. Обектът WebPage служи като мост между SwiftUI и уеб двигателя на WebKit. Просто и ефективно.

Обновен Drag and Drop

SwiftUI в iOS 26 преработва фундаментално drag-and-drop механизма. Новите API-та позволяват плавно влачене на множество елементи едновременно — нещо особено полезно за файлови мениджъри, фотогалерии и колаборативни инструменти.

Влачене на множество елементи

struct PhotoGridView: View {
    @State private var photos: [Photo] = Photo.sampleData
    @State private var selectedPhotos: Set<Photo.ID> = []

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 8) {
                ForEach(photos) { photo in
                    PhotoThumbnail(photo: photo, isSelected: selectedPhotos.contains(photo.id))
                        .draggable(containerItemID: photo.id)
                        .onTapGesture {
                            if selectedPhotos.contains(photo.id) {
                                selectedPhotos.remove(photo.id)
                            } else {
                                selectedPhotos.insert(photo.id)
                            }
                        }
                }
            }
        }
        .dragContainer(for: Photo.ID.self) { itemIDs in
            let draggedPhotos = photos.filter { itemIDs.contains($0.id) }
            return draggedPhotos.map { $0.transferable }
        }
    }
}

Модификаторът .draggable(containerItemID:) маркира елементи като „влачими" в рамките на контейнер, а .dragContainer(for:) управлява цялостното поведение при влачене на множество елементи. Тази архитектура е значително по-интуитивна от предишните подходи с Transferable.

DragConfiguration

Новият DragConfiguration API позволява фина настройка на поддържаните операции — копиране, преместване или и двете — давайки пълен контрол върху поведението при влачене.

Подобрения в производителността

SwiftUI в iOS 26 идва със сериозни подобрения в производителността. Нека разгледаме най-важните.

По-бързо обновяване на интерфейса

Apple подобри планирането на обновяванията на потребителския интерфейс. Системата вече работи предварително, подготвяйки се за предстоящите кадри, което намалява шанса за пропуснат кадър при бързо скролиране с висока честота на опресняване. На практика — по-гладко усещане навсякъде.

SwiftUI Performance Instrument

Xcode 17 въвежда нов SwiftUI Performance Instrument, с който бързо можете да идентифицирате проблеми:

Дълги обновявания на body: Лесно намирате изгледи, чийто body метод отнема твърде дълго.
Обновявания на платформени изгледи: Откривате бавни UIKit/AppKit обвивки.
Ненужни преизчисления: Виждате излишни преначертавания от неоптимално управление на състоянието.

Подобрени Previews в Xcode 17

Previews в Xcode 17 са преработени основно. Обновяват се мигновено и се държат като истинско приложение — можете да скролирате, натискате бутони и задействате анимации директно в панела за preview. Това ускорява цикъла на разработка значително (и прави целия процес доста по-приятен).

Нови контейнерни изгледи и 3D Layout

SwiftUI в iOS 26 разширява и възможностите за подреждане на изгледи — включително в три измерения. Новите API-та за пространствени изчисления позволяват позициониране на елементи с отчитане на дълбочина.

SpatialContainer и depth модификатори

За visionOS и пространствените изживявания SwiftUI предлага SpatialContainer, manipulable и depth-базирани модификатори:

struct SpatialContentView: View {
    var body: some View {
        SpatialContainer {
            VStack(spacing: 20) {
                Text("Преден план")
                    .padding()
                    .glassEffect()
                    .depth(50)

                Text("Среден план")
                    .padding()
                    .glassEffect()
                    .depth(0)

                Text("Заден план")
                    .padding()
                    .glassEffect()
                    .depth(-50)
            }
        }
    }
}

UIKit интеграция: Подобрена съвместимост

iOS 26 подобрява значително мостовете между SwiftUI и UIKit. Вече можете да хоствате SwiftUI сцени в UIKit и да включвате gesture recognizers от UIKit в SwiftUI изгледи.

Хостване на SwiftUI сцени в UIKit

class MainViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let swiftUIView = DashboardView()
        let hostingController = UIHostingController(rootView: swiftUIView)

        addChild(hostingController)
        view.addSubview(hostingController.view)
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: view.topAnchor),
            hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        hostingController.didMove(toParent: self)
    }
}

UIKit жестове в SwiftUI

Новата интеграция позволява директно използване на UIKit gesture recognizers в SwiftUI изгледи. Това дава достъп до по-фини механизми за контрол на жестове, които SwiftUI все още не покрива нативно — нещо, което много разработчици очакваха.

Миграция към iOS 26: Практически съвети

Мигрирането на съществуващо приложение може да изглежда притеснително, но Apple е проектирала процеса да бъде максимално безпроблемен. Ето какво трябва да знаете.

1. Автоматичен ъпдейт

Повечето стандартни SwiftUI компоненти (NavigationStack, TabView, NavigationSplitView, ToolbarItem) автоматично получават Liquid Glass облик при компилиране за iOS 26. Не е нужно да променяте кода си за тези елементи — просто компилирайте и наблюдавайте.

2. Преглед на персонализираните навигационни елементи

Ако имате персонализирани лентки за навигация или табове, проверете дали се интегрират добре с новия дизайн. Може да се наложи да замените ръчните фонове с .glassEffect().

3. Тестване на цветовите схеми

Liquid Glass реагира на околното съдържание, така че тествайте приложението си с различни фонове и цветови схеми. Уверете се, че текстът остава четлив и контрастът — достатъчен.

4. Постепенна миграция

struct AdaptiveView: View {
    var body: some View {
        VStack {
            if #available(iOS 26, *) {
                CustomToolbar()
                    .glassEffect()
            } else {
                CustomToolbar()
                    .background(.ultraThinMaterial)
            }
        }
    }
}

5. Тестване на производителността

Използвайте новия SwiftUI Performance Instrument в Xcode 17 за идентифициране на проблеми. Liquid Glass ефектите могат да натоварят GPU при неправилна употреба, затова ги прилагайте само на навигационните елементи. Това е важно — не прекалявайте.

Интеграция с SwiftData и Swift Concurrency

SwiftUI в iOS 26 работи безпроблемно със SwiftData и Swift Concurrency. Ето пример, който комбинира и трите технологии:

import SwiftUI
import SwiftData

@Model
class Task {
    var title: String
    var isCompleted: Bool
    var createdAt: Date

    init(title: String, isCompleted: Bool = false) {
        self.title = title
        self.isCompleted = isCompleted
        self.createdAt = .now
    }
}

struct TaskListView: View {
    @Environment(\.modelContext) private var modelContext
    @Query(sort: \Task.createdAt, order: .reverse) private var tasks: [Task]
    @State private var newTaskTitle = ""

    var body: some View {
        NavigationStack {
            List {
                ForEach(tasks) { task in
                    HStack {
                        Image(systemName: task.isCompleted ? "checkmark.circle.fill" : "circle")
                            .foregroundStyle(task.isCompleted ? .green : .secondary)
                            .onTapGesture {
                                task.isCompleted.toggle()
                            }
                        Text(task.title)
                            .strikethrough(task.isCompleted)
                    }
                }
                .onDelete(perform: deleteTasks)
            }
            .navigationTitle("Задачи")
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    HStack {
                        TextField("Нова задача", text: $newTaskTitle)
                        Button("Добави") {
                            addTask()
                        }
                        .disabled(newTaskTitle.isEmpty)
                    }
                }
            }
        }
    }

    private func addTask() {
        let task = Task(title: newTaskTitle)
        modelContext.insert(task)
        newTaskTitle = ""
    }

    private func deleteTasks(at offsets: IndexSet) {
        for index in offsets {
            modelContext.delete(tasks[index])
        }
    }
}

В iOS 26 NavigationStack и Toolbar автоматично получават Liquid Glass стил. @Query от SwiftData работи нативно, а целият код е напълно async-safe благодарение на Swift Concurrency. Всичко се свързва много добре.

Добри практики за SwiftUI в iOS 26

За да извлечете максимума от новите възможности, ето няколко съвета от практиката:

Не прекалявайте с glassEffect: Прилагайте Liquid Glass само на навигационните и контролните елементи. Прекомерната употреба създава визуален шум и удря по производителността.
Използвайте GlassEffectContainer за групи: Когато имате свързани стъклени елементи, винаги ги обвивайте в GlassEffectContainer за кохерентно поведение.
Тествайте достъпността: Уверете се, че стъклените ефекти не пречат на VoiceOver и Dynamic Type. Liquid Glass трябва да подобрява, не да пречи.
Използвайте Chart3D разумно: 3D графиките са мощни, но не винаги подходящи. Използвайте ги, когато третото измерение наистина добавя стойност.
Възприемете AttributedString: Заменете NSAttributedString и UIKit обвивките с нативния TextEditor за по-чист код.
Профилирайте с Instruments: Използвайте новия SwiftUI Performance Instrument за идентифициране на проблемни изгледи.
Поддържайте обратна съвместимост: Ако поддържате по-стари версии на iOS, използвайте #available проверки и предоставяйте достойни алтернативи.

Заключение

SwiftUI в iOS 26 е забележителен скок напред. Liquid Glass е само върхът на айсберга — отдолу се крият десетки нови API-та, подобрения в производителността и инструменти, които правят създаването на приложения по-бързо и по-приятно.

С Chart3D визуализирате данни в три измерения. С обновения TextEditor и AttributedString изграждате пълнофункционални текстови редактори изцяло в SwiftUI. С нативния WebView интегрирате уеб съдържание без UIKit обвивки. А с подобрения drag-and-drop създавате интуитивни интерфейси за управление на съдържание.

Съветът ми? Започнете да експериментирате още днес. Създайте нов проект за iOS 26 в Xcode 17, добавете .glassEffect() към първия си бутон и наблюдавайте магията на Liquid Glass. Комбинирайте с SwiftData, Swift Concurrency и Swift Testing — и ще имате пълния арсенал за модерни iOS приложения.

SwiftUI продължава да бъде бъдещето на разработката за платформите на Apple. И с iOS 26 то никога не е изглеждало по-блестящо — буквално.