-
Crie um app do AppKit com o novo design
Atualize seu app do AppKit para aproveitar ao máximo o novo sistema de design. Vamos nos aprofundar nas principais mudanças nas visualizações em abas, Split Views, barras, apresentações, busca e controles e mostrar como usar o Liquid Glass em sua interface de usuário personalizada. Para aproveitar ao máximo este vídeo, recomendamos assistir primeiro à sessão “Conheça o novo sistema de design" para obter orientações gerais sobre design.
Capítulos
- 0:00 - Introdução
- 1:23 - Estrutura do app
- 9:27 - Efeito de borda de rolagem
- 11:10 - Controles
- 17:30 - Liquid Glass
- 21:30 - Próximas etapas
Recursos
Vídeos relacionados
WWDC25
-
Buscar neste vídeo...
-
-
3:11 - Removing toolbar item glass
// Removing toolbar item glass toolbarItem.isBordered = false -
3:30 - Tinted toolbar controls
// Tints the glass with the accent color. toolbarItem.style = .prominent // Tints the glass with a specific color. toolbarItem.backgroundTintColor = .systemGreen -
3:58 - Toolbar badges
// Numeric badge NSItemBadge.count(4) // Text badge NSItemBadge.text("New") // Badge indicator NSItemBadge.indicator -
5:25 - Content under the sidebar
// Content under the sidebar splitViewItem.automaticallyAdjustsSafeAreaInsets = true -
8:47 - Avoiding a window corner
// Avoiding a window corner func updateConstraints() { guard !installedButtonConstraints else { return } let safeArea = layoutGuide(for: .safeArea(cornerAdaptation: .horizontal)) NSLayoutConstraint.activate([ safeArea.leadingAnchor.constraint(equalTo: button.leadingAnchor), safeArea.trailingAnchor.constraint(greaterThanOrEqualTo: button.trailingAnchor), safeArea.bottomAnchor.constraint(equalTo: button.bottomAnchor) ]) installedButtonConstraints = true } -
15:31 - Levels of prominence
// Create buttons with varying levels of prominence // Prefer a “secondary” tinted appearance for the shuffle and enqueue buttons shuffleButton.tintProminence = .secondary playNextButton.tintProminence = .secondary // The "play" will automatically use primary prominence because it is the default button playButton.keyEquivalent = "\r" -
18:42 - Adopting NSGlassEffectView
// Adopting NSGlassEffectView let userInfoView = UserInfoView() let activityPickerView = ActivityPickerView() let userInfoGlass = NSGlassEffectView() userInfoGlass.contentView = userInfoView let activityPickerGlass = NSGlassEffectView() activityPickerGlass.contentView = activityPickerView let stack = NSStackView(views: [userInfoGlass, activityPickerGlass]) stack.orientation = .horizontal -
21:03 - Adopting NSGlassEffectContainerView
// Adopting NSGlassEffectContainerView let userInfoView = UserInfoView() let activityPickerView = ActivityPickerView() let userInfoGlass = NSGlassEffectView() userInfoGlass.contentView = userInfoView userInfoGlass.cornerRadius = 999 let activityPickerGlass = NSGlassEffectView() activityPickerGlass.contentView = activityPickerView activityPickerGlass.cornerRadius = 999 let stack = NSStackView(views: [userInfoGlass, activityPickerGlass]) stack.orientation = .horizontal let glassContainer = NSGlassEffectContainerView() glassContainer.contentView = stack
-
-
- 0:00 - Introdução
Saiba mais sobre o sistema de design atualizado para o macOS. O novo design apresenta o Liquid Glass, uma superfície translúcida que adiciona profundidade e dinamismo à interface. O AppKit foi atualizado para aceitar esse novo design, incluindo alterações nos componentes, um efeito de borda de rolagem para melhorar a legibilidade e atualizações na aparência e no layout dos controles. Saiba como implementar essas mudanças e utilizar novas APIs para incorporar o Liquid Glass aos seus elementos de interface.
- 1:23 - Estrutura do app
O sistema de design do Mac apresenta o Liquid Glass para barras de ferramentas e laterais, aprimorando a hierarquia e o apelo visual. Os elementos da barra de ferramentas são agrupados no Liquid Glass, que adapta sua aparência com base no brilho do conteúdo. A barra de ferramentas pode ser personalizada. As barras laterais aparecem como painéis de vidro flutuantes, e os inspetores usam vidro. O sistema de design enfatiza a concentricidade, com raios de canto de janela suaves que variam conforme o estilo. Para posicionar o conteúdo próximo aos cantos, a API 'NSView.LayoutRegion' oferece guias de layout que evitam os cantos, garantindo uma interface refinada e elegante.
- 9:27 - Efeito de borda de rolagem
O novo design apresenta o efeito de borda de rolagem, uma separação visual entre o conteúdo e os elementos flutuantes do Liquid Glass. "Esse efeito se manifesta como um esmaecimento ou um fundo opaco e se adapta dentro do 'NSScrollView' à medida que os elementos flutuantes mudam. O efeito é aplicado embaixo dos itens da barra de ferramentas, da barra de título e de novos acessórios de divisão, que ocupam uma parte da Split View e podem ser colocados no topo ou na parte de baixo. Esses acessórios influenciam o tamanho e a forma do efeito, ajustando a área segura do conteúdo para um layout mais fácil.
- 11:10 - Controles
No macOS Tahoe, o sistema de design foi atualizado para aumentar a consistência entre os dispositivos da Apple. O novo sistema tem botões extragrandes para destacar as ações principais e botões um pouco mais altos em outros tamanhos para facilitar a leitura. Os botões mudam de formato conforme o tamanho: os pequenos são retângulos arredondados e os maiores parecem cápsulas. Você pode personalizar as formas dos controles, materiais e destaque utilizando as novas APIs. A propriedade de destaque de tonalidade permite que os controles tenham diferentes níveis de peso visual, facilitando a distinção entre diferentes ações. Os controles atualizados permitem fixar preenchimento em qualquer ponto e utilizar destaque de cor. Os menus foram renovados com uma aparência mais moderna e apresentam ícones em uma única coluna, facilitando a leitura e a navegação.
- 17:30 - Liquid Glass
Para integrar elementos Liquid Glass ao app, considere a intenção de design e limite seu uso aos controles mais importantes que flutuam no nível superior da hierarquia da interface. A API 'NSGlassEffectView' oferece funcionalidade para colocar conteúdo sobre vidro, e você pode personalizar sua aparência com propriedades de raio de canto e cor de tonalidade. Quando várias formas de vidro estiverem próximas, agrupe-as usando 'NSGlassEffectContainerView' para garantir efeitos visuais fluidos, aparência uniforme e amostragem consistente.
- 21:30 - Próximas etapas
Para aproveitar os recursos de design mais recentes, crie seus apps com o Xcode 26. Isso permite usar conteúdos de ponta a ponta, com a barra de ferramentas e a barra lateral flutuantes. Melhore as ações dos menus com ícones de símbolos e incorporando o Liquid Glass para elementos da interface, modernizando a aparência do app.