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

Live Q&A Summary - SwiftUI foundations: Build great apps with SwiftUI
Here’s a recap of the Live Q&A for SwiftUI foundations: Build great apps with SwiftUI. If you participated and asked questions, thank you for coming and participating! If you weren’t able to join us live we hope this recap is useful Where can I watch the VOD? Is the sample code “Wishlist” that was shown available for download? You can view the replay of the entire event here https://www.youtube.com/watch?v=Z3vloOtZLkQ The sample code for the Wishlist app will be made available in the coming weeks on the Apple Developer website, we'll send an update via email when it is available. What are the best practices when it comes to building complex navigations in SwiftUI? The developer website has documentation on navigation style best practices. Explore navigation basics like NavigationStack and TabView to get a ground-up understanding. For documentation on navigation APIs see Navigation. How can I integrate UIKit with my SwiftUI app? What about adding SwiftUI into my UIKit app? See UIKit integration: Add UIKit views to your SwiftUI app, or use SwiftUI views in your UIKit app. Both UIKit and SwiftUI provide API to show a view hierarchy of the other. For UIKit to SwiftUI, you would use UIViewControllerRepresentable. For SwiftUI to UIKit, you would use UIHostingController. Landmarks: Interfacing with UIKit walks you through step by step how to implement UIKit in SwiftUI with UIViewControllerRepresentable, and this WWDC22 video demonstrates UIHostingController, for those that want to add SwiftUI to their UIKit. Does Wishlist feature a new iOS 26 font? How can I add custom fonts and text of my app? We’re glad to hear many of you liked wide text shown in Wishlist, however, It is the default system font with some light SwiftUI styling! Check it out for yourself in the sample code when made available, and you can learn more about customizing fonts and text by seeing Font and Applying custom fonts to text. Does Xcode have a dependency graph we can use to optimize our SwiftUI Views? Xcode comes with Instruments. Instruments is the best way to figure out what is causing excessive updates and other issues with performance. That link provides direct tutorials and resources for how to use and understand. Previews also have many useful tools for analyzing SwiftUI views, for more info see Previews in Xcode Check out this video from our latest WWDC Optimize SwiftUI performance with Instruments for information on how to use Instruments to profile and optimize your app with real-world applications If you still have questions, Check out the Instruments section of these forums and create a post so the community has the opportunity to help guide you. Are there UI debugging tools to help diagnose layout issues? Yes, Xcode also features a View Debugger located by selecting the View Debug Hierarchy, pictured below. Use the View Debugger to capture and inspect your view hierarchy, identifying which views affect window sizing. The SwiftUI Inspector also lets you examine view frames and layout behavior. See Diagnosing issues in the appearance of a running app to learn about debugging visual and layout issues. As an absolute beginner, what would be the first go-to step to go for training? Do I need prior knowledge of frameworks to get started with SwiftUI? A great place to learn how to develop for Apple platforms is with Pathways! Many developers start with Develop in Swift tutorials, which exposes you to several frameworks while teaching you the basics of SwiftUI. When you're ready to take your learning further, you can read the documentation for the specific frameworks that interest you at https://developer.apple.com/documentation/.
Topic: UI Frameworks SubTopic: SwiftUI
2
0
82
2w
Dynamic Type Layout constraint Issue - "My card" label Clipping at 100% Text Size (IOS 26.3.1 or 26.3.2)
Hello, I would like to report a potential Dynamic Type rendering issue observed in Control Center. After increasing the system text size to 100%, the label “My Card” appears visually constrained and partially clipped instead of scaling proportionally according to Dynamic Type guidelines. Steps to reproduce: Open Settings Increase Text Size to 100% Open Control Center Observe the “My Card” label Expected behavior: The label should scale proportionally using preferred text styles and remain fully visible without truncation. Observed behavior: The label appears constrained, suggesting possible fixed height constraints or insufficient layout flexibility. Technical hypothesis: This may be caused by: Fixed height constraints on the text container Non-preferred font usage instead of dynamic text styles Missing adjustsFontForContentSizeCategory configuration Incomplete layout testing across content size categories Given Apple’s emphasis on accessibility and Dynamic Type compliance, I believe this may be worth reviewing in a future update. Has anyone else observed similar behavior?
Topic: UI Frameworks SubTopic: UIKit
1
0
55
2w
UIToolbar Missing from View Hierarchy Since iOS 26
Since iOS 26, navigationController?.toolbar no longer appears in the view hierarchy, and UIToolbar itself is not visible in the view tree. Is there currently any supported way to access the toolbar’s container view or its underlying view hierarchy? However, the API itself is not deprecated. https://developer.apple.com/documentation/uikit/uinavigationcontroller/toolbar
Topic: UI Frameworks SubTopic: UIKit Tags:
1
0
92
2w
Memory leak in CarPlay when using CPListImageRowItem
Memory leak in CarPlay when using CPListImageRowItem. The following behavior was observed in the CPListTemplate class when using CPListImageRowItem: If a CPListImageRowItem cell is inserted into the screen, the screen starts to leak, even if it contains no elements (CPListImageRowItem(titleList: nil, imagesRow: [], titlesRow: []). Replacing CPListImageRowItem with CPListItem stops the leak. Using the new initializer for iOS 26 does not correct the issue; the screen still leaks. Class reference: https://developer.apple.com/documentation/carplay/cplistimagerowitem
0
0
55
2w
iPadOS 26 – SwiftUI Menu in ToolbarItem shifts during pointer hover when view is presented as sheet
I am observing inconsistent pointer hover behavior for a SwiftUI Menu placed inside a ToolbarItem on iPadOS 26.2 (real device). Scenario: • Screen A is pushed inside a NavigationStack. • Screen B is presented as a sheet (with its own NavigationStack). • Both screens contain the same toolbar Menu item using an SF Symbol (arrow.up.arrow.down). Observed behavior: In the pushed view, hover is mostly stable. In the sheet-presented view, the SF Symbol visibly shifts/jumps when pointer hover activates. The hover highlight shape differs from the native navigation back button. Label-level hoverEffect modifiers do not stabilize the behavior. Minimal example: import SwiftUI struct ContentView: View { @State private var showSheet = false var body: some View { NavigationStack { VStack { Button("Open Sheet") { showSheet = true } } .navigationTitle("Home") .toolbar { ToolbarItem(placement: .topBarTrailing) { Menu { Button("Option A") { } Button("Option B") { } } label: { Image(systemName: "arrow.up.arrow.down") } } } .sheet(isPresented: $showSheet) { SheetView() } } } } struct SheetView: View { var body: some View { NavigationStack { Text("Sheet View") .navigationTitle("Sheet") .toolbar { ToolbarItem(placement: .topBarTrailing) { Menu { Button("Option A") { } Button("Option B") { } } label: { Image(systemName: "arrow.up.arrow.down") } } } } } } This behavior is reproducible 100% on device. Is this expected behavior for Menu inside ToolbarItem when presented as a sheet, or a regression in pointer interaction rendering?
Topic: UI Frameworks SubTopic: SwiftUI
0
0
33
2w
.edgesIgnoringSafeArea(.vertical) combined with .tabViewStyle(.page(indexDisplayMode: .never)) causes "Out of Bounds" layout in Xcode 26 / iOS 26 SDK
I am reporting a regression/behavioral change in the SwiftUI layout engine when building with Xcode 26 (iOS 26 SDK). In previous versions (Xcode 15/16 and iOS 17/18 SDKs), a TabView using .tabViewStyle(.page(indexDisplayMode: .never)) correctly respected the coordinate space when combined with .edgesIgnoringSafeArea(.vertical). However, when compiling with the iOS 26 SDK, the internal views of the TabView render "out of bounds," pushing content vertically beyond the intended safe area boundaries and causing UI overlapping/clipping - an abnormal behavior. TabView(selection: $selectedIndex) { ForEach(0..<data.count, id: \.self) { index in nextPreviousHandlerView(id: data[index]) .tag(index) } } .tabViewStyle(.page(indexDisplayMode: .never)) .edgesIgnoringSafeArea(.vertical) // Causes vertical "jump" out of bounds in Xcode 26
0
0
46
2w
TabView inside NavigationStack is abnormal when using Xcode 26
TabView inside NavigationStack is abnormal when using Xcode 26. The y deviation is about 14. But it is right when using Xcode 16.4. It is also right without NavigationStack. import SwiftUI struct ContentView: View { private enum Tab: Hashable, CaseIterable { case a case b } @State private var currentTab: Tab = .a @State private var path: NavigationPath = NavigationPath() var body: some View { NavigationStack(path: $path) { TabView(selection: $currentTab) { ForEach(Tab.allCases, id: \.self) { tab in switch tab { case .a: Color.blue // .offset(y: -14) case .b: Color.yellow } } } .tabViewStyle(.page(indexDisplayMode: .never)) .ignoresSafeArea(.all) } } }
Topic: UI Frameworks SubTopic: SwiftUI
0
0
46
2w
Internal inconsistency in menus - menu warnings...
I get warnings like this on each project I build while debugging.. Internal inconsistency in menus - menu <NSMenu: 0x8b4b49ec0> Title: Help Supermenu: 0x8b4b49f80 (Main Menu), autoenable: YES Previous menu: 0x0 (None) Next menu: 0x0 (None) Items: ( "<NSMenuItem: 0x8b5771720 Metal4C Help, ke='Command-?'>" ) believes it has <NSMenu: 0x8b4b49f80> Title: Main Menu Supermenu: 0x0 (None), autoenable: YES Previous menu: 0x0 (None) Next menu: 0x0 (None) Items: ( ) as a supermenu, but the supermenu does not seem to have any item with that submenu What am I doing wrong? I get these errors even if I create a default app with no code?
Topic: UI Frameworks SubTopic: AppKit
3
0
97
2w
Smooth appearance switching
Hello every developers. I need your help. Do you know how to attach animation to appearance, like a smooth transition from dark to light and vise versa. My code here: @main struct The_Library_of_BabelonApp: App { @AppStorage("selectedAppearance") private var selectedAppearance = 0 @StateObject private var router = AppRouter() var scheme: ColorScheme? { if selectedAppearance == 1 { return .light } if selectedAppearance == 2 { return .dark } return nil } var body: some Scene { WindowGroup { RootView() .preferredColorScheme(scheme) .environmentObject(router) // this is doesn't work correctly .animation(.smooth(duration: 2), value: selectedAppearance) } } } And my appearance switching looks: struct SettingsView: View { @AppStorage("selectedAppearance") private var selectedAppearance = 0 var body: some View { List { Section(header: Text("Appearance")) { HStack(spacing: 20) { ThemePreview(title: "Light", imageName: "lightTheme", tag: 1, selection: $selectedAppearance) ThemePreview(title: "Dark", imageName: "darkTheme", tag: 2, selection: $selectedAppearance) ThemePreview(title: "System", imageName: "systemMode", tag: 0, selection: $selectedAppearance) } .padding(.vertical, 10) .frame(maxWidth: .infinity) } } } } struct ThemePreview: View { let title: String let imageName: String let tag: Int @Binding var selection: Int var body: some View { Button { selection = tag } label: { VStack { Image(imageName) .resizable() .aspectRatio(contentMode: .fill) .frame(width: 120, height: 80) .clipShape(RoundedRectangle(cornerRadius: 12)) .overlay( RoundedRectangle(cornerRadius: 12) .stroke(selection == tag ? Color.blue : Color.clear, lineWidth: 3) ) Text(title) .font(.caption) .foregroundColor(selection == tag ? .blue : .primary) } } .buttonStyle(.plain) } } I guess my code works but animation working another way, its turn my Section, I don't know.... Thank you in advance
1
0
50
2w
ControlWidgetToggle image design
I need help designing the image of a ControlWidgetToggle. do I understand correctly that I can only use an SFSymbol as image and not my custom image (unless setup via a custom SFSymbol)? is there any way I can influence the size of the image? I tried multiple SwiftUI modifiers (.imageScale, .font, .resizable, .controlSize) none of them seem to work. My image remains too tiny the image size of the on and off state is different. Seems to be enforced by the system. Is there any way to make both images use the same size? the on-state tints the image. Is there a way to set the tint color? .tint and .foregroundstyle seem to be ignored. Thank you for your help
1
0
83
2w
Basics - Dice Demo, calculate total score
I've worked through Apple's dice demo for SwiftUI, so far so good. I've got a single Die view with a button to "roll" the die. This works perfectly using the code below: struct DieView: View { init(dieType: DieType) { self.dieValue = Int.random(in: 1...dieType.rawValue) self.dieType = dieType } @State private var dieValue: Int @State private var dieType: DieType var body: some View { VStack { if self.dieType == DieType.D6 { Image(systemName: "die.face.\(dieValue)") .resizable() .frame(width: 100, height: 100) .padding() } else {//self.dieType == DieType.D12{ Text("\(self.dieValue)") .font(.largeTitle) } Button("Roll"){ withAnimation{ dieValue = Int.random(in: 1...dieType.rawValue) } } .buttonStyle(.bordered) } Spacer() } } Now I want to do a DiceSetView with an arbitrary number of dice. I've got the UI working with the following; struct DiceSetView: View { @State private var totalScore: Int = 0 var body: some View { ScrollView(.horizontal) { HStack{ DieView(dieType: DieType.D6) DieView(dieType: DieType.D6) DieView(dieType: DieType.D6) } } HStack{ Button("Roll All"){} .buttonStyle(.bordered) Text("Score \(totalScore)") .font(.callout) } Spacer() } } Where I'm struggling is how to get the total of all the dice in a set and to roll all the dice in a set on a button click. I can't iterate through the dice, and just "click" the buttons in the child views from their parents, and I can't think how it should be structured to achieve this (I'm new to this style of programming!) - can anyone point me in the right direction for how to achieve what I want? I realise that I'm probably missing something fundamentally conceptual here....
Topic: UI Frameworks SubTopic: SwiftUI
0
0
27
2w
Basic question - dice demo project - get all values / roll all
I'm sure this is a basic question, but I'm new to this style of development, so thought Id ask... I've worked through Apple's dice roller demo, so far so good - I'm using the code below to render and roll a single die; struct DieView: View { init(dieType: DieType) { self.dieValue = Int.random(in: 1...dieType.rawValue) self.dieType = dieType } @State private var dieValue: Int @State private var dieType: DieType var body: some View { VStack { if self.dieType == DieType.D6 { Image(systemName: "die.face.\(dieValue)") .resizable() .frame(width: 100, height: 100) .padding() } else { Text("\(self.dieValue)") .font(.largeTitle) } } Button("Roll"){ withAnimation{ dieValue = Int.random(in: 1...dieType.rawValue) } } .buttonStyle(.bordered) Spacer() } } Again, so far so good - works as I'd expect. I can now also add multiple DieViews to a DiceSetView and they display as I'd expect. Where I'm stuck is in the DiceSetView, I want to both determine the total score across the dice, and also offer the ability to Roll All the dice in a set. (Ultimately I want another level above the set, so I'll be looking to roll all dice in all sets) I can't simply call a func / method on the child view (i.e. iterate through them and sum their values, and roll each), I suspect I need to change how it's all structured, but not sure where to go from here... Can anyone point me in the right direction?
Topic: UI Frameworks SubTopic: SwiftUI
0
0
24
2w
Button in ToolbarItem is not completely tapable on iOS 26
I have an icon button in toolbar but only the icon is triggering tap events while outside icon button gives tap feedback but event is not firing. Code: ToolbarItem(placement: .navigationBarTrailing) { Button(action: toggleBookmark) { Image(systemName: isBookmarked ? "bookmark.fill" : "bookmark") .resizable() .aspectRatio(0.8, contentMode: .fit) .frame(width: 20, height: 20) } } Here toggleBookmark function is only called if I click on Image but not if I click outside image but on the circular button that appears on iOS 26. See this screen recording.
Topic: UI Frameworks SubTopic: SwiftUI
5
1
118
2w
How to setup UIApplicationDelegate that uses UIScenes for mirroring with AirPlay
Hi! I am developing a game for iOS using Objective-C and C++. I am trying to migrate an app to scene-based life cycle, but having a problem while mirroring screen from iPhone to MacBook using AirPlay. At this moment I don't want to implement multi-window (or multi-scene) support. The only thing I want is to have ability of screen mirroring. From the documentation from here and here I can't understand which UISceneConfiguration should I return. If I define a UIWindowSceneDelegate for the configuration, how should I handle scene:willConnectToSession:options: if the window has been already created for main device screen? Returning nil is not documented. Is there any examples? Also, I would expect that defining UIApplicationSupportsMultipleScenes to NO in Info.plist will automatically disable second scene creating. This is mentioned in documentation here, but this is not true, because I still see second scene creation (its pointer differs from one that was already created) in UIWindowSceneDelegate. What am I doing wrong? Any hints are highly appreciated!
Topic: UI Frameworks SubTopic: UIKit
4
0
104
2w
Menu in the bottom bar flies to the top of the screen
I have a Menu in a Toolbar (specifically, the .bottomBar). If I open the menu quickly after it appears (within a few seconds), it flies to the top of the screen. I've created a minimum woking example below. This appears to be a pretty glaring iOS 26 bug that has been present since the early betas, but I can't seem to find much discussion about it (apart from this post from 8 months ago), so I'm wondering if I might be doing something wrong. Or maybe someone managed to figure out a workaround. If the Menu is very simple (just Text items), it seems to be okay. But if the Menu is even slightly complex (e.g. includes icons), then it exhibits the flying behavior. I've also been able to reproduce this bug under different types of navigation component (e.g. NavigationSplitView). I'm seeing this behavior in the current version of iOS (26.2.1), both on device and in the simulator. MWE struct ContentView: View { var body: some View { NavigationStack { VStack { NavigationLink("Go to Detail") { DetailView() } } .navigationTitle("Root") } } } struct DetailView: View { var body: some View { VStack { Text("Detail View") } .navigationTitle("Detail") .navigationBarTitleDisplayMode(.inline) .toolbar { ToolbarItem(placement: .bottomBar) { Menu { Button { } label: { Label("Delete", systemImage: "trash") } } label: { Image(systemName: "ellipsis.circle") } } } } }
Topic: UI Frameworks SubTopic: SwiftUI
2
1
91
2w
safeArea access in XCode 26, iOS 26
Hi. In my project, I use the following property to access the safe area via UIApplication: UIApplication .shared .connectedScenes .flatMap { ($0 as? UIWindowScene)?.windows ?? [] } .first { $0.isKeyWindow }?.safeAreaInsets However, in Xcode 26 and iOS 26, this no longer works, and in some cases the app crashes. Views that rely on this property stop behaving as expected. For example, if it’s a sheet, it does not appear. The same app built with Xcode 16 and distributed via TestFlight runs on iOS 26 without any issues. What is the correct and safe way to obtain safeAreaInsets outside of a View now?
Topic: UI Frameworks SubTopic: SwiftUI
0
1
80
2w
Swiftui Map Leagal Text is transformed when rotationEffect is applied to Map
I have a problem when applying rotationEffect to a map in in SwiftUI. The legal text in the map is transformed as shown in this image: The following code is part of a much larger and complex view; it is a minimal example to reproduce the error: import SwiftUI import MapKit struct ContentView: View { @State private var offset = CGSize.zero var body: some View { ZStack { let drag = DragGesture() .onChanged { g in offset.width = g.translation.width offset.height = g.translation.height } Map(interactionModes: [.zoom]) .frame(width: 320, height: 220) .rotationEffect(.degrees(Double(offset.width / 12))) .highPriorityGesture(drag) } } } I hope you can help me with this problem.
1
0
41
2w
The Nightmare of Small Toolbar Icons
When building in Xcode on MacOS Tahoe, it seems it is no longer possible to dynamically specify a "small" size toolbar for NSToolbar/NSToolbarItem. It works in MacOS code compiled and linked on earlier systems. I don't want to use "SFSymbol", or "templates". I have over 60 custom-made .png toolbars, in individual Image Set files, at the previous requisite sizes of 24x24 / 48x48, and 32x32 / 64x64. Sure -- I can configure an NSToolbar with whatever size .png assets I want. I just can't dynamically switch between the two groups of sizes. According to the Apple Coding Assistant, the only solution is to change the image names of each of the NSToolbarItems at runtime. OK -- but even when attempting that, the NSToolbarItems refuse to take on their smaller size... ...unless: they are attached to a custom view NSToolbarItem with an NSButton of style "Bevel". I have about 10 of those, and YES -- I CAN change those to a "small" size. Is this REALLY what I'm forced to do?! The Apple Coding Assistant just runs me around in circles, making coding suggestions that include properties that don't exists. I've gone around and around on these issues for over a week -- it can't be this hard, right? Is there no way to make multiple NSToolbar objects, one for "large" and one for "small"?
1
0
119
2w
How to align views in a LazyVGrid to a common base-line?
I have the following snippet (but you can see my entire code in GitHub, if you want): LazyVGrid(columns: columns) { ForEach(books) { book in BookView(book: book) .draggable(Book.BookTransferable(persistanceIdentifier: book.id)) } } and BookView is: VStack { Image(nsImage: book.image) .resizable() .frame(width: 150, height: 200) .scaledToFill() Text(book.title) .lineLimit(1) .font(.headline) HStack { ForEach(book.tags.sorted(), id: \.self) { tag in TagView(tag: tag, showText: false) } } } .padding() This will render each BookView on a different base-line because of the fact that the Text view sometimes takes 1, 2 or even 3 lines (as shown). How can I have all BookViews alligned at a common base-line (as it would if Text would only take one line, for example)?
0
0
46
2w
SwiftUI toolbar items clip DocumentGroup rename affordance
Hi — I’m seeing the DocumentGroup rename/title affordance get clipped on iPad when I populate the navigation bar with SwiftUI toolbar items in .topBarLeading, .principal, and .topBarTrailing (trailing is an HStack of controls). Example: .toolbar { ToolbarItem(placement: .topBarLeading) { UndoRedoControlsView(...) } ToolbarItem(placement: .principal) { Text(canvasInfoTitle).lineLimit(1) } ToolbarItem(placement: .topBarTrailing) { HStack { ... } } } .navigationBarTitleDisplayMode(.inline) Is there a recommended way to structure toolbar content so the system’s document title/rename control always has space (or a way to reserve space / avoid clipping), short of removing .principal or moving items into menus?
Topic: UI Frameworks SubTopic: SwiftUI
0
0
35
2w