Thanks for being a part of WWDC25!

How did we do? We’d love to know your thoughts on this year’s conference. Take the survey here

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

Core Transferable Error
I'm developing an app that uses the SwiftUI .photosPicker modifier to allow the user to open videos from their photos. While many videos successfully load, one video results in the following errors occurring: Error loading com.apple.quicktime-movie: <decode: bad range for [%@] got [offs:100 len:1229 within:0]> Error loading public.movie: <decode: bad range for [%@] got [offs:87 len:1229 within:0]> "The operation couldn’t be completed. (CoreTransferable.TransferableSupportError error 0.)" I was able to isolate the line of code within the Transferable where this occurs to be the following: try FileManager.default.copyItem(at: received.file, to: destination) Is there something that I can do to ensure the app can reliably open any video? The entire transferable struct is as follows: import Foundation import CoreTransferable import UniformTypeIdentifiers struct Video: Transferable { let url: URL let filename: String static var transferRepresentation: some TransferRepresentation { FileRepresentation(contentType: .mpeg4Movie) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .quickTimeMovie) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .avi) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .mpeg) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .mpeg2Video) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .video) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .movie) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } } static func transfer(from received: ReceivedTransferredFile) throws -> Video { let destination = FileManager.default.temporaryDirectory.appendingPathComponent(received.file.lastPathComponent) if FileManager.default.fileExists(atPath: destination.path) { try FileManager.default.removeItem(at: destination) } try FileManager.default.copyItem(at: received.file, to: destination) return Video(url: destination, filename: received.file.lastPathComponent) } }
1
0
37
5d
SwiftUI toolbar in MacOS 15 bug ?
struct ContentView: View { var body: some View { NavigationSplitView { List { Text("row 1") Text("row 2") Text("row 3") } .toolbar(content: { ToolbarItem { Button("aa", action: onToolbar) } }) } detail: { HSplitView { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) Text("Hello, world!") } .toolbar(id: "toolbar", content: { ToolbarItem(id: "toolbar-1") { Button("bb", action: onToolbar) } }) .padding() Text("right") } }.navigationTitle("") } func onToolbar() {} } Run & Crash NSToolbar 0x6000005665b0 already contains an item with the identifier com.apple.SwiftUI.splitViewSeparator-0. Duplicate items of this type are not allowed.
Topic: UI Frameworks SubTopic: SwiftUI Tags:
13
1
1.4k
5d
How to replace layoutManager with textLayoutManager for a flexible dynamic height UITextView
In order to create a UITextView like that of the Messages app whose height grows to fits its contents (number of lines), I subclassed UITextView and customized the intrinsicContentSize like so: override var intrinsicContentSize: CGSize { var size = super.intrinsicContentSize if size.height == UIView.noIntrinsicMetric { layoutManager.glyphRange(for: textContainer) size.height = layoutManager.usedRect(for: textContainer).height + textContainerInset.top + textContainerInset.bottom } return size } As noted at WWDC, accessing layoutManager will force TextKit 1, we should instead use textLayoutManager. How can this code be migrated to support TextKit 2?
3
0
73
5d
Emulate AppKit NSPopUpButton in SwiftUI
How to make a control that looks and feels as close as possible to NSPopUpButton in SwiftUI, so a Mac user accepts the control as being native Mac UI? Items should have icon and text, I need separators between some items and certain items may be disabled at times, so they should not be selectable. Picker seems to lack some of those features (separators and disabled items), and Menu looks and behaves differently. Any guidance? For now I went with Menu, but find both the "chevron.down" icon at the trailing end as well as the positioning of the menu below the control weird.
Topic: UI Frameworks SubTopic: SwiftUI
2
0
35
6d
Some sharing extensions disabled when running iOS app with Mac Catalyst
When I run my iOS app on a Mac using Mac Catalyst, several sharing options that show up on an iOS device in a share sheet are absent on the Mac. Clicking on Edit Extensions, I see Mail, Message and AirDrop, their switches are on and disabled. All three items show up when I share from Safari or Notes. How can I make Mail, Message and AirDrop available? For example, when sharing data, no share extensions are shown. For text, only Simulator, Shortcuts and Copy are shown.
0
0
31
6d
Using .glassEffect in Charts
Hi, I was wondering if it's possible (and advisable) to use the new glass effects available in iOS 26 in Swift Charts? For example, in a chart like the one in the image I've attached to this post, I was looking to try adding a .glassEffect modifier to the BarMarks to see how that would look and feel. However, it seems it's not available directly on the BarMark (ChartContent) type, and I'm having trouble adding it in other ways too, such as using in on the types I supply to modifiers like foregroundStyle or clipShape. Am I missing anything? Maybe it's just not advisable or necessary to use glass effects within Charts?
3
0
79
6d
SwiftUI List features within complex grids of content
Our app displays complex, data-driven layouts that can display grids of items in addition to full width rows (essentially, nested lists). We'd like to be able to preserve cell/item portability (i.e., display in any content strip) and allow them to carry capabilities like swipe actions. In UIKit we have features in compositional layout that allow for this. However, in SwiftUI the only support seems to be at the List level. Nesting a List within a ScrollView to get swipe actions feels like a dark road. We've rolled our own swipe actions system, but we'd much rather use a native solution. Any other options here? Improvement ticket here FB17994843.
1
1
38
6d
iOS 26 UIKIt: Where's the missing cornerConfiguration property of UIViewEffectView?
In WWDC25 video 284: Build a UIKit app with the new design, there is mention of a cornerConfiguration property on UIVisualEffectView. But this properly isn't documented and Xcode 26 isn't aware of any such property. I'm trying to replicate the results of that video in the section titled Custom Elements starting at the 19:15 point. There is a lot of missing details and typos in the code associated with that video. My attempts with UIGlassEffect and UIViewEffectView do not result in any capsule shapes. I just get rectangles with no rounded corners at all. As an experiment, I am trying to recreate the capsule with the layers/location buttons in the iOS 26 version of the Maps app. I put the following code in a view controller's viewDidLoad method let imgCfgLayer = UIImage.SymbolConfiguration(hierarchicalColor: .systemGray) let imgLayer = UIImage(systemName: "square.2.layers.3d.fill", withConfiguration: imgCfgLayer) var cfgLayer = UIButton.Configuration.plain() cfgLayer.image = imgLayer let btnLayer = UIButton(configuration: cfgLayer, primaryAction: UIAction(handler: { _ in print("layer") })) var cfgLoc = UIButton.Configuration.plain() let imgLoc = UIImage(systemName: "location") cfgLoc.image = imgLoc let btnLoc = UIButton(configuration: cfgLoc, primaryAction: UIAction(handler: { _ in print("location") })) let bgEffect = UIGlassEffect() bgEffect.isInteractive = true let bg = UIVisualEffectView(effect: bgEffect) bg.contentView.addSubview(btnLayer) bg.contentView.addSubview(btnLoc) view.addSubview(bg) btnLayer.translatesAutoresizingMaskIntoConstraints = false btnLoc.translatesAutoresizingMaskIntoConstraints = false bg.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ btnLayer.leadingAnchor.constraint(equalTo: bg.contentView.leadingAnchor), btnLayer.trailingAnchor.constraint(equalTo: bg.contentView.trailingAnchor), btnLayer.topAnchor.constraint(equalTo: bg.contentView.topAnchor), btnLoc.centerXAnchor.constraint(equalTo: bg.contentView.centerXAnchor), btnLoc.topAnchor.constraint(equalTo: btnLayer.bottomAnchor, constant: 15), btnLoc.bottomAnchor.constraint(equalTo: bg.contentView.bottomAnchor), bg.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor), bg.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40), ]) The result is pretty close other than the complete lack of capsule shape. What changes would be needed to get the capsule shape? Is this even the proper approach?
1
0
72
6d
SwiftUI @State var not sync in .popover
struct ContentView: View { @State var visable: Bool = false @State var visableHiddenMenu: Bool = false var body: some View { VStack { Button("xxxx") { visableHiddenMenu = true print("visableHiddenMenu \(visableHiddenMenu)") visable.toggle() } .popover(isPresented: $visable) { VStack { let _ = print("visableHiddenMenu2 \(visableHiddenMenu)") Text("xxxx") } .onAppear { print("appear \(visableHiddenMenu)") visableHiddenMenu = visableHiddenMenu } } } .padding() } } the print is visableHiddenMenu true visableHiddenMenu2 false appear true so why visableHiddenMenu2 print false?
4
0
63
6d
Draw SwiftUI.Form style pop-up button with NSPopUpButton in AppKit
In SwiftUI on macOS, A menu-style Picker is drawn as a pop-up button. It generally looks and behaves the same as an NSPopUpButton in AppKit. SwiftUI introduced iOS-like looking UI for settings in macOS, and consequently, the Picker also has its own style when placed inside a Form. A Form-style Picker displays only up/down chevrons and draws the background only when the mouse hovers over it. It also changes its width dynamically based on the selected item. Form { Picker("Animal:", selection: $selection) { ForEach(["Dog", "Cow"], id: \.self) { Text($0) } .pickerStyle(.menu) } You can find it, for instance, in the Print dialog. My question is: I couldn't find a way to draw an NSPopUpButton in AppKit with this style. Does anyone know how to achieve this in AppKit? Some might say I should just use SwiftUI straightforwardly, but I would like to use it in a print panel accessory that currently still avoids using SwiftUI but its dialog has SwiftUI.Form-looking.
0
0
35
6d
Displaying an editing hierarchy in macOS
The SwiftUI Navigation structures work in ways that are not intuitive to me. For example, I am trying to display a set of data that represents rankings contained in a balloting system that I have created. The ballots all have candidates that are ranked from highest preference to lowest. Normally, I try to work backwards in SwiftUI, so I built the ballot editor to take a binding to the ballot itself: struct BallotEditor: View { @Binding var ballot: Election.Ballot var maxRank: Int var body: some View { VStack { ForEach($ballot.rankings) { $ranking in CandidateRankingPicker(maxRanking: maxRank, ranking: $ranking) } } } } This is embedded into a view with a list of ballots: struct BallotsView: View { @Binding var document: ElectionDocument var body: some View { List($document.ballots) { $ballot in NavigationLink { BallotEditor(ballot: $ballot, maxRank: document.election.candidates.count) .padding() } label: { BallotListElementView(ballot: ballot) } } } } This portion works in the editor. When the ballot is selected, the editor populates the selected candidate choices, and the editing works. However, when I attempt to insert BallotsView into a TabView, the NavigationLink stops working as expected. I didn't think NavigationLink was the proper way to do this, but it had been working. TabView { Tab("Ballots", systemImage: "menucard") { BallotsView(document: $document) } Tab { CandidateView() } label: { Text("Candidates") } .tabViewStyle(.sidebarAdaptable) } This is my third iteration. I have tried using a List with selection, but in that case, I am unable to pass the binding to the detail view. I just don't understand how this works, and I am preparing a version in Cocoa so that I don't have to deal with it anymore.
1
0
38
6d
Significant scrolling lag when using .focused modifier in large LazyVStack/LazyHStack on tvOS
Summary: When using the new .focused modifier to track focus within a large LazyVStack or LazyHStack, we observe a major frame-rate drop and stuttering on Apple TV (1st and 2nd generation). Steps to Reproduce: Create a LazyVStack (or LazyHStack) displaying a substantial list of data models (e.g., 100+ GroupData items). Attach the .focused(::) modifier to each row, binding to an @FocusState variable of the same model type. Build and run on an Apple TV device or simulator. Scroll through the list using the remote. static func == (lhs: GroupData, rhs: GroupData) -> Bool { lhs.id == rhs.id } var id: String var name: String var subName: String var subGroup: [GroupData] = [] var logo: URL? } struct TestView: View { @FocusState var focusedGroup: GroupData? let groupsArr: [GroupData] var body: some View { ScrollView { LazyVStack { ForEach(groupsArr, id: \.id) { group in Button { } label: { GroupTestView(group: group) } .id(group.id) .focused($focusedGroup, equals: group) } } } } } struct GroupTestView: View { let group: GroupData var body: some View { HStack { KFImage.url(group.logo) .placeholder { Image(systemName: "photo") .opacity(0.2) .imageScale(.large) } .resizable() .scaledToFit() .frame(width: 70) VStack { Text(group.name) Text(group.subName) } } } } Expected Behavior Scrolling remains smooth (60 fps) regardless of list size. Focus updates without introducing visible lag. Observed Behavior Frame rate drops significantly when .focused is applied. Scrolling becomes visibly laggy, especially on older Apple TV hardware. Even when binding an @FocusState<String?> (storing only the id), performance improves slightly but remains suboptimal. Workarounds Tried Switched to @FocusState of type String to track only the ID of each group, this has helped but there is still a big performance decrease. Minimised view-body complexity and removed other modifiers. Verified that excluding .focused entirely restores smooth scrolling. Any guidance or suggestions would be greatly appreciated.
2
1
75
6d
Search field as in Mail App
How can i achieve the same behavior as the bottom bar on the Mail app? Button -> Search Field -> Button right now, if do as follows, they overlap as if they are not in the same space NavigationStack { VStack { HeaderView() ListView() } } .toolbar(.hidden, for: .tabBar) .searchable(text: $searchText) .searchToolbarBehavior(.minimize) .toolbar { ToolbarItem(placement: .bottomBar) { Button { } label: { Label("Button1", systemImage: "person") } } ToolbarItem(placement: .bottomBar) { Button { } label: { Label("Button2", systemImage: "person") } } }
1
0
64
6d