Create elegant and intuitive apps that integrate seamlessly with Apple platforms.

Posts under Design tag

154 Posts

Post

Replies

Boosts

Views

Activity

HotKey support for sandboxed apps
App design: macos, Xcode 16.4, Sequioa 15.5, it is sandboxed Uses: Pods->HotKey for a global hotkey which xcode says "binary compatibility can't be guaranteed" This app is on the Apple Store and supposedly apps on the Apple Store can't use global hotkeys. Someone internally, installed it from the store and the global hotkey works just fine. I'm concerned for two potential problems; I need to find a hotkey library or code that is known to work with a sandbox'd Apple Store app. Why is it working now when everything I have read says it shouldn't.
0
0
186
Jun ’25
New to macOS Development. How Do I Build a Timeline Editor UI Like Logic Pro?
Hi everyone, I’m new to macOS development and working on an app idea that needs a timeline-based editor interface, similar to what you see in Logic Pro or Final Cut. The UI I want to build would have: A horizontal beat ruler that follows BPM and shows beat positions Several vertical tracks stacked below it (for things like events or markers) Horizontal zooming and scrolling A preview panel on the right side that stays in sync with the timeline I’m currently trying this in SwiftUI, but I’m running into some limitations and wondering if AppKit would be a better fit, or maybe a hybrid of the two. My questions: Where should I start when building something like this? What’s the best way to make the beat ruler and all track layers scroll together? How should I handle zooming in/out and syncing the display to a BPM timeline? Is there a clean way to integrate AppKit for the timeline view while keeping SwiftUI elsewhere?
1
0
195
Jun ’25
Window Control Placement Notification in iPadOS 26
I’m seeing that in the windowed-apps multitasking mode, the new window controls (the three “traffic-light” icons) can overlap the top-left corner of my app’s main view. Detection: How can I programmatically determine whether these window controls will be displayed? Geometry: If they are displayed, how can I find out their exact position and size? I’d like to adjust my layout at runtime to ensure no content is hidden beneath those controls. For reference, my main view does not include a status bar or navigation bar at the top.
Topic: UI Frameworks SubTopic: UIKit Tags:
3
0
257
Jun ’25
Finder Quick Action icon rendering when using custom SF Symbol
Hey folks! I'm working on a macOS app which has a Finder Quick Action extension. It's all working fine, but I'm hitting a weird struggle with getting the icon rendering how I would like, and the docs haven't been able to help me. I want to re-use a custom SF Symbol from my app, so I've copied that from the main app's xcassets bundle to the one in the extension, and configured it for Template rendering. The icon renders in the right click menu in Finder, the Finder preview pane and the Extensions section of System Settings, but all of them render with the wrong colour in dark mode. In light mode they look fine, but in dark mode I would expect a templated icon to be rendered in white, not black. I've attached a variety of screenshots of the icons in the UI and how things are set up in Xcode (both for the symbol in the xcassets bundle, and the Info.plist) I tried reading the docs, searching Google, searching GitHub and even asking the dreaded AI, but it seems like there's not really very much information available about doing icons for Finder extensions, especially ones using a custom SF Symbol, so I would love to know if anyone here has been able to solve this in the past! Finder preview pane in light mode: Finder preview pane in dark mode: Finder quick action context menu: System Settings extension preferences: The custom symbol in my .xcassets bundle: The finder extension's Info.plist:
2
1
177
Jun ’25
Detect when tab bar minimizes (.tabBarMinimizeBehavior)
Hi! I'm working on a iOS 26 SwiftUI prototype that adds an element to the content of a screen only when the tab bar is fully visible and not minimized (via .tabBarMinimizeBehavior). Is there any way to detect when a tab bar is minimized? My hope is that I can use a ternary operator to display something only when a boolean is true. Here's some code to illustrate my idea: struct ContentView: View { @State var isTabBarMinimized: Bool = false var body: some View { TabView { Tab("View1", systemImage: "rainbow") { // Only appears when tab bar is fully visible Color.blue .opacity(isTabBarMinimized? 0 : 1 ) } Tab("View2", systemImage: "rainbow") { View2() } Tab("View3", systemImage: "rainbow") { View3() } Tab("View4", systemImage: "rainbow") { View4() } } .tabBarMinimizeBehavior(.onScrollDown) } }
1
0
249
Jun ’25
Icon Composer missing margins
I'm trying out Icon Composer Version 1.0 (27.4). I imported a simple logo and sized it in the outer circle. The icon appears good in the Icon Composer. But when I export the file and use it for my app icon it seems to be missing a margin or padding that other native application icons have. Am i supposed to be adding my own padding to these resulting icons or am I building them incorrectly? Any guidance would be appreciated. Thanks!
Topic: Design SubTopic: General Tags:
0
1
218
Jun ’25
Can't display image in SwiftUI
I'm trying to display my apps icon within my app and it's not working. It displays a blank space instead and I don't understand why this is happening. I tried creating a new image (just a normal image, not an 'App Icon' image set) and have this code: Image("AppIcon") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 48) .cornerRadius(10) .overlay( RoundedRectangle(cornerRadius: 10) .stroke(Color.black.opacity(0.1), lineWidth: 1) ) For some strange reason it's not displaying that either. The image name is correct. It's showing a blank white box.
2
0
363
Jun ’25
Best way to combine new tab bar with floating action button?
I have a floating action button in my app above a toolbar. The action button adds items to my app, so is pretty important and should be easy to reach. Now with the new liquid glass design, I wonder what the best way is to combine those two. Should I use .tabViewBottomAccessory() for that? Though, that will merge down on scroll. 🤔 Or can I replace the search button in the bottom right with my own custom button action?
1
0
246
Jun ’25
iOS 26/MacOS 26 - PWA App Icons: Dark,Clear,Tinted Appearance
Hi everyone, I'm exploring the new app icon appearance options (Clear, Dark, Tinted) for Progressive Web Apps (PWAs) on iOS26, iPadOS26, and macOS26. Currently, PWA icons don't seem to render well with these new appearances, particularly in Clear and Tinted modes, resulting in very very poor visual quality. You can hardly see anything. Has support for these icon appearances been fully implemented for PWAs? If so, could someone point me to the relevant Apple Developer documentation or provide guidance on how to configure PWA icons to support Clear, Dark, and Tinted appearances? I've searched the Apple Developer Forums, Stack Overflow, and Reddit but haven't found clear information on this topic.A possible solution is a png file with transparent areas, but if the pattern is dark, nothing will be visible in dark mode. Any insights or resources would be greatly appreciated. Thanks! (plz don't give up on PWA😭) Reference: https://developer.apple.com/forums/thread/761615 https://stackoverflow.com/questions/78780916/is-there-a-way-to-provide-light-dark-and-tinted-variants-of-apple-touch-icon https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
0
2
805
Jun ’25
iOS26 WWDC25 large inline navigation?
How to achieve the same navigation bar style as in the Design foundations from idea to interface - WWDC25 video? Screenshot: https://imgur.com/a/huzsm1H There's no new navigationBarTitleDisplayMode that has action buttons aligned with the title.
1
0
249
Jun ’25
AreaMark Always alignsMarkStylesWithPlotArea for linear gradients
I'm trying to make a Swift Chart where 24 AreaMarks an hour apart on X axis over a day display a vertical gradient. The gradient is vertical and is essentially [Color.opacity(0.1),Colour,Color.opacity(0.1] The idea here is where the upper and lower points of each AreaMark are the same or close to each other in the Y axis, the chart essentially displays a line, where they are far apart you get a nice fading vertical gradient. However, it seems that the .alignsMarkStylesWithPlotArea modifier is always set for AreaMarks even if manually applying it false. Investigating further, I've learnt that with AreaMarks in a series, Swift Charts seems to only listen to the first foreground style set in. I've created some sample code to demonstrate this. struct DemoChartView: View { var body: some View { Chart { AreaMark(x: .value("Time", Date().addingTimeInterval(0)), yStart: .value("1", 40), yEnd: .value("2", 60)) .foregroundStyle(LinearGradient(colors: [.pink, .teal], startPoint: .top, endPoint: .bottom)) .alignsMarkStylesWithPlotArea(false) AreaMark(x: .value("Time", Date().addingTimeInterval(3600)), yStart: .value("1", 44), yEnd: .value("2", 58)) .foregroundStyle(LinearGradient(colors: [.orange, .yellow], startPoint: .top, endPoint: .bottom)) .alignsMarkStylesWithPlotArea(false) AreaMark(x: .value("Time", Date().addingTimeInterval(03600*2)), yStart: .value("1", 50), yEnd: .value("2", 90)) .foregroundStyle(LinearGradient(colors: [.green, .blue], startPoint: .top, endPoint: .bottom)) .alignsMarkStylesWithPlotArea(false) } } } Which produces this: So here, all the different .foregroundStyle LinearGradients are being ignored AND the .alignsMarkStylesWithPlotArea(false) is also ignored - the amount of pink on the first mark is different to the second and third 🤷‍♂️ Has anyone encountered this. Are AreaMarks the correct choice or are they just not setup to create this type of data display. Thanks
3
0
1k
Jun ’25
How to achieve a pure backdrop blur effect without predefined tint color in SwiftUI / UIKit?
Hi everyone, I’m currently trying to create a pure backdrop blur effect in my iOS app (SwiftUI / UIKit), similar to the backdrop-filter: blur(20px) effect in CSS. My goal is simple: • Apply a Gaussian blur (radius ~20px) to the background content • Overlay a semi-transparent black layer (opacity 0.3) • Avoid any predefined color tint from UIBlurEffect or .ultraThinMaterial, etc. However, every method I’ve tried so far (e.g., .ultraThinMaterial, UIBlurEffect(style:)) always introduces a built-in tint, which makes the result look gray or washed out. Even when layering a black color with opacity 0.3 over .ultraThinMaterial, it doesn’t give the clean, transparent-black + blur look I want. What I’m looking for: • A clean 20px blur effect (like CIGaussianBlur) • No color shift/tint added by default • A layer of black at 30% opacity on top of the blur • Ideally works live (not a static snapshot blur) Has anyone achieved something like this in UIKit or SwiftUI? Would really appreciate any insights, workarounds, or libraries that can help. Thanks in advance! Ben
3
0
237
Jun ’25
HotKey support for sandboxed apps
App design: macos, Xcode 16.4, Sequioa 15.5, it is sandboxed Uses: Pods->HotKey for a global hotkey which xcode says "binary compatibility can't be guaranteed" This app is on the Apple Store and supposedly apps on the Apple Store can't use global hotkeys. Someone internally, installed it from the store and the global hotkey works just fine. I'm concerned for two potential problems; I need to find a hotkey library or code that is known to work with a sandbox'd Apple Store app. Why is it working now when everything I have read says it shouldn't.
Replies
0
Boosts
0
Views
186
Activity
Jun ’25
New to macOS Development. How Do I Build a Timeline Editor UI Like Logic Pro?
Hi everyone, I’m new to macOS development and working on an app idea that needs a timeline-based editor interface, similar to what you see in Logic Pro or Final Cut. The UI I want to build would have: A horizontal beat ruler that follows BPM and shows beat positions Several vertical tracks stacked below it (for things like events or markers) Horizontal zooming and scrolling A preview panel on the right side that stays in sync with the timeline I’m currently trying this in SwiftUI, but I’m running into some limitations and wondering if AppKit would be a better fit, or maybe a hybrid of the two. My questions: Where should I start when building something like this? What’s the best way to make the beat ruler and all track layers scroll together? How should I handle zooming in/out and syncing the display to a BPM timeline? Is there a clean way to integrate AppKit for the timeline view while keeping SwiftUI elsewhere?
Replies
1
Boosts
0
Views
195
Activity
Jun ’25
Window Control Placement Notification in iPadOS 26
I’m seeing that in the windowed-apps multitasking mode, the new window controls (the three “traffic-light” icons) can overlap the top-left corner of my app’s main view. Detection: How can I programmatically determine whether these window controls will be displayed? Geometry: If they are displayed, how can I find out their exact position and size? I’d like to adjust my layout at runtime to ensure no content is hidden beneath those controls. For reference, my main view does not include a status bar or navigation bar at the top.
Topic: UI Frameworks SubTopic: UIKit Tags:
Replies
3
Boosts
0
Views
257
Activity
Jun ’25
Finder Quick Action icon rendering when using custom SF Symbol
Hey folks! I'm working on a macOS app which has a Finder Quick Action extension. It's all working fine, but I'm hitting a weird struggle with getting the icon rendering how I would like, and the docs haven't been able to help me. I want to re-use a custom SF Symbol from my app, so I've copied that from the main app's xcassets bundle to the one in the extension, and configured it for Template rendering. The icon renders in the right click menu in Finder, the Finder preview pane and the Extensions section of System Settings, but all of them render with the wrong colour in dark mode. In light mode they look fine, but in dark mode I would expect a templated icon to be rendered in white, not black. I've attached a variety of screenshots of the icons in the UI and how things are set up in Xcode (both for the symbol in the xcassets bundle, and the Info.plist) I tried reading the docs, searching Google, searching GitHub and even asking the dreaded AI, but it seems like there's not really very much information available about doing icons for Finder extensions, especially ones using a custom SF Symbol, so I would love to know if anyone here has been able to solve this in the past! Finder preview pane in light mode: Finder preview pane in dark mode: Finder quick action context menu: System Settings extension preferences: The custom symbol in my .xcassets bundle: The finder extension's Info.plist:
Replies
2
Boosts
1
Views
177
Activity
Jun ’25
Detect when tab bar minimizes (.tabBarMinimizeBehavior)
Hi! I'm working on a iOS 26 SwiftUI prototype that adds an element to the content of a screen only when the tab bar is fully visible and not minimized (via .tabBarMinimizeBehavior). Is there any way to detect when a tab bar is minimized? My hope is that I can use a ternary operator to display something only when a boolean is true. Here's some code to illustrate my idea: struct ContentView: View { @State var isTabBarMinimized: Bool = false var body: some View { TabView { Tab("View1", systemImage: "rainbow") { // Only appears when tab bar is fully visible Color.blue .opacity(isTabBarMinimized? 0 : 1 ) } Tab("View2", systemImage: "rainbow") { View2() } Tab("View3", systemImage: "rainbow") { View3() } Tab("View4", systemImage: "rainbow") { View4() } } .tabBarMinimizeBehavior(.onScrollDown) } }
Replies
1
Boosts
0
Views
249
Activity
Jun ’25
Icon Composer missing margins
I'm trying out Icon Composer Version 1.0 (27.4). I imported a simple logo and sized it in the outer circle. The icon appears good in the Icon Composer. But when I export the file and use it for my app icon it seems to be missing a margin or padding that other native application icons have. Am i supposed to be adding my own padding to these resulting icons or am I building them incorrectly? Any guidance would be appreciated. Thanks!
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
1
Views
218
Activity
Jun ’25
Can't display image in SwiftUI
I'm trying to display my apps icon within my app and it's not working. It displays a blank space instead and I don't understand why this is happening. I tried creating a new image (just a normal image, not an 'App Icon' image set) and have this code: Image("AppIcon") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 48) .cornerRadius(10) .overlay( RoundedRectangle(cornerRadius: 10) .stroke(Color.black.opacity(0.1), lineWidth: 1) ) For some strange reason it's not displaying that either. The image name is correct. It's showing a blank white box.
Replies
2
Boosts
0
Views
363
Activity
Jun ’25
Attribute Inspector
Maybe it's just me but I can't find the attribute inspector anywhere. I have clicked, searched and tried everything I can think of. I love the new Xcode, but this has me dumbfounded.
Replies
3
Boosts
0
Views
452
Activity
Jun ’25
Best way to combine new tab bar with floating action button?
I have a floating action button in my app above a toolbar. The action button adds items to my app, so is pretty important and should be easy to reach. Now with the new liquid glass design, I wonder what the best way is to combine those two. Should I use .tabViewBottomAccessory() for that? Though, that will merge down on scroll. 🤔 Or can I replace the search button in the bottom right with my own custom button action?
Replies
1
Boosts
0
Views
246
Activity
Jun ’25
Liquid Glass toolbar/buttons effect like WWDC25 shows
How can I achieve the result of buttons glass effect like sample videos that was show at de WWDC25? I tried a lot of approaches and I still far a way from the video. I would like something like the pictures attached. Could send a sample code the get the same result? Thanks
Replies
3
Boosts
1
Views
517
Activity
Jun ’25
iOS 26/MacOS 26 - PWA App Icons: Dark,Clear,Tinted Appearance
Hi everyone, I'm exploring the new app icon appearance options (Clear, Dark, Tinted) for Progressive Web Apps (PWAs) on iOS26, iPadOS26, and macOS26. Currently, PWA icons don't seem to render well with these new appearances, particularly in Clear and Tinted modes, resulting in very very poor visual quality. You can hardly see anything. Has support for these icon appearances been fully implemented for PWAs? If so, could someone point me to the relevant Apple Developer documentation or provide guidance on how to configure PWA icons to support Clear, Dark, and Tinted appearances? I've searched the Apple Developer Forums, Stack Overflow, and Reddit but haven't found clear information on this topic.A possible solution is a png file with transparent areas, but if the pattern is dark, nothing will be visible in dark mode. Any insights or resources would be greatly appreciated. Thanks! (plz don't give up on PWA😭) Reference: https://developer.apple.com/forums/thread/761615 https://stackoverflow.com/questions/78780916/is-there-a-way-to-provide-light-dark-and-tinted-variants-of-apple-touch-icon https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
Replies
0
Boosts
2
Views
805
Activity
Jun ’25
iOS26 WWDC25 large inline navigation?
How to achieve the same navigation bar style as in the Design foundations from idea to interface - WWDC25 video? Screenshot: https://imgur.com/a/huzsm1H There's no new navigationBarTitleDisplayMode that has action buttons aligned with the title.
Replies
1
Boosts
0
Views
249
Activity
Jun ’25
AreaMark Always alignsMarkStylesWithPlotArea for linear gradients
I'm trying to make a Swift Chart where 24 AreaMarks an hour apart on X axis over a day display a vertical gradient. The gradient is vertical and is essentially [Color.opacity(0.1),Colour,Color.opacity(0.1] The idea here is where the upper and lower points of each AreaMark are the same or close to each other in the Y axis, the chart essentially displays a line, where they are far apart you get a nice fading vertical gradient. However, it seems that the .alignsMarkStylesWithPlotArea modifier is always set for AreaMarks even if manually applying it false. Investigating further, I've learnt that with AreaMarks in a series, Swift Charts seems to only listen to the first foreground style set in. I've created some sample code to demonstrate this. struct DemoChartView: View { var body: some View { Chart { AreaMark(x: .value("Time", Date().addingTimeInterval(0)), yStart: .value("1", 40), yEnd: .value("2", 60)) .foregroundStyle(LinearGradient(colors: [.pink, .teal], startPoint: .top, endPoint: .bottom)) .alignsMarkStylesWithPlotArea(false) AreaMark(x: .value("Time", Date().addingTimeInterval(3600)), yStart: .value("1", 44), yEnd: .value("2", 58)) .foregroundStyle(LinearGradient(colors: [.orange, .yellow], startPoint: .top, endPoint: .bottom)) .alignsMarkStylesWithPlotArea(false) AreaMark(x: .value("Time", Date().addingTimeInterval(03600*2)), yStart: .value("1", 50), yEnd: .value("2", 90)) .foregroundStyle(LinearGradient(colors: [.green, .blue], startPoint: .top, endPoint: .bottom)) .alignsMarkStylesWithPlotArea(false) } } } Which produces this: So here, all the different .foregroundStyle LinearGradients are being ignored AND the .alignsMarkStylesWithPlotArea(false) is also ignored - the amount of pink on the first mark is different to the second and third 🤷‍♂️ Has anyone encountered this. Are AreaMarks the correct choice or are they just not setup to create this type of data display. Thanks
Replies
3
Boosts
0
Views
1k
Activity
Jun ’25
How to achieve a pure backdrop blur effect without predefined tint color in SwiftUI / UIKit?
Hi everyone, I’m currently trying to create a pure backdrop blur effect in my iOS app (SwiftUI / UIKit), similar to the backdrop-filter: blur(20px) effect in CSS. My goal is simple: • Apply a Gaussian blur (radius ~20px) to the background content • Overlay a semi-transparent black layer (opacity 0.3) • Avoid any predefined color tint from UIBlurEffect or .ultraThinMaterial, etc. However, every method I’ve tried so far (e.g., .ultraThinMaterial, UIBlurEffect(style:)) always introduces a built-in tint, which makes the result look gray or washed out. Even when layering a black color with opacity 0.3 over .ultraThinMaterial, it doesn’t give the clean, transparent-black + blur look I want. What I’m looking for: • A clean 20px blur effect (like CIGaussianBlur) • No color shift/tint added by default • A layer of black at 30% opacity on top of the blur • Ideally works live (not a static snapshot blur) Has anyone achieved something like this in UIKit or SwiftUI? Would really appreciate any insights, workarounds, or libraries that can help. Thanks in advance! Ben
Replies
3
Boosts
0
Views
237
Activity
Jun ’25