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

Task cancellation behaviour
Hi everyone, I believe this should be a simple and expected default behavior in a real-world app, but I’m unable to make it work: 1. I have a View (a screen/page in this case) that calls an endpoint using async/await. 2. If the endpoint hasn’t finished, but I navigate forward to a DetailView, I want the endpoint to continue fetching data (i.e., inside the @StateObject ViewModel that the View owns). This way, when I go back, the View will have refreshed with the fetched data once it completes. 3. If the endpoint hasn’t finished and I navigate back to the previous screen, I want it to be canceled, and the @StateObject ViewModel should be deinitialized. I can achieve 1 and 3 using the .task modifier, since it automatically cancels the asynchronous task when the view disappears: view .task { await vm.getData() } I can achieve 1 and 2 using a structured Task in the View (or in the ViewModel, its the same behavior), for example: .onFirstAppearOnly { Task { away vm.getData() } } onFirstAppearOnly is a custom modifier that I have for calling onAppear only once in view lifecycle. Just to clarify, dont think that part is important for the purpose of the example But the question is: How can I achieve all three behaviors? Is this really such an unusual requirement? My minimum deployment target is iOS 15, and I’m using NavigationView + NavigationLink. However, I have also tried using NavigationStack + NavigationPath and still couldn’t get it to work. Any help would be much appreciated. Thank you, folks!
0
0
398
Feb ’25
How do you make buttons inline with each other?
I want to make my buttons inline with each other, but spaced apart, a bit like the apple topbar BUT in swift. My code: struct NormalPageView: View { var body: some View { VStack { NavigationView { Form { Section { Image(systemName: "house.fill") Spacer() Image(systemName: "plus") Spacer() Image(systemName: "gearshape.fill") } } }
1
0
348
Jan ’25
How to solve "Extra trailing closure passed in call" in a section?
Hey there, I'm new to Swift and currently building my first app. I'm having the error "Extra trailing closure passed in call" in a section and already compared it to working sections and just can't find the error in my code. Maybe you guys can help me: Form { Section("Essential Information") { TextField("Title", text: $title) TextField("Composer", text: $composer) TextField("Opus", text: $opus) } The error is occurring in the section line. There are over sections that work perfectly fine: Section("Additional Details") { TextField("Epoch", text: $epoch) TextField("Type", text: $type) TextField("Accompaniment", text: $accompaniment) TextField("Length (minutes)", value: $length, format: .number) .keyboardType(.numberPad) TextField("Key", text: $key) TextField("Difficulty", text: $difficulty) TextField("Tempo (BPM)", value: $tempo, format: .number) .keyboardType(.numberPad) }
Topic: UI Frameworks SubTopic: SwiftUI
2
0
338
Feb ’25
Conflict between offerCodeRedemption and Camera
Hello, I implemented offerCodeRedemption recently on my app in my subscription/onboarding flow. When I did, it broke my camera functionality (elsewhere in the app; totally unrelated code). I was able to fix the issue when implementing the old "AppStore.presentOfferCodeRedeemSheet" code with UIKit. I'm not sure why this is happening, but it seemed like a bug to me.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
138
Feb ’25
TextField.preferesDefaultFocus does not work in alerts
Hi, I am having trouble setting default focus on a TextField that is inside of an alert. I expected TextField to receive default focus when alert is presented but result is that TextField does not receive default focus. This is happening on macOS 15.2, Swift (SwiftUI), Xcode 16.2 but hasn't worked on previous versions as well. Example: ContentView().alert("Sample Alert", isPresented: $present) { AlertView() } message: { Text("Sample alert message.") } struct AlertView: View { @Namespace private var namespace @Environment(\.dismiss) private var dismiss @State private var text = "" var body: some View { VStack { TextField(text: $text, prompt: Text("Enter text")) {} .onSubmit { var _ = print(text) dismiss() } .autocorrectionDisabled() .lineLimit(1) .prefersDefaultFocus(in: namespace) Button("OK") { dismiss() } Button("Cancel", role: .cancel) { dismiss() } } .focusScope(namespace) } }
Topic: UI Frameworks SubTopic: SwiftUI
1
0
205
Jan ’25
TextField .alignmentGuide in Form leading point varies?
I have a Form with a custom TextField which uses a custom Text(). When I use .alignmentGuide on the Text() it seems the origin reference point varies with the length of, but not by the length of, the TextField label String. This is a problem when in a Form. My workaround has been to not use a TextField label but enclose the each TextField in a LabeledContent and then I can set the width of the label and align off of that. How does Form cause TextField to set it's width and why if using .alignmentGuide on Text() does the TextField label length even matter?
Topic: UI Frameworks SubTopic: SwiftUI
1
0
226
Feb ’25
My SwiftUI menu item renders differently in a MenuBarExtra / NSStatusBar
Hi, I'm working on an app that will mostly live in the menu bar. I'm trying to make a menu item that looks similar to the Tailscale app's menu: Note: I'm inspired by how Tailscale's menu is rendered: I have made a View that shows my avatar, name, and optionally the company I work for: import SwiftUI struct MenuWhoAmI: View { var username: String var binding: String? var body: some View { HStack { AsyncImage(url: URL(string: "https://avatars.githubusercontent.com/u/76716")!){ image in image.resizable().scaledToFit() } placeholder: { ProgressView() } .clipShape(Circle()) VStack(alignment: .leading) { Text(username) if let binding = binding { Text("\(binding)").foregroundStyle(.secondary) } } } } } #Preview { VStack(alignment: .leading) { MenuWhoAmI(username: "grahamc").padding() Divider() MenuWhoAmI(username: "grahamc", binding: "DeterminateSystems").padding() }.padding() } I tried using it in my menu bar: import SwiftUI @main struct DeterminateApp: App { var body: some Scene { MenuBarExtra("Determinate", image: "MenuIcon") { MenuWhoAmI(username: "grahamc") Button("Two") {} Button("Three") {} Divider() Button("Quit") { NSApplication.shared.terminate(nil) }.keyboardShortcut("q") }.menuBarExtraStyle(.menu) } } and it renders differently: After reading the forums and documentation, I understood the MenuBarExtra only renders certain elements. I then tried to use an NSStatusBar with an AppDelegate: import AppKit import SwiftUI @main struct DeterminateApp: App { @NSApplicationDelegateAdaptor private var appDelegate: AppDelegate var body: some Scene { Window("Authentication", id: "login") {} } } class AppDelegate: NSObject, NSApplicationDelegate, ObservableObject { private var statusItem: NSStatusItem! func applicationDidFinishLaunching(_ notification: Notification) { statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength) if let button = statusItem.button { button.image = NSImage(named: NSImage.Name("MenuIcon")) } statusItem.menu = NSHostingMenu(rootView: Group { Button(action: { print("hi") }) { MenuWhoAmI(username: "grahamc") } }) } } and still, the avatar/name doesn't render like I'd expect, missing the circle clipping: ...and I'm a bit mystified. How can I make this menu render the way I'm trying for? Thank you!
1
0
505
Jan ’25
Reduce padding, spacing between list section header and search bar
Anyone know how to reduce the padding between list section header (plain style) and search bar? I have tried all available method on google but none work. The default list style does not have this big padding/space between the section header and the search bar. struct Demo: View { @State private var searchText: String = "" var body: some View { NavigationStack { List { Section { ForEach(0..<100) { index in Text("Sample value for \(index)") } } header: { Text("Header") .font(.headline) } } .listStyle(.plain) .navigationTitle("Demo") .navigationBarTitleDisplayMode(.inline) .searchable(text: $searchText) } } }
0
0
234
Feb ’25
IOS 18 uses TextKit to calculate the height of attributed strings, but the calculation is inaccurate.
In iOS 18, using TextKit to calculate the height of attributed strings is inaccurate. The same method produces correct results in systems below iOS 18. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(20, 40, 100, 0)]; textView.editable = NO; textView.scrollEnabled = NO; textView.textContainerInset = UIEdgeInsetsMake(0, 0, 0, 0); textView.textContainer.lineFragmentPadding = 0; textView.backgroundColor = [UIColor lightGrayColor]; [self.view addSubview:textView]; NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@"陈家坝好吃的撒海程邦达不差大撒把传达是吧才打卡吃吧金卡多措并举哈不好吃大杯茶十八次是吧"]; NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; paragraphStyle.lineSpacing = 4; [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, attributedString.length)]; [attributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:16] range:NSMakeRange(0, attributedString.length)]; [attributedString addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, attributedString.length)]; textView.attributedText = attributedString; CGFloat height = [self test:attributedString]; textView.frame = CGRectMake(20, 40, 100, height); } - (CGFloat)test:(NSAttributedString *)attString { // 创建 NSTextStorage 并设定文本内容 NSTextStorage *textStorage = [[NSTextStorage alloc] initWithAttributedString:attString]; // 创建 NSLayoutManager 并关联 NSTextStorage NSLayoutManager *layoutManager = [[NSLayoutManager alloc] init]; [textStorage addLayoutManager:layoutManager]; // 创建 NSTextContainer 并设定其属性 NSTextContainer *textContainer = [[NSTextContainer alloc] initWithSize:CGSizeMake(100, CGFLOAT_MAX)]; textContainer.lineFragmentPadding = 0; [layoutManager addTextContainer:textContainer]; // 强制布局管理器计算布局 [layoutManager ensureLayoutForTextContainer:textContainer]; // 获取文本内容所占的高度 CGFloat height = [layoutManager usedRectForTextContainer:textContainer].size.height; // 返回四舍五入高度 return ceil(height); }
Topic: UI Frameworks SubTopic: UIKit Tags:
1
0
918
Dec ’24
Foundation _userInfoForFileAndLine crash
Could anyone give some insights to identify the root cause for this crash? Fatal Exception: NSInternalInconsistencyException Layout requested for visible navigation bar, <UINavigationBar: 0x120e74280; frame = (0 0; 430 56); autoresize = W; tintColor = <UIDynamicProviderColor: 0x300488b20; provider = <__NSMallocBlock__: 0x300a60900>>; layer = <CALayer: 0x3000f0380>> delegate=0x1277a4600 standardAppearance=0x302d5c770 scrollEdgeAppearance=0x302d5d500, when the top item belongs to a different navigation bar. topItem = <UINavigationItem: 0x10a7d8500> title='Transfers' style=navigator leftBarButtonItems=0x300690020 rightBarButtonItems=0x300613ff0, navigation bar = <UINavigationBar: 0x11a8ef200; frame = (0 0; 430 44); opaque = NO; autoresize = W; layer = <CALayer: 0x3002a44c0>> delegate=0x1277a0c00, possibly from a client attempt to nest wrapped navigation controllers. ==== Fatal Exception: NSInternalInconsistencyException 0 CoreFoundation 0x827cc __exceptionPreprocess 1 libobjc.A.dylib 0x172e4 objc_exception_throw 2 Foundation 0x80f8d8 _userInfoForFileAndLine 3 UIKitCore 0x2b63e8 -[UINavigationBar layoutSubviews] 4 UIKitCore 0xd688 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] 5 UIKitCore 0x14dc14 -[UINavigationBar layoutSublayersOfLayer:] 6 QuartzCore 0x78c28 CA::Layer::layout_if_needed(CA::Transaction*) 7 QuartzCore 0x787b4 CA::Layer::layout_and_display_if_needed(CA::Transaction*) 8 QuartzCore 0xcf914 CA::Context::commit_transaction(CA::Transaction*, double, double*) 9 QuartzCore 0x4e7c4 CA::Transaction::commit() 10 QuartzCore 0x91a0c CA::Transaction::flush_as_runloop_observer(bool) 11 UIKitCore 0xa3568 _UIApplicationFlushCATransaction 12 UIKitCore 0xa0b64 __setupUpdateSequence_block_invoke_2 13 UIKitCore 0xa09d8 _UIUpdateSequenceRun 14 UIKitCore 0xa0628 schedulerStepScheduledMainSection 15 UIKitCore 0xa159c runloopSourceCallback 16 CoreFoundation 0x56328 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ 17 CoreFoundation 0x562bc __CFRunLoopDoSource0 18 CoreFoundation 0x53dc0 __CFRunLoopDoSources0 19 CoreFoundation 0x52fbc __CFRunLoopRun 20 CoreFoundation 0x52830 CFRunLoopRunSpecific 21 GraphicsServices 0x11c4 GSEventRunModal 22 UIKitCore 0x3d2eb0 -[UIApplication _run] 23 UIKitCore 0x4815b4 UIApplicationMain 24 XX 0xa0f64 main + 7 (main.m:7) 25 ??? 0x1abb6eec8 (Missing)
1
0
1k
Jan ’25
Adding a Label with UIImage and Text to the TabSection Header in tvOS 18+
I've been trying to add a header to the tabSection of the tabview in tvos 18+ . init( @TabContentBuilder<SelectionValue> content: () -> Content, @ViewBuilder header: () -> Header ) where Header : View, Footer == EmptyView Here the ehader clearly conforms to View but i cant quite fit the label with uiimage as the icon into this. This Label when i add it to any other view, the image is in the specified 50 x 50 size but inside header it functions weirdly to be of a huge size. but also to note, if i simply hav an icon here, it is correct. So what is the problem here.. can someone help me? im supposed to add the user profile and name in the header. I dont think there's any other way
Topic: UI Frameworks SubTopic: SwiftUI Tags:
0
0
352
Jan ’25
Widget archival failed due to image being too large
I'm trying to setup a widget to pull an image down from a webserver and I'm running into an error of Widget archival failed due to image being too large [9] - (1024, 1024), totalArea: 1048576 > max[718080.000000]. I've tried two different approaches to resolve this error and both have failed to resolve the image. I've also confirmed that I'm getting the image in the AppIntentTimelineProvider. private func getImageUI(urlString: String) -> UIImage? { guard let url = URL(string: urlString) else { return nil } guard let imageData = try? Data(contentsOf: url) else { return nil } return UIImage(data: imageData)?.resizedForWidget() } Is there another approach I could take on addressing this issue so the image appears on the widget? Simple approach extension UIImage { func resized(toWidth width: CGFloat, isOpaque: Bool = true) -> UIImage? { let canvas = CGSize(width: width, height: CGFloat(ceil(width/size.width * size.height))) let format = imageRendererFormat format.opaque = isOpaque return UIGraphicsImageRenderer(size: canvas, format: format).image { _ in draw(in: CGRect(origin: .zero, size: canvas)) } } } extension UIImage { /// Resize the image to strictly fit within WidgetKit’s max allowed pixel area (718,080 pixels) func resizedForWidget(maxArea: CGFloat = 718_080.0, isOpaque: Bool = true) -> UIImage? { let originalWidth = size.width let originalHeight = size.height let originalArea = originalWidth * originalHeight print("🔍 Original Image Size: \(originalWidth)x\(originalHeight) → Total Pixels: \(originalArea)") // ✅ If the image is already within the limit, return as is if originalArea <= maxArea { print("✅ Image is already within the allowed area.") return self } // 🔄 Calculate the exact scale factor to fit within maxArea let scaleFactor = sqrt(maxArea / originalArea) let newWidth = floor(originalWidth * scaleFactor) // Use `floor` to ensure area is always within limits let newHeight = floor(originalHeight * scaleFactor) let newSize = CGSize(width: newWidth, height: newHeight) print("🛠 Resizing Image: \(originalWidth)x\(originalHeight) → \(newWidth)x\(newHeight)") // ✅ Force bitmap rendering to ensure the resized image is properly stored let format = UIGraphicsImageRendererFormat() format.opaque = isOpaque format.scale = 1 // Ensures we are not letting UIKit auto-scale it back up let renderer = UIGraphicsImageRenderer(size: newSize, format: format) let resizedImage = renderer.image { _ in self.draw(in: CGRect(origin: .zero, size: newSize)) } print("✅ Final Resized Image Size: \(resizedImage.size), Total Pixels: \(resizedImage.size.width * resizedImage.size.height)") return resizedImage } } These are logs from a failed image render if that helps 🔍 Original Image Size: 720.0x1280.0 → Total Pixels: 921600.0 🛠 Resizing Image: 720.0x1280.0 → 635.0x1129.0 ✅ Final Resized Image Size: (635.0, 1129.0), Total Pixels: 716915.0
1
0
489
Feb ’25
learning coregraphics help: connecting line to circles
Hi everyone, im in the process of delving more into coregraphics with swiftui, but I am at a roadblock. First I would like to ask, what are some good resources to learn coregraphics? Secondly: I currently have a circle view made and what I want to do is to make my circle view modular so that it can be directly connected to another given circle by a line. How can I do this? For example, I want my circles to represent nodes and be able to connect by lines to other nodes that are related. Thanks in advanced. Here is my code for the circle view: @State private var circleProgress: CGFloat = 0 let timer = Timer.publish(every: 0.016, on: .main, in: .common).autoconnect() private let animationDuration: TimeInterval = 1.5 @Binding var startPoint: CGPoint @Binding var endPoint: CGPoint var body: some View { GeometryReader { geometry in Canvas { context, size in // Circle parameters let circleSize: CGFloat = 50 let circleOrigin = CGPoint( x: size.width / 4, y: size.height / 2 - circleSize / 2 ) let circleRect = CGRect( origin: circleOrigin, size: CGSize(width: circleSize, height: circleSize) ) let circleCenter = CGPoint( x: circleOrigin.x + circleSize / 2, y: circleOrigin.y + circleSize / 2 ) // Animate circle creation var circlePath = Path() circlePath.addArc( center: circleCenter, radius: circleSize / 2, startAngle: .degrees(0), endAngle: .degrees(360 * circleProgress), clockwise: false ) context.addFilter(.shadow(color: .white.opacity(0.6), radius: 5, x: 1, y: 1)) // Add white shadow context.stroke( circlePath, with: .linearGradient( Gradient(colors: [.purple, .white]), startPoint: circleRect.origin, endPoint: CGPoint(x: circleRect.maxX, y: circleRect.maxY) ), lineWidth: 5 ) } .frame(width: 300, height: 150) .onReceive(timer) { _ in // Update circle progress let progressChange = 0.02 / animationDuration if circleProgress < 1.0 { circleProgress = min(circleProgress + progressChange, 1.0) } else { circleProgress = 0.0 // Reset the circle to repeat the animation } // Get the starting and ending points of the Canvas view startPoint = CGPoint(x: geometry.frame(in: .global).minX, y: geometry.frame(in: .global).minY) endPoint = CGPoint(x: geometry.frame(in: .global).maxX, y: geometry.frame(in: .global).maxY) // Print the points for debugging print("Start Point: \(startPoint.x), \(startPoint.y)") print("End Point: \(endPoint.x), \(endPoint.y)") } } .frame(width: 300, height: 150) } }
1
0
543
Jan ’25
Embedding a NavigationSplitView inside a NavigationStack
Embedding a NavigationStack inside the detail view of a NavigationSplitView is described by the Apple documentation: https://developer.apple.com/documentation/swiftui/navigationsplitview However, I would like to do the opposite: embedding a NavigationSplitView inside a NavigationStack. I have found no hint in the documentation about why this shouldn't be possible, but it does not appear to be working consistently. There are many use cases where you might want to do this. E.g. you have an eBook reader that starts with a list of books (e.g. a Grid inside a NavigationStack), and when you open a book, you end up in a NavigationSplitView showing the chapter hierarchy in a sidebar. Here, you wouldn't want to have the list of books as a second sidebar, but would want an option to go back to the list of books at any time. The following trivial example correctly displays a NavigationSplitView on iPadOS, but results in an empty view on iOS: NavigationStack { NavigationSplitView { List { Text("Element1") Text("Element2") } } detail: { Text("Detail") } } Is there a workaround?
Topic: UI Frameworks SubTopic: SwiftUI
2
0
291
Feb ’25
Validate drag operations with Transferable
Let's say I want to build a simple photo management app on Mac or iPad with Swift UI. This app has multi-window support. My photos are organized inside albums. I should be able to drag photos between windows from one album to another. I struggle to get this working properly with Swift UI. Writing modern code I would like to use Transferable. Let's say my photos are not real files. So I can't use a FileRepresentation. Instead I use CodableRepresentation and encode an identifier. This identifier is later used to drive the move operation between folders. I ran into some limitations here Transferable seems to be meant for copy-like Drag & Drop operations. I have no possible to get a "move" cursor on macOS (it's always the copy cursor with the green + sign). Also the API reads like it is about importing/exporting – not moving. When using dropDestination on ForEach, I completely lack the possibility to deny a drop (e.g. when a photo is already part of the album). I'd like to have modifier key to switch between copying and moving. Sometimes a drop should be redirected to a different index. How to do that? Is there any chance to do this with Transferable? It even doesn't seem to be easy with NSItemProvider and onDrop/onDrag? Or should we still use a plain old UICollectionView/NSCollectionView, if we want to have more sophisticated control over drag/drop validation?
4
0
442
Jan ’25
Unrealistically high snowfall amounts being reported by WeatherKit
I filed FB16332997 about the VERY high snowfall estimates I'm seeing in WeatherKit and iOS Weather. I initially thought something was wrong with my weather app but I verified the numbers with the iOS Weather app and another third party weather app. For Atlanta last week it was saying 7.5" when it ended up being 2" (which I can live with). Two days ago it reported there could be 16" of snow in northern Florida. That's impossible! This morning it was reporting that Niceville could have 6-7" of snow, which would be significantly more than highest amount in recorded history for Florida (where snow is extremely rare). It almost makes me wonder if the liquid precipitation value is actually the snowfall amount in reality. And then that is incorrectly being converted to the snowfall amount.
2
0
427
Jan ’25
How do I obtain the preview image for a PDF?
I have a SwiftUI view of the form struct ContentView: View { // ... .onDrop(of: [.pdf], isTargeted: $isDropTargeted) { pdfs in for pdf in pdfs { I'm just not sure what to do next, I see there's a loadPreviewImage() that if I use like: Task.detached { // returns any NSSecureCoding object let image = try! await pdf.loadPreviewImage() } Not sure how I'm supposed to get my preview image from that NSSecureCoding object
Topic: UI Frameworks SubTopic: SwiftUI
0
0
233
Jan ’25
view controller life cycle bug in xcode 16 ios 18
hi does any one know if there changes in lifecycle in xcode 16 ios 18 cause i notice that my view will appear does what view didappear use to do in older version and it kind of a problem cause all the rest of ios work diffrently does anyone else found a problem with it? or does anyone know if there was a known change to life cycles
0
0
429
Jan ’25