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

A Summary of the WWDC25 Group Lab - UI Frameworks
At WWDC25 we launched a new type of Lab event for the developer community - Group Labs. A Group Lab is a panel Q&A designed for a large audience of developers. Group Labs are a unique opportunity for the community to submit questions directly to a panel of Apple engineers and designers. Here are the highlights from the WWDC25 Group Lab for UI Frameworks. How would you recommend developers start adopting the new design? Start by focusing on the foundational structural elements of your application, working from the "top down" or "bottom up" based on your application's hierarchy. These structural changes, like edge-to-edge content and updated navigation and controls, often require corresponding code modifications. As a first step, recompile your application with the new SDK to see what updates are automatically applied, especially if you've been using standard controls. Then, carefully analyze where the new design elements can be applied to your UI, paying particular attention to custom controls or UI that could benefit from a refresh. Address the large structural items first then focus on smaller details is recommended. Will we need to migrate our UI code to Swift and SwiftUI to adopt the new design? No, you will not need to migrate your UI code to Swift and SwiftUI to adopt the new design. The UI frameworks fully support the new design, allowing you to migrate your app with as little effort as possible, especially if you've been using standard controls. The goal is to make it easy to adopt the new design, regardless of your current UI framework, to achieve a cohesive look across the operating system. What was the reason for choosing Liquid Glass over frosted glass, as used in visionOS? The choice of Liquid Glass was driven by the desire to bring content to life. The see-through nature of Liquid Glass enhances this effect. The appearance of Liquid Glass adapts based on its size; larger glass elements look more frosted, which aligns with the design of visionOS, where everything feels larger and benefits from the frosted look. What are best practices for apps that use customized navigation bars? The new design emphasizes behavior and transitions as much as static appearance. Consider whether you truly need a custom navigation bar, or if the system-provided controls can meet your needs. Explore new APIs for subtitles and custom views in navigation bars, designed to support common use cases. If you still require a custom solution, ensure you're respecting safe areas using APIs like SwiftUI's safeAreaInset. When working with Liquid Glass, group related buttons in shared containers to maintain design consistency. Finally, mark glass containers as interactive. For branding, instead of coloring the navigation bar directly, consider incorporating branding colors into the content area behind the Liquid Glass controls. This creates a dynamic effect where the color is visible through the glass and moves with the content as the user scrolls. I want to know why new UI Framework APIs aren’t backward compatible, specifically in SwiftUI? It leads to code with lots of if-else statements. Existing APIs have been updated to work with the new design where possible, ensuring that apps using those APIs will adopt the new design and function on both older and newer operating systems. However, new APIs often depend on deep integration across the framework and graphics stack, making backward compatibility impractical. When using these new APIs, it's important to consider how they fit within the context of the latest OS. The use of if-else statements allows you to maintain compatibility with older systems while taking full advantage of the new APIs and design features on newer systems. If you are using new APIs, it likely means you are implementing something very specific to the new design language. Using conditional code allows you to intentionally create different code paths for the new design versus older operating systems. Prefer to use if #available where appropriate to intentionally adopt new design elements. Are there any Liquid Glass materials in iOS or macOS that are only available as part of dedicated components? Or are all those materials available through new UIKit and AppKit views? Yes, some variations of the Liquid Glass material are exclusively available through dedicated components like sliders, segmented controls, and tab bars. However, the "regular" and "clear" glass materials should satisfy most application requirements. If you encounter situations where these options are insufficient, please file feedback. If I were to create an app today, how should I design it to make it future proof using Liquid Glass? The best approach to future-proof your app is to utilize standard system controls and design your UI to align with the standard system look and feel. Using the framework-provided declarative API generally leads to easier adoption of future design changes, as you're expressing intent rather than specifying pixel-perfect visuals. Pay close attention to the design sessions offered this year, which cover the design motivation behind the Liquid Glass material and best practices for its use. Is it possible to implement your own sidebar on macOS without NSSplitViewController, but still provide the Liquid Glass appearance? While technically possible to create a custom sidebar that approximates the Liquid Glass appearance without using NSSplitViewController, it is not recommended. The system implementation of the sidebar involves significant unseen complexity, including interlayering with scroll edge effects and fullscreen behaviors. NSSplitViewController provides the necessary level of abstraction for the framework to handle these details correctly. Regarding the SceneDelagate and scene based life-cycle, I would like to confirm that AppDelegate is not going away. Also if the above is a correct understanding, is there any advice as to what should, and should not, be moved to the SceneDelegate? UIApplicationDelegate is not going away and still serves a purpose for application-level interactions with the system and managing scenes at a higher level. Move code related to your app's scene or UI into the UISceneDelegate. Remember that adopting scenes doesn't necessarily mean supporting multiple scenes; an app can be scene-based but still support only one scene. Refer to the tech note Migrating to the UIKit scene-based life cycle and the Make your UIKit app more flexible WWDC25 session for more information.
Topic: UI Frameworks SubTopic: General
0
0
551
Jun ’25
iOS 18 SwiftUI sheet resizing from page to form presentation sizing
I'm presenting a UIKit view controller from SwiftUI in a sheet using UIViewControllerRepresentable. The size of the sheet is being set to PagePresentationSizing using the new iOS 18 presentationSizing method. When Split View is used and the size class changes from regular to compact, the sheet resizes as expected to fit in the smaller window. When the app returns to full screen and the size class changes back to regular, the sheet is now displayed using FormPresentationSizing instead of PagePresentationSizing. This all worked as expected in iOS 17 with the view controller modalPresentationStyle being specified in the UIViewControllerRepresentable implementation, but the behaviour has now changed with iOS 18. How do I preserve the desired presentation sizing of the sheet? Thanks for any help.
2
0
2.3k
Sep ’24
Focus fails when TextField includes axis: .vertical
I've found another interesting issue with the Focus system. My text case is SwiftUI in Preview or Simulator (using an iPad mini case) -- I haven't tried this on other environments, so your mileage may vary. I have a Form including several TextFields. Adding the usual @FocusState logic, I observe that if I type a TAB key, then (a) If the TextFields are specified using TextField(“label”, text: $text), typing the tab key switches focus from field to field as expected, BUT (b) If the TextFields are specified using TextField(“label”, text: $text, axis: .vertical), typing the tab key adds whitespace to the field and does NOT change focus. In the latter case, I need to use an .onKeyPress(.tab) {….} modifier to achieve the desired result. Reported as FB15432840
0
0
520
Oct ’24
[iOS18][RTL][Crash]
Hi all, Firebase statistics show that some crashes seem to occur suddenly. Can you give me some suggestions? Users also meet the following requirements: iOS18 and above RTL language From the stack frame, the crash occurred in the transition animation project, but I did not reproduce this stack frame A very small number of users can experience it twice The crashed page is relatively complex, and it is a mixture of auto-layout and frame I retrieved some other articles, but they don’t seem to be the same problem https://developer.apple.com/forums/thread/693118 https://stackoverflow.com/questions/56027014/collectionview-crashing-in-nsisengine-after-a-few-scrolls Thank you for reading, looking forward to your reply ;) CoreAutoLayout: _engineVar_rawRemove
0
0
672
Oct ’24
UIViewRepresentable animations
I've tried to animate custom UIViewRepresentable with SwitfUI animations, but it doesn't work. It just sets value without interpolation. What should i do to use interpolation values in UIKit views? My example shows two "progress bars" red one is UIKit view, blue one is SwiftUI version. Sliders controls value directly, randomize button changes value to random with 5s animation. When I press button SwiftUI progress bar animates exactly as it should, but UIKit's one just jumps to final position. Set block of animatableData inside Animatable extension not called. How can I use SwiftUI animation value interpolations for UIKit? import SwiftUI import UIKit class UIAnimationView: UIView { var progress: CGFloat = 0.5 { didSet { if self.progressConstraint != nil, self.innerView != nil { self.removeConstraint(self.progressConstraint!) } let progressConstraint = NSLayoutConstraint( item: innerView!, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: min(1.0, max(0.0001, progress)), constant: 0 ) self.addConstraint(progressConstraint) self.progressConstraint = progressConstraint self.layoutIfNeeded() } } var innerView: UIView? private var progressConstraint: NSLayoutConstraint? public override init(frame: CGRect) { super.init(frame: frame) self.performInit() } public required init?(coder: NSCoder) { super.init(coder: coder) self.performInit() } private func performInit() { let innerView = UIView() innerView.translatesAutoresizingMaskIntoConstraints = false self.addSubview(innerView) self.leadingAnchor.constraint(equalTo: innerView.leadingAnchor).isActive = true self.topAnchor.constraint(equalTo: innerView.topAnchor).isActive = true self.bottomAnchor.constraint(equalTo: innerView.bottomAnchor).isActive = true let progressConstraint = NSLayoutConstraint( item: innerView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: progress, constant: 0 ) self.progressConstraint = progressConstraint self.addConstraint(progressConstraint) self.innerView = innerView self.innerView!.backgroundColor = UIColor.red self.backgroundColor = UIColor.black } } struct AnimationTest: UIViewRepresentable { var progress: CGFloat typealias UIViewType = UIAnimationView func updateUIView(_ uiView: UIAnimationView, context: Context) { print("progress: \(progress) \(context.transaction.isContinuous)") uiView.progress = progress } func makeUIView(context: Context) -> UIAnimationView { let view = UIAnimationView() view.progress = progress return view } } extension AnimationTest: Animatable { var animatableData: CGFloat { get { return progress } set { print("Animation \(newValue)") progress = newValue } } } struct AnimationDebug: View { @State var progress: CGFloat = 0.75 var body: some View { VStack { AnimationTest(progress: progress) Spacer() VStack { Slider(value: $progress, in: 0...1) { Text("Progress") } } GeometryReader { gr in Color.blue .frame( width: gr.size.width * progress, height: 48) } .frame(height: 48) Button("Randomize") { withAnimation(Animation.easeInOut(duration: 5)) { progress = CGFloat.random(in: 0...1) } } } } } struct AnimationTest_Previews: PreviewProvider { static var previews: some View { AnimationDebug() } }
2
0
1.5k
Oct ’24
Scale contextMenu preview size to containing content
Hi! I have a multi-line string I'd like to display as text in a long-press preview (using .contextMenu). However, text after 3rd or 4th linebreak (\n) gets clipped. The intended effect is to have the minimum preview size that can fit all of the text. Tried .frame(maxWidth: .infinity, maxHeight: .infinity) on Text() but it didn't have any effect. The only modifier that somewhat works is .containerRelativeFrame([.horizontal, .vertical]) but this gives the maximum preview size, instead of minimum. Any suggestions? TIA. struct RedditView: View { @State private var text = "AAAAAAAAAAAAAAAAAAAAAA?\n\nBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB\n\nCCCCCCCCCCCCCCCCCCCCCCCCCC" var body: some View { Text("Long press this") .frame(width: 300, height: 100) .contentShape(.rect) .border(Color.blue) .contextMenu(menuItems: { Button { // do something } label: { Label { Text("Edit") } icon: { Image(systemName: "pencil") } } }, preview: { Text(text) // .frame(maxWidth: .infinity, maxHeight: .infinity) .multilineTextAlignment(.center) .padding() //.containerRelativeFrame([.horizontal, .vertical]) } ) } }
0
0
632
Sep ’24
$FocusState and Lists with rows containing TextFields
While I've seen examples of using $FocusState with Lists containing "raw" TextFields, in my use case, the List rows are more complex than that and contain multiiple elements, including TextFields. I obviously don't understand something fundamental here, because I am completely unable to get TextField-to-TextField tabbing to work. Can someone set me straight? Sample code demonstrating the issues: // // ContentView.swift // ListElementFocus // // Created by Richard Aurbach on 10/12/24. // import SwiftUI /// NOTE: in my actual app, the data model is actually a set of SwiftData /// PresistentModel objects. Here, I'm simulating them with an Observable. @Observable final class TestModel: Identifiable { public var id: UUID public var checked: Bool = false public var title: String = "Test" public var subtitle: String = "Subtitle" init(checked: Bool = false, title: String, subtitle: String) { self.id = UUID() self.checked = checked self.title = title self.subtitle = subtitle } } struct ContentView: View { /// Instead of a @Query... @State var records: [TestModel] = [ TestModel(title: "First title", subtitle: "blah, blah, blah"), TestModel(title: "Second title", subtitle: "more nonsense"), TestModel(title: "Third title", subtitle: "even more nonsense"), ] @FocusState var focus: UUID? var body: some View { Form { Section { HStack(alignment: .top) { Text("Goal:").font(.headline) Text( "If a user taps in the TextField in any row, they should be able to tab from row to row using any keyboard which supports a tab key." ) } HStack(alignment: .top) { Text("#1:").font(.headline) Text( "While I will admit that this code is probaby total garbage, I haven't been able to find any way to make tabbing from row to row to work at all." ) } HStack(alignment: .top) { Text("#2:").font(.headline) Text( "Tapping the checkbox button causes the row to flash with the current accent color, and I can't find any way to turn that off." ) } } header: { Text("Problems").font(.title3).bold() }.headerProminence(.increased) Section { List(records) { record in ListRow(record: record, focus: focus) .onKeyPress(.tab) { focus = next(record) return .handled } } } header: { Text("Example: Selector of Editable Items").font(.title3).bold() }.headerProminence(.increased) } .padding() } private func next(_ record: TestModel) -> UUID { guard !records.isEmpty else { return UUID() } if record.id == records.last!.id { return records.first!.id } if let index = records.firstIndex(where: { $0.id == record.id }) { return records[index + 1].id } return UUID() } } struct ListRow: View { @Bindable var record: TestModel var focus: UUID? @FocusState var focusState: Bool init(record: TestModel, focus: UUID?) { self.record = record self.focus = focus self.focusState = focus == record.id } var body: some View { HStack(alignment: .top) { Button { record.checked.toggle() } label: { record.checked ? Image(systemName: "checkmark.square.fill") : Image(systemName: "square") }.font(.title2).focusable(false) VStack(alignment: .leading) { TextField("title", text: $record.title).font(.headline) .focused($focusState) Text("subtitle").italic() } } } } #Preview { ContentView() }
0
0
460
Oct ’24
[iPadOS 18] A series of TabBar questions
Hello, I am currently implementing the new iPadOS 18 TabBar with the new Tab API, but there are several things that don't look very good or aren't operating quite the way I'd hope and would like to know if there is a way around them or to change them. Here is what my sidebar for the TabBar looks like: My questions: The tabViewSidebarBottomBar isn't actually at the "bottom". Instead there is a gap below which you can see the sidebar scrolling. Is there a way to get the tabViewSidebarBottomBar actually at the bottom? Is there a way to make it so that the sections themselves are also reorderable? Can we turn scrollIndicators to .never or are we stuck with them being on? Is there any way at all to make the SF Symbols in the sidebar render in another color mode, particularly .palette? Is it possible to allow sections in between plain tabs? Like I want Dashboard, then the whole Events section, then the rest can continue. On iPhone why are sections not honored at all, in any way? Like even if they weren't going to be expandable menus, at least treating it like a list section would allow some visual hierarchy?! Bonus Question: Any way to make the tabViewSidebarHeader sticky so it's always at the top? Thank you in advance!
1
0
765
Oct ’24
Help by Swift Playground App
I would like to program an app in Swift Playground that displays WhatsApp Web in a webview, so to speak. But I keep seeing an error like in the screenshot. My Code: import SwiftUI import WebKit import PlaygroundSupport struct WebView: UIViewRepresentable { let url: URL func makeUIView(context: Context) -> WKWebView { let webView = WKWebView() let request = URLRequest(url: url) webView.load(request) return webView } func updateUIView(_ webView: WKWebView, context: Context) { } } struct ContentView: View { var body: some View { WebView(url: URL(string: "https://web.whatsapp.com")!) .edgesIgnoringSafeArea(.all) } } PlaygroundPage.current.setLiveView(ContentView())
0
0
408
Oct ’24
TextFields inside a List lose focus after each character
My problem: I tap in one of the TextFields defined below and try to type. After typing a single character, the cursor disappears from the TextField and I need to tap in the field again to enter the next character. I have the following code: @Observable final class Species { . . . public var list: [String] . . . } struct SpeciesCapture: View { @State private var species = Species() @State var trainingList: [String] = [] var body: some View { NavigationStack { VStack(alignment: .leading) { HStack { Text("some text") Spacer() Button("Add") { trainingList.append("") } } List { ForEach($trainingList, id: \.self) { $animal in TextField("Animal", text: $animal) .textCase(.lowercase) } } } .onAppear { trainingList = species.list . . . } . . . // etc. } } } It appears that I am continually losing focus. How do I fix this problem? Xcode 16.0 targeting iOS 18. The behavior appears in both Preview and the Simulator. (Haven't tried it on a physical device).
1
0
248
Sep ’24
AccessorySetupKit - Removing accessory inconsistencies
Hello everyone, I am using the new AccessorySetupKit, and whenever I try to remove an accessory I sometimes get an alert asking me to make sure if I want to remove the accessory from my device. The problem is that this alert sometimes shows up, and sometimes it does not. The removal of the accessory does work, it is just that the alert is not predictable. Is this expected behavior? How can we “predict” when it will show up and when it will not?
0
0
444
Sep ’24
NSMenuToolbarItem not showing first menu item when using NSMenuDelegate
I am using NSMenuToolbarItem to show a drop-down menu in my NSToolbar. This works as expected when creating an NSMenu beforehand and assign it to the menu property of NSMenuToolbarItem. However, my menu needs to be built dynamically when the user clicks the dropdown button. To do that, I am using NSMenuDelegate. When creating the menu in the menuNeedsUpdate of the delegate, the first menu item isn't shown to the user. Why? Menu when using delegate: Menu when pre-assigning menu: I also cannot just add a placeholder menu item at the start of the NSMenuToolbarItem as all menu items do show in the overflow menu. Example code: import Cocoa class AppDelegate: NSObject, NSApplicationDelegate, NSToolbarDelegate, NSMenuDelegate { var window: NSWindow! func applicationDidFinishLaunching(_ aNotification: Notification) { window = NSWindow(contentRect: NSRect(x: 0, y: 0, width: 400, height: 300), styleMask: [.titled, .closable, .resizable], backing: .buffered, defer: false) window.makeKeyAndOrderFront(nil) let toolbar = NSToolbar(identifier: "MainToolbar") toolbar.delegate = self window.toolbar = toolbar } func toolbarAllowedItemIdentifiers(_ toolbar: NSToolbar) -> [NSToolbarItem.Identifier] { return [NSToolbarItem.Identifier("item1"), NSToolbarItem.Identifier("item2")] } func toolbarDefaultItemIdentifiers(_ toolbar: NSToolbar) -> [NSToolbarItem.Identifier] { return [NSToolbarItem.Identifier("item1"), NSToolbarItem.Identifier("item2")] } func toolbar(_ toolbar: NSToolbar, itemForItemIdentifier itemIdentifier: NSToolbarItem.Identifier, willBeInsertedIntoToolbar: Bool) -> NSToolbarItem? { let item = NSMenuToolbarItem(itemIdentifier: itemIdentifier) if itemIdentifier == NSToolbarItem.Identifier("item1") { let menu = NSMenu() fillMenuWithItems(menu) item.menu = menu } else if itemIdentifier == NSToolbarItem.Identifier("item2") { item.menu = NSMenu() item.menu.delegate = self } return item } func menuNeedsUpdate(_ menu: NSMenu) { menu.removeAllItems() fillMenuWithItems(menu) } func fillMenuWithItems(_ menu: NSMenu) { menu.addItem(NSMenuItem(title: "Option 1", action: nil, keyEquivalent: "")) menu.addItem(NSMenuItem(title: "Option 2", action: nil, keyEquivalent: "")) } }
1
0
416
Sep ’24
How can I make my multi-window Catalyst app restore window size and position after closing with stoplight button?
I have a Catalyst app that supports multiple scenes / windows. It has one "main" window type and lots of other secondary windows that can be opened. I'm using the system window restoration functionality via NSQuitAlwaysKeepsWindows to restore windows with their user activity data after the app is quit and restarted. Normally, this works great. If I open my app, change the size and position of my window, quit, and reopen it, the window size and position comes back as expected. But if I close the window using the red stoplight button and then click the app icon to bring it back, it comes back at the default position and size. This isn't how other system apps work - if I close the system Calendar app with the stoplight button, it comes back at the same size and position. How do I get this behavior with my Catalyst app? Is there some identifier property I need to set somewhere? I don't see such a property on UISceneConfiguration. If it matters, I'm using the configurationForConnectingSceneSession method to configure my windows when they open, instead of setting it up in the Info.plist.
1
0
521
Oct ’24
NSPersistentCloudkitContainer setup - merge behavior - contexts
Is it ok to use automaticallyMergesChangesFromParent to true for a managed object context that pins its query generation to current? I have heard from a few sources that in most cases, it’s not recommended to set automaticallyMergesChangesFromParent to true for a managed object context that pins its query generation to current. A source I have seen says: When you pin a managed object context to a specific query generation, you’re explicitly telling the context to view the data as it existed at the time of that generation token (often referred to as a snapshot). This ensures that the context is isolated from any subsequent changes made by other contexts or background tasks. But this may Conflict with Automatic Merging because: The purpose of setting automaticallyMergesChangesFromParent to true is to have the context automatically merge changes from the parent (e.g., background or main context) into itself whenever the parent context saves changes. This behavior conflicts with the concept of a pinned query generation because: • If the context is pinned to current, it should not be concerned with changes that happen after that pinning. • Automatic merging would introduce updates from the parent context that occur after the pinning, thereby violating the “snapshot” nature of the query generation and potentially creating inconsistencies. However, in your own Apple Sample Code Titled "" does use both together. Inside the definition of lazy var persistentContainer: NSPersistentCloudkitContainer the following code is included: // Pin the viewContext to the current generation token, and set it to keep itself up to date with local changes. container.viewContext.automaticallyMergesChangesFromParent = true do { try container.viewContext.setQueryGenerationFrom(.current) } catch { fatalError("###\(#function): Failed to pin viewContext to the current generation:\(error)") }
Topic: UI Frameworks SubTopic: General
0
0
278
Oct ’24
iOS 18 crash on UITextView
Below style case was crash after 17.6.1 import UIKit import PlaygroundSupport class MyViewController : UIViewController { override func loadView() { let view = UIView() view.backgroundColor = .white let titleText = UITextView(frame: CGRect(origin: .zero, size: CGSize(width: 82, height: 100))) titleText.textContainer.maximumNumberOfLines = 2 titleText.textContainer.lineFragmentPadding = 0 titleText.textContainer.lineBreakMode = .byTruncatingTail titleText.textContainerInset = UIEdgeInsets.zero let attributedText = NSMutableAttributedString(string: text, attributes: [.font: UIFont.systemFont(ofSize: 14), .foregroundColor: UIColor.red]) titleText.attributedText = attributedText view.addSubview(titleText) self.view = view } } // Present the view controller in the Live View window PlaygroundPage.current.liveView = MyViewController()
Topic: UI Frameworks SubTopic: UIKit
4
0
352
Oct ’24