Explore the various UI frameworks available for building app interfaces. Discuss the use cases for different frameworks, share best practices, and get help with specific framework-related questions.

All subtopics
Posts under UI Frameworks topic

Post

Replies

Boosts

Views

Activity

`ContextMenu` and `Menu` Item Layout: Icon/Title Order Discrepancy Between System and Custom Apps (iOS 26)
I've observed a difference in the layout of menu items within ContextMenu and Menu when comparing system applications to my own SwiftUI app, specifically concerning the order of icons and titles. On iOS 26, system apps (as shown in the image in the "System App" column) appear to display the item's icon before its title for certain menu items. However, in my SwiftUI app, when I use a Label (e.g. Label("Paste", systemImage: "doc.on.clipboard")) or an HStack containing an Image and Text, the icon consistently appears after the title within both ContextMenu and Menu items. I'm aiming to achieve the "icon first, then title" layout as seen in system apps. My attempts to arrange this order using HStack directly within the Button's label closure: Menu { Button { /* ... */ } label: { HStack { Image(systemName: "doc.on.clipboard") Text(String(localized: "Paste")) } } // ... } label: { Text("タップミー") } seem to be overridden or restricted by the OS, which forces the icon to the leading position (as shown in the image in the "Custom App" column). System App Custom App Is there a specific SwiftUI modifier, or any other setting I might have overlooked that allows developers to control the icon/title order within ContextMenu or Menu items to match the system's behavior? Or is this a system-controlled layout that app developers currently cannot customize, and we need to wait for potential changes from Apple to expose this capability for in-app menus? Thanks in advance!
1
0
133
1w
Buttons in the bottom bar of an inspector appear disabled
Buttons placed in the bottomBar and keyboard toolbar item positions in an inspector appear disabled/grayed out when at the large presentation detent. The same is not true for sheets. Is this intentional or a bug? If intentional, is there any backing design theory in the Human Interface Guidelines for it? Xcode 16.4 / 18.5 simulator // Inspector @ large detent struct ContentView: View { var body: some View { Color.clear .inspector(isPresented: .constant(true)) { Color.clear .presentationDetents([.large]) .toolbar { ToolbarItem(placement: .bottomBar) { Button("Save") {} .border(.red) } } } } } // Sheet struct ContentView: View { var body: some View { Color.clear .sheet(isPresented: .constant(true)) { Color.clear .presentationDetents([.medium]) .toolbar { ToolbarItem(placement: .bottomBar) { Button("Save") {} .border(.red) } } } } }
0
0
106
1w
Interrupting a custom view controller presentation transition results in sudden disappearance
I’ve implemented a basic custom view controller presentation: the presented view controller slides up from the bottom in a manner similar to UISheetPresentationController, and can be dismissed by tapping the dimming view added on top of the presenting view controller. I want my custom presentation to be interruptible, so the user should be able to tap the dimming view while the presentation transition is in progress to smoothly convert the presentation transition into a dismissal transition. I’m using additive spring animations (by virtue of UIViewPropertyAnimator) here to make the change in direction less jarring. Unfortunately, it seems that the interruption-triggered dismissal transition is abruptly terminated by the system based on some kind of timer. The later in the presentation transition I tap the dimming view, the earlier the dismissal transition is terminated. Steps to reproduce After launching the test project: Tap the “Present” button. Tap the dimming view just before the transition completes. The test project includes a screen recording of the broken behavior.
Topic: UI Frameworks SubTopic: UIKit Tags:
0
0
97
1w
iPadOS: New system Menu hijacks "Open" command and I can not override it.
In my app, I had an '.commands' region that provided an "Open File" shortcut, bound to Command-o. My app manages multiple files, so this triggers my own file picker and opens the file. With iOS 2026, the system will not let me use this command, as the system is adding its own handler 'Open...' bound to the same shortcut, and with a target action called open:. My app also relies on LSSupportsOpeningDocumentsInPlace, which I believe is what triggers this behavior. Attempts to override it produce errors like this: Replacement elements conflict with existing elements: Keyboard Shortcut (duplicate modifierFlags: command, input: O): - Existing keyboard shortcut: <UIKeyCommand: 0x107cf4620> -> Title: Open... Action: open: Input: o + (UIKeyModifierCommand) - Conflicting keyboard shortcut: <UIKeyCommand: 0x107cf56c0> -> Title: Open Action: _performMainMenuShortcutKeyCommand: Input: o + (UIKeyModifierCommand) Ensure all keyboard shortcuts are unique to avoid undefined behavior. Mine is the open without the ellipsis. I would be happy if I could provide my own implementation of 'Open' and let SwiftUI call it, but I have not found any documentation for how to do this. I managed to override the buildMenu on the AppDelegate class, and while this removes the system version of 'open' SwiftUI is still going behind my back and disabling the menu entry (I suspect it is looking up the command by shortcut/modifier). So the closest I could do is to remove the system open menu with the buildMenu override, and then provide my own command with a different keyboard modifier (Control-o, instead of Command-o, which is ugly as hell, as everything else uses Command-Letter). Any guidance would be appreciated.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
104
1w
sheetPresentationController and iOS 26 Beta
I my App I use the sheetPresentationController to get a sheet that sits on top of the main view (a Map) and that can be slided up and down, similar to the Maps or FindMy Apps. This works great with iOS 18 and older. But under iOS 26 Beta I see issues, especially on the iPad. When the window is small (iPhone or compact size class on iPad), changing the height of the sheet works as expected, the sheet window is attached to the bottom of the screen and I can slide it up and down. But when the App window is wider (regular size class on the iPad), the sheet is shown at the left (as expected), but it is no longer attached to the bottom of the screen, there's a very large (but constant) gap between the bottom of the App window and the bottom of the sheet. I haven't found a way to minimize the gap, the sheet window seems to totally ignore the vertical position and size of the "sourceView" to which the sheet should be attached to (it still evaluates the horizontal position, so I can move the sheet to the right, but the vertical position can't be controlled anymore). The Maps App or FindMy Apps do not show this issue, also iOS 18 and older do not show this issue. Is this normal or can I do something to prevent this? The sheet should always be positioned to the bottom left corner of the App window, Another problem is the window background with a UIGlassContainer effect. In the Apple Maps App the sheet looses its glass effect transparency under iOS 26 when the sheet is fully expanded. The FindMy does not have this issue, here the glass effect/transparency is always present. In my App the background shows the glass effect when the window is not fully expanded when the overall App window is above a certain height (like the Apple Maps App), but when the App window is below a certain height then it is the opposite way: fully expanded it shows the glass effect and at smaller heights it is opaque. Why is this the case? How can I get the behavior of the FindMy App where the sheet window keeps its transparent glass effect in all cases? I do not want to have it changing its appearance depending of the height of the sheet. I can "solve" some of the issues when presenting the "sheet" as popover (via popoverPresentationController) and from within the popoverPresentationController use the adaptiveSheetPresentationController property to get the UISheetPresentationController (instead of directly using the sheetPresentationController property). In small App windows (iPhone or compact size class) it works exactly as when directly using sheetPresentationController. With larger App windows (iPad and regular size class) the sheet will be attached to the bottom of the App window (as expected) and the glass effect is always present. However in this case the detents which define the allowed heights of the sheet window will be always ignored, the window seems to have always the maximum height (minus some safe areas), Even when using the preferredContentSize property to set the size, only the width is respected, but never the height. Is there any way to get this working? Is this supposed to work this way or is this still a beta issue?
0
0
110
1w
iOS 26 Beta 3 `safeAreaInsets`
I noticed that trying to access safeAreaInsets from the active window causes an infinite run loop. This issue appeared after updating to Beta 3. Here’s an example of the code: extension UIDevice { var safeAreaInsets: UIEdgeInsets { guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene, let window = windowScene.windows.first(where: { $0.isKeyWindow }) else { return .zero } return window.safeAreaInsets } } The return doesn’t happen because it ends up in some kind of recursion.
2
0
202
1w
Documentation for UIListContentConfiguration is incomplete in UIKit
The documentation for UIListContentConfiguration states that I can get the default content configuration of a UICollectionViewCell by getting the cells default content configuration. In practice, however, this presents an error in the compiler: let choiceRegistration = UICollectionView.CellRegistration<UICollectionViewCell, SurveyItem> { cell, indexPath, item in cell.configurationUpdateHandler = { cell, state in switch item.type { case .choice(let letter, let text): cell.defaultContentConfiguration() ... } The error shown when calling cell.defaultContentConfiguration() is Value of type 'UICollectionViewCell' has no member 'defaultContentConfiguration'. Instead, I need to initialise a content configuration using UIListContentConfiguration.cell() to get the default content configuration. This needs to be reflected in the documentation in UIKit.
Topic: UI Frameworks SubTopic: UIKit Tags:
4
0
87
1w
CanvasView overlay on PDFKit loses quality when zoomed – how to preserve drawing resolution?
Hi all, I’m currently building a SwiftUI app that overlays a PKCanvasView onto each page of a PDFView using PDFPageOverlayViewProvider. It works well at the initial scale, but once I zoom into the PDF, the drawings on the PKCanvasView appear blurry or pixelated, even though the PDF itself remains crisp. I’m trying to adjust canvasView.contentScaleFactor relative to pdfView.scaleFactor to preserve the drawing quality. Here’s a simplified version of the relevant code: import SwiftUI import PDFKit import PencilKit struct ContentView: View { var body: some View { if let url = Bundle.main.url(forResource: "sample", withExtension: "pdf"), let data = try? Data(contentsOf: url), let document = PDFDocument(data: data) { PDFRepresentableView(document: document) } else { Text("") } } } #Preview { ContentView() } struct PDFRepresentableView: UIViewRepresentable { let document: PDFDocument let pdfView = PDFView() func makeUIView(context: Context) -> PDFView { pdfView.displayMode = .singlePageContinuous pdfView.usePageViewController(false) pdfView.displayDirection = .vertical pdfView.pageOverlayViewProvider = context.coordinator pdfView.document = document pdfView.autoScales = false pdfView.minScaleFactor = 0.7 pdfView.maxScaleFactor = 4 NotificationCenter.default.addObserver( context.coordinator, selector: #selector(context.coordinator.onPageZoomAndPan), name: .PDFViewScaleChanged, object: pdfView ) return pdfView } func updateUIView(_ uiView: PDFView, context: Context) { // Optional: update logic if needed } func makeCoordinator() -> CustomCoordinator { return CustomCoordinator(parent: self) } } class CustomCoordinator: NSObject, PDFPageOverlayViewProvider, PKCanvasViewDelegate { let parent: PDFRepresentableView init(parent: PDFRepresentableView) { self.parent = parent } func pdfView(_ view: PDFView, overlayViewFor page: PDFPage) -> UIView? { let canvasView = PKCanvasView() let rect = page.bounds(for: .mediaBox) canvasView.drawingPolicy = .anyInput canvasView.tool = PKInkingTool(.pen, color: .black, width: 10) canvasView.translatesAutoresizingMaskIntoConstraints = true canvasView.backgroundColor = .red.withAlphaComponent(0.1) canvasView.frame = rect canvasView.isScrollEnabled = false for subView in view.documentView?.subviews ?? [] { subView.isUserInteractionEnabled = true } return canvasView } @objc func onPageZoomAndPan() { parent.pdfView.documentView?.subviews.forEach { subview in if subview.theClassName == "PDFPageView", let pageViewPrivate = subview.value(forKey: "_private") as? NSObject, let page = pageViewPrivate.value(forKey: "page") as? PDFPage { subview.subviews.forEach { subview in if let canvasView = subview as? PKCanvasView { let zoomScale = parent.pdfView.scaleFactor canvasView.contentScaleFactor = UIScreen.main.scale * zoomScale canvasView.drawing = canvasView.drawing canvasView.setNeedsDisplay() canvasView.layoutIfNeeded() } } } } print("Zoom changed. Current scale: \(parent.pdfView.scaleFactor)") } } extension NSObject { var theClassName: String { return NSStringFromClass(type(of: self)) } } But this doesn’t seem to improve the rendered quality. The lines still appear blurry when zoomed in. What I’ve tried: • Adjusting contentScaleFactor and forcing redraw • Reassigning canvasView.drawing • Calling setNeedsDisplay() and layoutIfNeeded() None of these approaches seem to re-render the canvas at a higher resolution or match the zoomed scale of the PDF. My questions: 1. Is there a correct way to scale PKCanvasView content to match PDF zoom levels? 2. Should I recreate the canvas or drawing when zoom changes? 3. Is PKCanvasView just not intended to handle high zoom fidelity? If anyone has successfully overlaid high-resolution canvas drawing on a zoomable PDFView, I’d love to hear how you managed it. Thanks in advance!
0
0
69
1w
App is crashing on iPad after upgrading to iOS 26 when we push from one screen to another with data using segue but working fine on iPhone
Error: Fatal error: init(coder:) has not been implemented File: UIKitCore/UICoreHostingView.swift:54 Stack Trace Snippet: swift Copy Edit UIKitCore/UICoreHostingView.swift:54: Fatal error: init(coder:) has not been implemented Can't show file for stack frame: &lt;DBGLldbStackFrame: 0x10ca74560&gt; - stackNumber: 23 name: @objc ThemeableViewController.init(coder:). The file path does not exist on the file system: /
1
0
152
1w
How to check if my app is set as default calling app?
My app support ringout feature, when set Ringout, all the calls in my app will go to native, by using tel://xxx. But when my app set as the default calling app by the user. Then when user make a call from Contact, it will jump to my app, but app will will route this call to native. So there is a issue for this, then the quesion is: How to check if my app is set as default calling app?
Topic: UI Frameworks SubTopic: UIKit Tags:
0
0
59
1w
addSubview with bounds not working
I'm using Swift to display some text in the middle of the screen, but I'm doing this programmatically instead of using the layout designer. So I'm starting with my version of a UILabel: class GenericLabel: UILabel I'm then creating one of these objects: let label = GenericLabel(frame: CGRect.zero) label.processResponse(componentDictionary ) view.addSubview(label) The processResponse function will set the text value, the font, fontsize, and set the bounds for where the text should be displayed on the screen. Currently I'm just wanting to position the text in the centre of the screen. During this process I send some messages to the console, like my calculation of the width and height and the bounds value. The console includes this: GenericLabel: default = centrex and centrey Utils:setSize: parent view bounds = (0.0, 0.0, 402.0, 874.0) Utils:setSize: obj size = (85.33333333333333, 20.333333333333332) Utils.setSize: centrey myframe.origin.y = 426.8333333333333 Utils.setSize: centrex myframe.origin.x = 158.33333333333334 Utils:setSize: myframe is now set to = (158.33333333333334, 426.8333333333333, 85.33333333333333, 20.333333333333332) self.frame set to (158.33333333333334, 426.8333333333333, 85.33333333333333, 20.333333333333332) Finally I set this frame to my GenericLabel self.frame = Utils.setSize(["centrex":0, "centrey":0], for: self) // You can see this message in the console above print("self.frame set to \(self.frame)") Unfortunately the text appears at (0,0) as in this screenshot. Why is the frame not working? Is there some setting overriding the frame?
2
0
92
1w
Using NavigationSplitView with NavigationStack in it with variable navigation depth (2 and 3 levels) — unexpected back navigation on iPhone
I’m building a cross-platform app targeting macOS, iPad, and iPhone. My app currently uses both 2-level and 3-level navigation workflows: 3-level navigation: First level: Categories Second level: List of items in the selected category Third level: Detail view for a specific item 2-level navigation: First level: Category Second level: A singleton detail view (for example, StatusView). It does not have concept of List. After watching a couple of WWDC videos about multi-platform navigation, I decided to go with NavigationSplitView. However, on macOS, a 3-column NavigationSplitView felt a bit overwhelming to my eyes when the third column was empty—especially for the occasional 2-level navigation case. So I removed the third column and instead embedded a NavigationStack in the second column. According to the official Apple documentation, this is supported: You can also embed a NavigationStack in a column. The code with NavigationStack in NavigationSplitView works fine on macOS. But on iPhone, for the same code I’m seeing unexpected behavior: The first time I tap on the “Actions” category, it briefly shows the “Select an item” view, and then automatically pops back to the all-categories view. If I tap the same "Actions" category again, it shows the list of actions correctly, and everything works fine until I terminate and relaunch the app. Here is a minimal reproducible example: import SwiftUI struct StatusView: View { var body: some View { NavigationStack { List { Text("Heartbeat: OK") Text("Connected to backend: OK") } } } } struct ActionListView: View { var body: some View { NavigationStack { List { NavigationLink(value: "Action 1 value") { Text("Action 1 label") } NavigationLink(value: "Action 2 value") { Text("Action 2 label") } } } .navigationDestination(for: String.self) { action in Text(action) } } } struct ContentView: View { var body: some View { NavigationSplitView { List { NavigationLink(value: "Actions") { Text("Actions (3 level)") } NavigationLink(value: "Modes") { Text("Modes (3 level)") } NavigationLink(value: "State") { Text("Status (2 level)") } } .navigationDestination(for: String.self) { category in switch category { case "Actions": ActionListView() case "Modes": Text("Modes View") case "State": StatusView() default: Text("Unknown Category") } } } detail: { Text("Select an item") } } } Questions and considerations: How can I prevent this unexpected automatic pop back to the root view on iPhone the first time I select a category? Future-proofing for more than 3 level navigation: In the future, I may allow users to navigate beyond three levels (e.g., an item in one category can reference another item in a different category). Is it correct to assume that to support this with back navigation, I’d need to keep using NavigationStack inside NavigationSplitView? Is embedding NavigationStack in a 2 column NavigationSplitView the only practical approach to handle mixed 2 and 3 navigation depth if I don't want the third column to be ever empty? On macOS, NavigationStack alone doesn’t feel appropriate for sidebar-based navigation. Does it mean everyone on macOS pretty much always use NavigationSplitView? Any advice or examples would be appreciated. Thanks!
Topic: UI Frameworks SubTopic: SwiftUI
0
0
79
1w
Using SwiftUI .sheet: ScrollView rendering issue when used inside NavigationStack
I am encounter an issue with the height of a ScrollView not rendering properly during the transition of a sheet from closed to open. This results in a gap between the bottom edge of the ScrollView and the bottom edge of the sheet during the animation. I am getting this issue when trying to use the ScrollView inside a NavigationStack and when using a PresentationDetent other than .large. The code snippet below, for example, suffers from the issue. ScrollView { Button("Reveal sheet") { isPresented = true } } .frame(maxWidth: .infinity) .background(.yellow) .sheet(isPresented: $isPresented) { VStack { NavigationStack { ScrollView { ForEach(0..<100, id: \.self) { number in Text("\(number)") } .frame(maxWidth: .infinity) } .background(.green) .presentationDetents([.medium]) } } } Here is what the issue looks like for this example. The issue occurs in: Simulator iPhone 16 iOS 18.4 Personal device (iPhone 16 iOS 18.4) Canvas preview
1
0
109
1w
FileExporter's action label always says "Move"
I would like to implement an "Export" dialog using the .fileExporter() view modifier. The following code works correctly, but the FileExporter's action label always says "Move", which is inappropriate for the context. I would like to change it to say "Export", "Save", "Save as", or anything semantically correct. Button("Browse") { showingExporter = true } .buttonStyle(.borderedProminent) .fileExporter( isPresented: $showingExporter, document: document, contentType: .data, defaultFilename: suggestedFilename ?? fileUrl.pathComponents.last ?? "Untitled" ) { result in switch result { case .success(let url): print("Saved to \(url)") onSuccess() case .failure(let error): print(error.localizedDescription) onError(error) } } "document" is a custom FileDocument with a fileWrapper() method implemented like this: func fileWrapper(configuration: WriteConfiguration) throws -> FileWrapper { return FileWrapper(regularFileWithContents: data) } This was tested on iOS 26 beta 3.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
70
1w
iOS 26: .tabViewBottomAccessory - How to open a new view on the tabViewBottomAccessory
If you are currently on the beta of iOS 26, open Apple Music and you'll see a tabViewBottomAccessory that is the mini NowPlayingView. When tapped, it opens the NowPlayingView. Is there a similar way to do this in SwiftUI? Looking through Apple's documentation, they do not specify any way to reproduce the same kind of view transition. This is the Apple Music app with the tabViewBottomAccessory. When clicked it opens the NowPlayingView
0
0
59
1w
SwiftUI & Xcode 26.0 beta3: Using Map in LazyVGrid causes "Observation tracking feedback loop"
The following code causes an error in Xcode 26.0 beta3 in iOS Simulator with iOS 26.0. After starting the App, scroll to the end of the grid and the app will break. Testet with Xcode Playground with platforms: [ .iOS("17.0")], Simplest possible variant: import SwiftUI import MapKit struct ContentView: View { var body: some View { NavigationStack { ScrollView { LazyVGrid(columns: [GridItem()]) { ForEach(1...12, id:\.self) { i in Text("Hello \(i)") .frame(height: 150) } Map { } .frame(height: 150) } } } } } Thrown error: Observation tracking feedback loop detected! Make a symbolic breakpoint at UIObservationTrackingFeedbackLoopDetected to catch this in the debugger. Refer to the console logs for details about recent invalidations; you can also make a symbolic breakpoint at UIObservationTrackingInvalidated to catch invalidations in the debugger. Object receiving repeated [updateProperties] invalidations: <UIKit.NavigationBarContentView: 0x103026000; frame = (0 0; 402 54); gestureRecognizers = <NSArray: 0x600000c26790>; layer = <CALayer: 0x600000c2d4a0>> contentView=0x0000000103026000 These three nested views are necessary to reproduce the error: NavigationStack -> ScrollView -> LazyVGrid In iOS Simulator with iOS 18.0 there is no error message, the CPU raises to 100%. With Xcode 16.4 the program runs error-free. Is there a solution?
3
1
146
1w
AlarmKit alarms only showing on lock screen
I am using AlarmKit to schedule alarms in an app I am working on, however my scheduled alarms only show up on the lock screen. If I am on the home screen or elsewhere I only hear the sound of the alarm, but no UI shows up. Environment: iOS 26 beta 3 Xcode 26 beta 3
Topic: UI Frameworks SubTopic: SwiftUI
0
0
89
1w