Sistema de Design Liquid Glass (iOS 26)

O que Sistema de Design Liquid Glass (iOS 26) faz?

Padrões para implementar o Liquid Glass da Apple — um material dinâmico que desfoca o conteúdo atrás de si, reflete a cor e luz do conteúdo ao redor e reage a interações de toque e ponteiro. Abrange integração com SwiftUI, UIKit e WidgetKit.

Quando Ativar

• Ao construir ou atualizar aplicativos para iOS 26+ com a nova linguagem de design
• Ao implementar botões, cartões, barras de ferramentas ou contêineres no estilo vidro
• Ao criar transições de morfismo entre elementos de vidro
• Ao aplicar efeitos de Liquid Glass em widgets
• Ao migrar efeitos de desfoque/material existentes para a nova API Liquid Glass

Padrão Principal — SwiftUI

Efeito de Vidro Básico

A maneira mais simples de adicionar Liquid Glass a qualquer view:

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()  // Padrão: variante regular, formato cápsula

Personalizando Forma e Tonalidade

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))

Opções principais de personalização:

• .regular — efeito de vidro padrão
• .tint(Color) — adiciona tonalidade de cor para destaque
• .interactive() — reage a interações de toque e ponteiro
• Forma: .capsule (padrão), .rect(cornerRadius:), .circle

Estilos de Botão de Vidro

Button("Clique em Mim") { /* ação */ }
    .buttonStyle(.glass)

Button("Importante") { /* ação */ }
    .buttonStyle(.glassProminent)

GlassEffectContainer para Múltiplos Elementos

Sempre envolva múltiplas views de vidro em um contêiner para performance e morfismo:

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()
    }
}

O parâmetro spacing controla a distância de mesclagem — elementos mais próximos combinam suas formas de vidro.

Unindo Efeitos de Vidro

Combine várias views em uma única forma de vidro com glassEffectUnion:

@Namespace private var namespace

GlassEffectContainer(spacing: 20.0) {
    HStack(spacing: 20.0) {
        ForEach(symbolSet.indices, id: \.self) { item in
            Image(systemName: symbolSet[item])
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
        }
    }
}

Transições de Morfismo

Crie morfismo suave quando elementos de vidro aparecem/desaparecem:

@State private var isExpanded = false
@Namespace private var namespace

GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .glassEffect()
            .glassEffectID("pencil", in: namespace)

        if isExpanded {
            Image(systemName: "eraser.fill")
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectID("eraser", in: namespace)
        }
    }
}

Button("Alternar") {
    withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)

Estendendo Rolagem Horizontal Sob Barra Lateral

Para permitir que o conteúdo de rolagem horizontal se estenda sob uma barra lateral ou inspetor, certifique-se de que o conteúdo da ScrollView atinja as bordas iniciais/finais do contêiner. O sistema lida automaticamente com o comportamento de rolagem sob a barra lateral quando o layout se estende até as bordas — nenhum modificador adicional é necessário.

Padrão Principal — UIKit

UIGlassEffect Básico

let glassEffect = UIGlassEffect()
glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
glassEffect.isInteractive = true

let visualEffectView = UIVisualEffectView(effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.clipsToBounds = true

view.addSubview(visualEffectView)
NSLayoutConstraint.activate([
    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    visualEffectView.widthAnchor.constraint(equalToConstant: 200),
    visualEffectView.heightAnchor.constraint(equalToConstant: 120)
])

// Adicione conteúdo ao contentView
let label = UILabel()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])

UIGlassContainerEffect para Múltiplos Elementos

let containerEffect = UIGlassContainerEffect()
containerEffect.spacing = 40.0

let containerView = UIVisualEffectView(effect: containerEffect)

let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
let secondGlass = UIVisualEffectView(effect: UIGlassEffect())

containerView.contentView.addSubview(firstGlass)
containerView.contentView.addSubview(secondGlass)

Efeitos de Borda de Rolagem

scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true

Integração com Barra de Ferramentas de Vidro

let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
favoriteButton.hidesSharedBackground = true  // Opta por não usar o fundo de vidro compartilhado

Padrão Principal — WidgetKit

Detecção do Modo de Renderização

struct MyWidgetView: View {
    @Environment(\.widgetRenderingMode) var renderingMode

    var body: some View {
        if renderingMode == .accented {
            // Modo tonalizado: fundo de vidro com tema e tonalidade branca
        } else {
            // Modo de cor total: aparência padrão
        }
    }
}

Grupos de Acento para Hierarquia Visual

HStack {
    VStack(alignment: .leading) {
        Text("Título")
            .widgetAccentable()  // Grupo de acento
        Text("Subtítulo")
            // Grupo primário (padrão)
    }
    Image(systemName: "star.fill")
        .widgetAccentable()  // Grupo de acento
}

Renderização de Imagem no Modo Acentuado

Image("myImage")
    .widgetAccentedRenderingMode(.monochrome)

Fundo do Contêiner

VStack { /* conteúdo */ }
    .containerBackground(for: .widget) {
        Color.blue.opacity(0.2)
    }

Principais Decisões de Design

Decisão	Justificativa
Uso de GlassEffectContainer	Otimização de performance, permite morfismo entre elementos de vidro
Parâmetro spacing	Controla a distância de mesclagem — ajuste fino de quão próximos os elementos devem estar para se mesclarem
@Namespace + glassEffectID	Permite transições de morfismo suaves em mudanças na hierarquia de views
Modificador interactive()	Adesão explícita para reações a toque/ponteiro — nem todo vidro deve responder
UIGlassContainerEffect no UIKit	Mesmo padrão de contêiner que o SwiftUI para consistência
Modo de renderização acentuado em widgets	O sistema aplica vidro tonalizado quando o usuário seleciona a Tela Inicial tonalizada

Melhores Práticas

• Sempre use GlassEffectContainer ao aplicar vidro a várias views irmãs — isso permite morfismo e melhora a performance de renderização
• Aplique .glassEffect() após outros modificadores de aparência (frame, font, padding)
• Use .interactive() apenas em elementos que respondem à interação do usuário (botões, itens alternáveis)
• Escolha o espaçamento com cuidado em contêineres para controlar quando os efeitos de vidro se mesclam
• Use withAnimation ao alterar hierarquias de views para permitir transições de morfismo suaves
• Teste em diferentes aparências — modo claro, modo escuro e modos acentuados/tonalizados
• Garanta contraste de acessibilidade — o texto sobre vidro deve permanecer legível

Anti-Padrões a Evitar

• Usar várias views .glassEffect() independentes sem um GlassEffectContainer
• Aninhar muitos efeitos de vidro — degrada a performance e a clareza visual
• Aplicar vidro a todas as views — reserve para elementos interativos, barras de ferramentas e cartões
• Esquecer clipsToBounds = true no UIKit ao usar cantos arredondados
• Ignorar o modo de renderização acentuado em widgets — quebra a aparência da Tela Inicial tonalizada
• Usar fundos opacos atrás do vidro — anula o efeito de translucidez

Quando Usar

• Barras de navegação, barras de ferramentas e barras de abas com o novo design do iOS 26
• Botões de ação flutuante e contêineres no estilo cartão
• Controles interativos que precisam de profundidade visual e feedback tátil
• Widgets que devem se integrar à aparência Liquid Glass do sistema
• Transições de morfismo entre estados de UI relacionados