I've been trying to set up liquid glass effect like on screenshot below and can't figure out how to do it. Tried official documentation methods even with .glassEffect(.clear)
but got nothing.
-> swift --version
swift-driver version: 1.127.14.1 Apple Swift version 6.2 (swiftlang-6.2.0.19.9 clang-1700年3月19日.1)
Target: arm64-apple-macosx26.0
-> sw_vers
ProductName: macOS
ProductVersion: 26.0.1
BuildVersion: 25A362
I'm using AppKit to set up my window and NSHostingView
to host SwiftUI.
Here's the code.
window setup:
@MainActor
private func setupWindow() {
let barHeight: CGFloat = 35
let barHorizontalCut: CGFloat = 10
let barVerticalCut: CGFloat = 2
guard let mainScreen = NSScreen.main else { return }
let screenFrame = mainScreen.frame
let frame = NSRect(
x: barHorizontalCut,
y: screenFrame.height - barHeight - barVerticalCut,
width: screenFrame.width - barHorizontalCut * 2,
height: barHeight - barVerticalCut
)
window = BarWindow(
contentRect: frame,
styleMask: [.borderless],
backing: .buffered,
defer: false
)
window.isOpaque = false
window.backgroundColor = .clear
window.level = NSWindow.Level(rawValue: NSWindow.Level.statusBar.rawValue - 1)
window.ignoresMouseEvents = false
window.collectionBehavior = [.canJoinAllSpaces, .stationary, .ignoresCycle]
window.hasShadow = false
window.orderBack(nil)
let container = NSView(frame: frame)
container.wantsLayer = true
container.layer?.backgroundColor = .clear
// ensure container's layer is not opaque so alpha can show through
container.layer?.isOpaque = false
container.layer?.cornerRadius = 16
container.layer?.masksToBounds = true
// Host a SwiftUI view inside AppKit
let hostingView = NSHostingView(rootView: BarContentView()
.frame(maxWidth: .infinity, maxHeight: .infinity))
hostingView.translatesAutoresizingMaskIntoConstraints = false
container.addSubview(hostingView)
// Constrain hosting view to container
NSLayoutConstraint.activate([
hostingView.leadingAnchor.constraint(equalTo: container.leadingAnchor),
hostingView.trailingAnchor.constraint(equalTo: container.trailingAnchor),
hostingView.topAnchor.constraint(equalTo: container.topAnchor),
hostingView.bottomAnchor.constraint(equalTo: container.bottomAnchor)
])
window.contentView = container
window.makeKeyAndOrderFront(nil)
}
widget setup:
// deleted unnecessary code
HStack(spacing: 0) {
HStack(spacing: 8) {
timeButton(width: timeButtonWidth, height: widgetHeight, cornerRadius: cornerRadius)
}
}
}
func timeButton(width: CGFloat, height: CGFloat, cornerRadius: CGFloat) -> some View {
TimelineView(.periodic(from: .now, by: 1.0)) { timeline in
Button(action: {
let url = URL(fileURLWithPath: "/System/Applications/Calendar.app")
NSWorkspace.shared.open(url)
}) {
HStack(spacing: 4) {
Image(systemName: "calendar")
.foregroundColor(.white)
.background(.clear)
.font(.system(size: 12))
Text(timeline.date.formatted(date: .abbreviated, time: .standard))
.foregroundColor(.white)
.background(.clear)
.font(.system(size: 12))
}
.frame(width: width, height: height)
.glassEffect(.clear)
}
.frame(width: width, height: height)
.cornerRadius(cornerRadius)
}
}
New contributor
Vietnam Veteran is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
lang-swift