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

Created

UISplitViewController and setViewController:forColumn: differences between different iOS versions
It seems to be that the functionality of the method setViewController:forColumn: in the column-style layout of a UISplitViewController has changed. iOS 18: setViewController:forColumn: pushes a new view controller onto the UINavigationController if it existed before the call. iOS 26: setViewController:forColumn: sets or replaces the view controller with a new view controller as a root of a new UINavigationController. My questions: what is the intended behavior? I did not find any documentation about a change. how do I replace in iOS 18 the old view controller with the new view controller passed to setViewController:forColumn:?
0
0
144
2w
In SwiftUI, how to animate from an arbitrary corner radius to the corner radius of the display?
I am trying to implement a common UX/UI pattern: one view with rounded corners transitioning to a view that fills the screen (N.B. having the display's corner radius). I got this to work if both corner radiuses are equal to that of the display (see first GIF). However, I cannot seem to get it to work for arbitrary corner radiuses of the smaller view (i.e., the one that does not fill the screen). I expected the be able to combine ContainerRelativeShape with .containerShape (see code), but this left me with a broken transition animation (see second GIF). import SwiftUI struct ContentView: View { @Namespace private var animation @State private var selectedIndex: Int? var body: some View { ZStack { if let selectedIndex = selectedIndex { ContainerRelativeShape() .fill(Color(uiColor: .systemGray3)) .matchedGeometryEffect(id: "square-\(selectedIndex)", in: animation) .ignoresSafeArea() .onTapGesture { withAnimation() { self.selectedIndex = nil } } .zIndex(1) } ScrollView { VStack(spacing: 16) { ForEach(0..<20, id: \.self) { index in if selectedIndex != index { ContainerRelativeShape() // But what if I want some other corner radius to start with? .fill(Color(uiColor: .systemGray5)) .matchedGeometryEffect(id: "square-\(index)", in: animation) .aspectRatio(1, contentMode: .fit) .padding(.horizontal, 12) .onTapGesture { withAnimation() { selectedIndex = index } } // .containerShape(RoundedRectangle(cornerRadius: 20)) // I can add this to change the corner radius, but this breaks the transition of the corners } else { Color.clear .aspectRatio(1, contentMode: .fit) .padding(.horizontal, 12) } } } .padding(.vertical, 16) } } } } #Preview { ContentView() } What am I missing here? How can I get this to work? And where is the mistake in my reasoning?
1
0
100
2w
SwiftUI – How to completely remove the horizontal “ghost lines” inside List with Section and custom rows?
Hi everyone, I’m working on a screen that uses a single SwiftUI List composed of: a top block (statistics, month picker, year selector, total, Entrata/Uscita picker). a list of transactions grouped by day, each group inside its own Section. each row is a fully custom card with rounded corners (RoundedCornerShape) I’m correctly removing all separators using: .listRowSeparator(.hidden) .listSectionSeparator(.hidden) .scrollContentBackground(.hidden) .listStyle(.plain) Each row is rendered like this: TransazioneSwipeRowView(...) .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)) .listRowBackground(Color.clear) However, I still see thin horizontal lines appearing between: the search bar and the top block the top block and the start of the list between rows inside the grouped section sometimes at the bottom of a Section These lines are NOT: Divider() system separators backgrounds row borders They seem to be “ghost lines” automatically generated by SwiftUI’s List when multiple consecutive rows or sections are present. Goal I want to remove these lines completely while keeping: native SwiftUI List native scroll behavior swipe-to-delete support grouping by Section custom card-like rows with rounded corners transparent backgrounds What I already tried .plain, .grouped, .insetGrouped list styles .listRowSeparator(.hidden) and .listSectionSeparator(.hidden) .scrollContentBackground(.hidden) clearing all backgrounds adjusting/removing all padding and insets Spacer(minLength: 0) experiments rebuilding the layout using ScrollView + LazyVStack (works perfectly — no lines — BUT loses native swipe-to-delete) There are no Divider() calls anywhere, and no background colors producing borders. Question Is this a built-in behavior of SwiftUI’s List in .plain style when using multiple custom rows, or is there an officially supported way to eliminate these lines entirely? Is there a recommended combination of modifiers to achieve: a List with grouped Sections fully custom rows with rounded backgrounds absolutely no horizontal separators, even in the empty spaces between sections? Any guidance, documented workarounds, WWDC references, or official recommendations would be greatly appreciated. Thanks in advance!
3
0
129
2w
[Issue] Animation of Menu on iOS 26.1
Hello everyone! I found a weird behavior with the animation of Menucomponent on iOS 26.1 When the menu disappear the animation is very glitchy You can find here a sample of code to reproduce it @available(iOS 26.0, *) struct MenuSample: View { var body: some View { GlassEffectContainer { HStack { Menu { Button("Action 1") {} Button("Action 2") {} Button("Delete", role: .destructive) {} } label: { Image(systemName: "ellipsis") .padding() } Button {} label: { Image(systemName: "xmark") .padding() } } .glassEffect(.clear.interactive()) } } } @available(iOS 26.0, *) #Preview { MenuSample() .preferredColorScheme(.dark) } I did two videos: iOS 26.0 iOS 26.1 Thanks for your help
0
0
171
2w
How can I show a movable webcam preview above all windows in macOS without activating the app
I'm building a macOS app using SwiftUI, and I want to create a draggable floating webcam preview window Right now, I have something like this: import SwiftUI import AVFoundation struct WebcamPreviewView: View { let captureSession: AVCaptureSession? var body: some View { ZStack { if let session = captureSession { CameraPreviewLayer(session: session) .clipShape(RoundedRectangle(cornerRadius: 50)) .overlay( RoundedRectangle(cornerRadius: 50) .strokeBorder(Color.white.opacity(0.2), lineWidth: 2) ) } else { VStack(spacing: 8) { Image(systemName: "video.slash.fill") .font(.system(size: 40)) .foregroundColor(.white.opacity(0.6)) Text("No Camera") .font(.caption) .foregroundColor(.white.opacity(0.6)) } } } .shadow(color: .black.opacity(0.3), radius: 10, x: 0, y: 5) } } struct CameraPreviewLayer: NSViewRepresentable { let session: AVCaptureSession func makeNSView(context: Context) -> NSView { let view = NSView() view.wantsLayer = true let previewLayer = AVCaptureVideoPreviewLayer(session: session) previewLayer.videoGravity = .resizeAspectFill previewLayer.frame = view.bounds view.layer = previewLayer return view } func updateNSView(_ nsView: NSView, context: Context) { if let previewLayer = nsView.layer as? AVCaptureVideoPreviewLayer { previewLayer.frame = nsView.bounds } } } This is my SwiftUI side code to show the webcam, and I am trying to create it as a floating window which appears on top of all other apps windows etc. however, even when the webcam is clicked, it should not steal the focus from other apps, the other apps should be able to function properly as they already are. import Cocoa import SwiftUI class WebcamPreviewWindow: NSPanel { private static let defaultSize = CGSize(width: 200, height: 200) private var initialClickLocation: NSPoint = .zero init() { let screenFrame = NSScreen.main?.visibleFrame ?? .zero let origin = CGPoint( x: screenFrame.maxX - Self.defaultSize.width - 20, y: screenFrame.minY + 20 ) super.init( contentRect: CGRect(origin: origin, size: Self.defaultSize), styleMask: [.borderless], backing: .buffered, defer: false ) isOpaque = false backgroundColor = .clear hasShadow = false level = .screenSaver collectionBehavior = [ .canJoinAllSpaces, .fullScreenAuxiliary, .stationary, .ignoresCycle ] ignoresMouseEvents = false acceptsMouseMovedEvents = true hidesOnDeactivate = false becomesKeyOnlyIfNeeded = false } // MARK: - Focus Prevention override var canBecomeKey: Bool { false } override var canBecomeMain: Bool { false } override var acceptsFirstResponder: Bool { false } override func makeKey() { } override func mouseDown(with event: NSEvent) { initialClickLocation = event.locationInWindow } override func mouseDragged(with event: NSEvent) { let current = event.locationInWindow let dx = current.x - initialClickLocation.x let dy = current.y - initialClickLocation.y let newOrigin = CGPoint( x: frame.origin.x + dx, y: frame.origin.y + dy ) setFrameOrigin(newOrigin) } func show<Content: View>(with view: Content) { let host = NSHostingView(rootView: view) host.autoresizingMask = [.width, .height] host.frame = contentLayoutRect contentView = host orderFrontRegardless() } func hide() { orderOut(nil) contentView = nil } } This is my Appkit Side code make a floating window, however, when the webcam preview is clicked, it makes it as the focus app and I have to click anywhere else to loose the focus to be able to use the rest of the windows.
0
0
321
2w
SwiftData iCloud AttributedString Platform Color compatibility
Hi Given a simple multiplatform app about Mushrooms, stored in SwiftData, hosted in iCloud using a TextEditor @Model final class Champignon: Codable { var nom: String = "" ../.. @Attribute(.externalStorage) var attributedStringData: Data = Data() var attributedString: AttributedString { get { do { return try JSONDecoder().decode(AttributedString.self, from: attributedStringData) } catch { return AttributedString("Failed to decode AttributedString: \(error)") } } set { do { self.attributedStringData = try JSONEncoder().encode(newValue) } catch { print("Failed to encode AttributedString: \(error)") } } } ../.. Computed attributedString is used in a TextEditor private var textEditorView: some View { Section { TextEditor(text: $model.attributedString) } header: { HStack { Text("TextEditor".localizedUppercase) .foregroundStyle(.secondary) Spacer() } } } Plain Text encode, decode and sync like a charm through iOS and macOS Use of "FontAttributes" (Bold, Italic, …) works the same But use of "ForegroundColorAttributes" trigger an error : Failed to decode AttributedString: dataCorrupted(Swift.DecodingError.Context(codingPath: [_CodingKey(stringValue: "Index 3", intValue: 3), AttributeKey(stringValue: "SwiftUI.ForegroundColor", intValue: nil), CodableBoxCodingKeys(stringValue: "value", intValue: 1)], debugDescription: "Platform color is not available on this platform", underlyingError: nil)) Is there a way to encode/decode attributedString data platform conditionally ? Or another approach ? Thanks for advices
0
0
162
2w
iOS 26 UI Components Not Rendering in TestFlight
Issue Summary: iOS 26 UI components are not visible in the Expo app when installed via TestFlight. All components render correctly in local builds or when running with expo run:ios. Details: The app is built using Expo managed workflow. iOS 26-specific UI components do not appear in TestFlight builds. The same components display correctly in local builds and simulators. Test device: iPhone running iOS 26.1. There are no crashes or runtime errors; only the components are missing. This issue occurs only in TestFlight/release builds. Expected Behavior: All iOS 26 UI components should render in TestFlight builds the same way they do in local builds. Actual Behavior: Components fail to render or are completely missing. Device Information: Device: iPhone iOS Version: 26.1 Distribution: TestFlight Local Build: Working correctly Additional Notes: This may be related to Expo release build optimization or iOS 26 SDK compatibility.
0
0
143
2w
WebPage and WebView and status bar
I am using WebView and WebPage to display web pages. Some web pages have content fixed to the top of the screen (like apple.com). When this happens, content is under the status bar (like menu buttons), and I cannot tap them. My work around is to put the WebView in a VStack with the top being Color.clear.frame(height: 44). It isn't very elegant, especially since it is applied to all pages and not just pages with fixed content at the top. Is there a more Apple-y way to solve this? For example, Safari seems to detect these situations and puts something like Color.clear.frame(height: 44) in those cases but not other cases. Here is sample code: import SwiftUI import WebKit struct ContentView: View { @State private var page: WebPage init() { let configuration = WebPage.Configuration() page = WebPage(configuration: configuration) let url = URL(string: "https://www.apple.com")! let request = URLRequest(url: url) page.load(request) } var body: some View { WebView(page) } } Here is a screenshot of Apple's page in WebView with the menu Here is a screenshot of Apple's page in Safari. It appears to have inserted a spacer frame at the top for Apple's page (but not, for example, my own web site which doesn't have this problem).
0
0
117
2w
UIDocument crashes when overriding writeContents(_:) in Swift 6
I’ve been trying to set up a UIDocument and override writeContents(...). This works correctly in older projects, but I haven’t been able to get it working in my new iOS 26 app using Swift 6. To troubleshoot, I tested the Particles demo and successfully overrode writeContents there. However, as soon as I switch that project to iOS 26 and Swift 6, calling save; which triggers writeContents, causes the same crash. override public func writeContents( _ data: Any, to url: URL, for _: UIDocument.SaveOperation, originalContentsURL _: URL?, ) throws { ... } Thread 10 Queue : UIDocument File Access (serial)
Topic: UI Frameworks SubTopic: UIKit
1
0
81
2w
Swift UI Custom Keyboard
How can I correctly display the cursor using a custom keyboard in SwiftUI without using UIKit? Currently, I'm encountering a conflict between the custom keyboard and the system keyboard in SwiftUI, resulting in both keyboards being displayed simultaneously. If I disable the system keyboard and then handle the custom keyboard, the cursor disappears. How can I resolve this issue?it?
0
0
76
2w
How to add view below navigation bar to extend scroll edge effect
Hello! What UIKit API enables you to add a view below the navigation bar and extend the scroll edge effect below it in iOS 26? safeAreaBar is how you do it in SwiftUI but I need to achieve this design in my UIKit app (which has a collection view in a view controller in a navigation controller). struct ContentView: View { let segments = ["First", "Second", "Third"] @State private var selectedSegment = "First" var body: some View { NavigationStack { List(0..<50, id: \.self) { i in Text("Row \(i + 1)") } .safeAreaBar(edge: .top) { Picker("Segment", selection: $selectedSegment) { ForEach(segments, id: \.self) { Text($0) } } .pickerStyle(.segmented) .padding(.horizontal) .padding(.bottom, 8) } .navigationTitle("Title") .navigationBarTitleDisplayMode(.inline) } } }
3
0
199
2w
[UIKit Glass Effect] - Opacity change from 0 to 1 does not work
When a UIVisualEffect with glass effect view is added with opacity 0, it remains hidden as expected. But when changing it back to 1 should make it visible, but currently it stays hidden forever. The bug is only reproducible on iOS 26.1 and iOS 26.2. It does not happen on iOS 26.0. The issue is also not reproducible with UIBlurEffect. Only happens for Glass effect Here is the repro link
2
0
181
2w
SwiftUI: Menu icon will missing if increase preferred text size
iOS simulator version 18.0+ I have a demo like this: Menu { Button { } label: { Text("Option 1") Image(systemName: "star") } Button { } label: { Text("Option 2") Image(systemName: "star") } } label: { Text("Menu") } And I used the tool Accessibility Inspector to modify the text size. Case 1: We could see the option title and the star icon. Case 2: But we could not see the icon, only the option title here Is this by design from Apple? Or does this need to be fixed? Does anyone know about my question?
0
0
61
2w
Fast Loading Thumbnails in Gallery Similar to iOS Photos App
I’m building a photo‑gallery view that mimics the iOS Photos app when it’s zoomed in to the maximum level: all years are displayed at once, with roughly 400 tiny thumbnails per page. The user experience of the system app is that the view is instantly visible, and scrolling keeps thumbnails instantly appearing. I’ve already tried fetching thumbnails with PHImageManager and PHCachingImageManager, requesting the .fastFormat representation. However, the thumbnails still take several seconds to load, so the scrolling experience is noticeably laggy compared to the system app. Is there another approach or technique—perhaps a different caching strategy, pre‑fetching, or a lower‑level API—that would allow me to retrieve and display thumbnails as quickly (or faster) than the native Photos app? Any guidance or code snippets would be greatly appreciated.
0
0
91
2w
UIHostingController adds extra backgrounds on iOS 26.1, breaks Liquid Glass effect
I was trying to figure out why my bottom sheet looks weird and doesn't have the "proper glass" look. I found that this issue seems to be new to iOS 26.1. See the images below, they show the same view hierarchy (in this case UIHostingController configured as bottom sheet that has NavigationStack and content. On iOS 26.1 there seems to be extra two layers of background - even though I am no adding any. iOS 26: iOS 26.1 Has anyone experienced something similar? Any workarounds? I am happy to completely disable the glass effect for this bottom sheet if it helps. The screenshots show one sheet, but the same thing happens for another ones.
1
2
140
2w
.glasseffect with multiple date pickers
Hello, I'm having a problem with the .glasseffect modifier in a view of a SwiftUI application. I have a list that starts with a static element, followed by several dynamic entries, and then another static element. I've applied the .glasseffect modifier to all the elements, and it works fine except for the first static element. I think I've figured out what's causing it. This element contains two date pickers, and if I comment one out, it works. As soon as both are present, I get a BAD_ACCESS_ERROR. Oddly enough, this only happens on the tablet. Everything runs normally in the simulator. If I remove the .glassmodifier and use a normal background, it still works. Is this a bug, or is it against Liquid Glass to have two date pickers in a stack and then use the .glasseffect modifier?
1
0
102
2w
How to Constrain a TableView Cell Similarly to Apple's Settings App
Hello! I'm creating a settings page for my app and I want it to look as native as possible. I want to know if it's possible to add constraints that make the second label go to the bottom when the text size gets really large (see Picture1) instead of having to force it to be on the right (see Picture 2). I've left my constraint code for this cell down below, too. I'm still learning constraints and best practices, so if there's any feedback, I'd love to hear it. Thank you! Picture 1 Picture 2 - (void) setConstraints { [NSLayoutConstraint activateConstraints:@[ // Cell Title Label [self.themeColorLabel.leadingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.leadingAnchor], [self.themeColorLabel.trailingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.trailingAnchor], [self.themeColorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor], [self.themeColorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor], // Selected Theme Color Label [self.selectedColorLabel.trailingAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.trailingAnchor], [self.selectedColorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor], [self.selectedColorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor], ]]; }
3
0
126
2w
AlarmKit only triggers a short vibration when the screen is on — bug or expected behavior?
I'm building an alarm app using the new AlarmKit introduced in iOS 26. The alarm works correctly when the device is locked, but when the screen is already on and unlocked, it only gives a single short vibration. I tested another app that also uses AlarmKit just to confirm, and it behaves the same way—only one short vibration if the display is awake, and the developer added a push notification as a workaround. The default iOS Clock app works properly in both situations (though when the screen is on, it uses the Dynamic Island interface). So I'm wondering: is this behavior a bug in AlarmKit, or is it intentional?
Topic: UI Frameworks SubTopic: General
0
0
36
2w
How to place scrollable header content above a Table in SwiftUI?
Hi everyone, I’m trying to reproduce the layout Apple Music uses for playlists, where there is header content above the table (artwork, title, buttons), and when you scroll, everything scrolls together—the header and table rows move as a single scrollable region. Here’s an example of what I’m trying to achieve: I’m using SwiftUI’s Table view and I haven’t found a clean way to place custom content above the table while keeping everything inside the same scroll view. Is there currently a recommended way to achieve Apple Music–style scrollable header + table content using SwiftUI? Thanks!
1
0
145
2w
Severe Delay When Tapping TextField/Searchable on iOS 18 (Real Device) — XPC “Reporter Disconnected” Loop Until Keyboard Appears
I’m running Xcode 26.1.1 (17B100) with deployment target iOS 18.0+, and I’m seeing a consistent and reproducible issue on real devices (iPhone 13 Pro, iPhone 15 Pro): Problem The first time the user taps into a TextField or a SwiftUI .searchable field after app launch, the app freezes for 30–45 seconds before the keyboard appears. During the freeze, the device console floods with: XPC connection interrupted Reporter disconnected. { function=sendMessage, reporterID=XXXXXXXXXXXX } -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID. inputModality = Keyboard customInfoType = UIEmojiSearchOperations After the keyboard finally appears once, the issue never happens again until the app is force-quit. This occurs on device Reproduction Steps Minimal reproducible setup: Create a new SwiftUI app. Add a single TextField or .searchable modifier. Install Firebase (Firestore or Analytics is enough). Build and run on device. Tap the text field immediately after the home screen appears. Result: App freezes for 30–45 seconds before keyboard appears, with continuous XPC/RTIInputSystem errors in the logs. If Firebase is removed, the issue occurs less often, but still happens occasionally. Even If Firebase initialization is delayed by ~0.5 seconds, the issue is still there. Question Is this a known issue with iOS 18 / RTIInputSystem / Xcode 26.1.1, and is there a recommended workaround? Delaying Firebase initialization avoids the freeze, but this isn’t ideal for production apps with startup authentication requirements. Any guidance or confirmation would be appreciated.
Topic: UI Frameworks SubTopic: SwiftUI
1
0
88
3w