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

How to determine the default duration of a long-press
Using gesture recognizers it is easy to implement a long-press gesture to open a menu, show a preview or something else on the iOS platform. And you can provide the duration the user must hold down the finger until the gesture recognizer fires. But I could not yet find out how to determine the default duration for a long-press gesture that is configured in the system settings within the "accessibility" settings under "Haptic Touch" (the available options are fast, standard and slow here). Is it possible to read out this setting, so my App can adapt to this system setting as well?
1
0
356
Jan ’25
TextField using numberPad shows incorrectly shows autofill for one time code
If I show a textfield in my app and set nothing else on it but the following, The keyboard will show an autofill suggestion from a password manager for a one time code. textField.keyboardType = .numberPad In this case, the text field is for typing in a count, so iOS suggesting to autofill a one time code is incorrect. Setting textField.textContentType to nil has no affect on the behaviour. Prerequisites to reproduce an app with an associated domain an entry in a password manager with a one time code for the domain a textfield with keyboardType set to numberPad
Topic: UI Frameworks SubTopic: UIKit Tags:
2
0
657
Feb ’25
iPadOS 18 App (on Apple Silicon) - Duplicate Tab Bar Appearing in Toolbar
With iPadOS 18, the UITabBar now defaults to the floating style. I successfully reverted the tab bar to its traditional style by overriding the UITabBarController's horizontalSizeClass property: self.tabBarController?.traitOverrides.horizontalSizeClass = .unspecified When I launch the app on my Mac using Apple Silicon, TWO tab bars appear: One appears at the bottom of the screen, like a traditional tab bar. The second tab bar is still embedded in the app toolbar in its floating style. Is this a bug? How do you ensure that overriding the horizontalSizeClass will remove/hide the floating tab bar when running an app on Apple Silicon? TIA! (Demonstrated on a test project)
0
0
484
Jan ’25
.sheet or .fullScreenSheet Looping when presenting Image Picker on visionOS
I am having issues with my app on visionOS. It works fine on iOS. The app is presenting a ImagePicker, I had tried converting to PhotoPicker and the behavior did not change. The relevant code is in the EditGreetingCardView - // // Created by Michael Rowe on 1/2/24. // import AVKit import SwiftData import SwiftUI struct EditGreetingCardView: View { @Environment(\.modelContext) private var modelContext @Environment(\.dismiss) private var dismiss @Query(sort: \EventType.eventName) private var events: [EventType] var greetingCard: GreetingCard? private var editorTitle: String { greetingCard == nil ? "Add Greeting Card" : "Edit Greeting Card" } @State var frontImageSelected: Image? = Image("frontImage") @State var sourceType: UIImagePickerController.SourceType = .photoLibrary @State var frontPhoto = false @State var captureFrontImage = false var eventTypePassed: EventType? @State private var eventType: EventType? @State private var cardName = "" @State private var cardManufacturer = "" @State private var cardURL = "" @State private var cardUIImage: UIImage? @State private var cameraNotAuthorized = false @State private var isCameraPresented = false @State private var newEvent = false @AppStorage("walkthrough") var walkthrough = 1 init(eventTypePassed: EventType?) { if let eventTypePassed { _eventType = .init(initialValue: eventTypePassed) } } init(greetingCard: GreetingCard?) { self.greetingCard = greetingCard _eventType = .init(initialValue: greetingCard?.eventType) } var body: some View { NavigationStack { Form { Section("Occasion") { Picker("Select Occasion", selection: $eventType) { Text("Unknown Occasion") .tag(Optional<EventType>.none) //basically added empty tag and it solve the case if events.isEmpty == false { Divider() ForEach(events) { event in Text(event.eventName) .tag(Optional(event)) } } } } .foregroundColor(Color("AccentColor")) Section("Card details") { } .foregroundColor(Color("AccentColor")) Section("Card Image") { HStack(alignment: .center){ Spacer() ZStack { Image(uiImage: cardUIImage ?? UIImage(named: "frontImage")!) .resizable() .aspectRatio(contentMode: .fit) .shadow(radius: 10 ) Image(systemName: "camera.fill") .foregroundColor(.white) .font(.largeTitle) .shadow(radius: 10) .frame(width: 200) .onTapGesture { self.frontPhoto = true } .actionSheet(isPresented: $frontPhoto) { () -> ActionSheet in #if !os(visionOS) ActionSheet( title: Text("Choose mode"), message: Text("Select one."), buttons: [ ActionSheet.Button.default(Text("Camera"), action: { checkCameraAuthorization() self.captureFrontImage.toggle() self.sourceType = .camera }), ActionSheet.Button.default(Text("Photo Library"), action: { self.captureFrontImage.toggle() self.sourceType = .photoLibrary }), ActionSheet.Button.cancel() ] ) #else ActionSheet( title: Text("Choose mode"), message: Text("Select one."), buttons: [ ActionSheet.Button.default(Text("Photo Library"), action: { self.captureFrontImage.toggle() self.sourceType = .photoLibrary }), ActionSheet.Button.cancel() ] ) #endif } .fullScreenCover(isPresented: $captureFrontImage) { #if !os(visionOS) ImagePicker( sourceType: sourceType, image: $frontImageSelected) .interactiveDismissDisabled(true) #else ImagePicker( image: $frontImageSelected) .interactiveDismissDisabled(true) #endif } } .frame(width: 250, height: 250) Spacer() } } } .alert(isPresented: $cameraNotAuthorized) { Alert( title: Text("Unable to access the Camera"), message: Text("To enable access, go to Settings > Privacy > Camera and turn on Camera access for this app."), primaryButton: .default(Text("Settings")) { openSettings() } , secondaryButton: .cancel() ) } .toolbar { } .onAppear { } .onChange(of: frontImageSelected) { oldValue, newValue in cardUIImage = newValue?.asUIImage() } } } }
Topic: UI Frameworks SubTopic: SwiftUI
2
0
278
Feb ’25
SwiftUI Canvas Text - scale to fill rectangle
How do I draw a single line of text in a SwiftUI Canvas, scaled to fill a given rectangle? Example: Canvas { context, size in let r = CGRect(origin: CGPointZero, size: size); // Whole canvas let t = Text("Hello World"); context.draw(t, in: r); } Outside of Canvas I'd add .minimumScaleFactor(0) .lineLimit(1), and I guess set a large default font size, and I'd get the result I want. But inside Canvas, .minimumScaleFactor and .lineLimit don't seem to be available; they return some View, not Text, which can't be used in context.draw. (Is there a trick to make that work?) I have written the following to do this, but I think there must be an easier way to achieve this! Suggestions? extension GraphicsContext { mutating func draw_text_in_rect(string: String, rect: CGRect) { let text = Text(string) .font(.system(size: 25)); // The font size used here does matter, because e.g. letter spacing // varies with the font size. let resolved = resolve(text); let text_size = resolved.measure(in: CGSize(width: CGFloat.infinity, height: CGFloat.infinity)); let text_aspect = text_size.width / text_size.height; let fit_size = CGSize(width: min(rect.size.width, rect.size.height*text_aspect), height: min(rect.size.height, rect.size.width/text_aspect)); let fit_rect = CGRect(x: rect.origin.x + (rect.size.width-fit_size.width)/2, y: rect.origin.y + (rect.size.height-fit_size.height)/2, width: fit_size.width, height: fit_size.height); let scale = fit_size.width / text_size.width; // For debug: // var p = Path(); // p.addRect(fit_rect); // stroke(p, with: GraphicsContext.Shading.color(.red), lineWidth: 1); translateBy(x: fit_rect.minX, y: fit_rect.minY); scaleBy(x:scale, y:scale); draw(resolved, at: CGPointZero, anchor: UnitPoint.topLeading); transform = CGAffineTransformIdentity; } };
0
0
368
Jan ’25
QuickLook Library updated text tampered on PDF
We were using below delegate methods from QuickLook to get modified PDF file URL after the sketching But we are not able see the multi line text properly laid out on PDF and part of text missing. Same time Other pencil kit tools are working as expected. `func previewController(_ controller: QLPreviewController, didSaveEditedCopyOf previewItem: QLPreviewItem, at modifiedContentsURL: URL) func previewController(_ controller: QLPreviewController, didUpdateContentsOf previewItem: any QLPreviewItem)` We tested all code in iOS 18.2. Please let us know if the text edited URL on PDF can be retrieved in any possible way without tampering text
0
0
376
Feb ’25
Crash on Intel during UI layout
We've got a hard to repro issue on Intel only when performing UI layout. It seems the collection view code gets into a recursive loop of doom and eventually the app crashes. This is only happening on Intel, the ARM version is fine. It seems related to this issue: https://developer.apple.com/forums/thread/732580 There an Apple Dev acknowledges that there are issues with the Intel version of the OS. Here's the simplified stack we're seeing: -[NSISEngine _coreReplaceMarker:withMarkerPlusDelta:]" -[NSISEngine constraintDidChangeSuchThatMarker:shouldBeReplacedByMarkerPlusDelta:]", -[NSISEngine tryToChangeConstraintSuchThatMarker:isReplacedByMarkerPlusDelta:undoHandler:]", -[NSLayoutConstraint _tryToChangeContainerGeometryWithUndoHandler:]", -[NSLayoutConstraint _setSymbolicConstant:constant:symbolicConstantMultiplier:]", -[NSLayoutConstraint setConstant:]", -[NSView(NSConstraintBasedLayoutInternal) _updateSimpleAutoresizingConstraintsInPlace:forAutoresizingMask:]", NSViewUpdateConstraintsForFrameChange -[NSView setFrameSize:]", -[NSView setFrame:]", -[NSClipView _updateOverhangSubviewsIfNeeded]", -[NSClipView _reflectDocumentViewFrameChange]", -[NSView _postFrameChangeNotification]"," -[NSView setFrameSize:]", -[NSCollectionView setFrameSize:]", -[NSView setFrame:]", NSViewActuallyUpdateFrameFromLayoutEngine", -[NSView resizeSubviewsWithOldSize:]", -[NSView setFrameSize:]", -[NSClipView setFrameSize:]", -[NSView setFrame:]", -[NSScrollView _setContentViewFrame:]", -[NSScrollView tile]", -[NSScrollView _tileWithoutRecursing]", -[NSScrollView reflectScrolledClipView:]", -[NSClipView _reflectDocumentViewFrameChange]_block_invoke", -[NSClipView _reflectDocumentViewFrameChange]", -[NSView _postFrameChangeNotification]", -[NSView setFrameSize:]", -[NSCollectionView setFrameSize:]", -[NSView setFrame:]", -[NSCollectionView _resizeToFitContentAndClipView]", -[_NSCollectionViewCore setContentSize:]", -[_NSCollectionViewCore _updateVisibleCellsNow:]" -[_NSCollectionViewCore _updateVisibleCellsNow:]" -[_NSCollectionViewCore _updateVisibleCellsNow:]" -[_NSCollectionViewCore _updateVisibleCellsNow:]" . . It seems to be limited to macOS 13.1 too. Hoping someone might have a clue? Thanks, Robert. Here's a link to the full stack: https://www.icloud.com/notes/076h1RXj4rvv7TzS5ICnvG6vw#NSCollectionView_crash_stack:
Topic: UI Frameworks SubTopic: AppKit
0
0
365
Dec ’24
Unexpected Frame Resizing Behavior During Animation of safeAreaInset content.
Hey everyone! I’m encountering an issue while attempting to animate height changes of the content inside safeAreaInset(edge:alignment:spacing:content:). When animating a reduction in the frame height, the container view (in my case, Map) also animates unexpectedly. However, when animating an increase in the frame height, the animation works smoothly, and the Map view remains still. How can I address this odd resizing behavior of the container? Code: struct MapView: View { var body: some View { Map() .safeAreaInset(edge: .bottom) { MapDetailView() } } } struct MapDetailView: View { @State private var oldHeightOffset: CGFloat = 0 @State private var newHeightOffset: CGFloat = 0 @State private var containerHeight: CGFloat = 0 private var drag: some Gesture { DragGesture(coordinateSpace: .global) .onChanged { value in withAnimation(.interactiveSpring) { newHeightOffset = oldHeightOffset + value.translation.height } } .onEnded { value in switch newHeightOffset { case containerHeight * 0.625...containerHeight: withAnimation(.spring) { newHeightOffset = containerHeight * 0.75 } case containerHeight * 0.25..<containerHeight * 0.625: withAnimation(.spring) { newHeightOffset = containerHeight * 0.5 } case 0..<containerHeight * 0.25: withAnimation(.spring) { newHeightOffset = 0 } default: break } oldHeightOffset = newHeightOffset } } var body: some View { NavigationStack { Rectangle() .fill(.clear) .containerBackground(.ultraThinMaterial, for: .navigation) } .gesture(drag) .containerRelativeFrame(.vertical) { length, _ in length - newHeightOffset } .onGeometryChange(for: CGFloat.self) { geometryProxy in let frame = geometryProxy.frame(in: .local) return frame.height + newHeightOffset } action: { containerHeight in self.containerHeight = containerHeight } } } Reducing safe area inset's content height (drag down): Increasing safe area inset's content height (drag up):
3
0
517
Feb ’25
Problem with testing on a physical device
Hello, I am having the following issue: I am using the packages DSWaveformImage and DSWaveformImageViews if that matters. My code's goal is to generate waveform images from files embedded in the application. That works great on a simulator device, but when I run the code on a physical device (iPhone 15 Pro, iOS 18.2), I get this error (shown in the attached screenshot below):
Topic: UI Frameworks SubTopic: SwiftUI
1
0
276
Dec ’24
INUIHostedViewControlling ViewController's Life Cycle Events not being Called
I am implementing a new Intents UI Extension and am noticing that the viewWillDisappear, viewDidDisappear, and deinit methods are not being called on my UIViewController that implements INUIHostedViewControlling, when pressing the "Done" button and dismissing the UIViewController. This causes the memory for the UI Extension to slowly increase each time I re-run the UI Extension until it reaches the 120MB limit and crashes. Any ideas as to what's going on here and how to solve this issue? Worth noting that while the memory does continuously increase on iOS versions before iOS 17, only in 17 and later does the 120MB memory limit kick in and crash the extension.
2
0
499
Feb ’25
Swiftui Rendering issue: View not displayed when using almost full screen height
I plan to use the entire screen height minus 40 pixels approximately to not overlap with the time, batter and carrier data. However, I noticed that in the code shared below the vstack with pink background is not displayed at the top of the screen. The interesting part is that it's actually occupying an offset at the top of the screen. What's more, when I set an offset greater than 70 pixels, then the pink vstack displays on the view! Thus, I'm looking for an explanation to this swiftui rendering issue. Offset less than 70 pixels: Offset greater or equal than 70 pixels: GeometryReader { proxy in let offset = 40.0 let height = proxy.size.height - offset ZStack { VStack(spacing:0){ VStack{Text("heasdas")}.frame(width: 300,height: offset,alignment: .leading) .background(.pink) VStack { HStack(alignment:.center,spacing:10){ Text("Shapecloud") .font(.callout) .fontWeight(.semibold) .frame(alignment: .leading) SLine() } .frame(maxWidth: .infinity,alignment: .leading) Text("Digital Twin Solutions\nServices") .font(.largeTitle) .fontWeight(.medium) .frame(maxWidth: .infinity,alignment: .leading) } .frame(maxWidth: .infinity,maxHeight: 0.3*height,alignment: .top) .background(.red) VStack { VideoPlayer(player: player) .frame(maxWidth: .infinity,maxHeight: 300) } .frame(maxWidth: .infinity,maxHeight: 0.4*height) .background(.yellow) VStack{ Button { } label: { Text("Subscribe now").foregroundStyle(.black) .font(.headline) .fontWeight(.semibold) } .frame(maxWidth: .infinity,maxHeight: 50) .border(Color.black, width: 2) Button { } label: { Text("Sign In").foregroundStyle(.white) .font(.headline) } .frame(maxWidth: .infinity,maxHeight: 50) .background(Color.theme.primary) } .frame(maxWidth: .infinity,maxHeight: 0.3*height) .background(.green) } .padding(.horizontal, 32) .background(.cyan) .ignoresSafeArea(.all) } .ignoresSafeArea(.all) } .ignoresSafeArea(.all)
2
0
237
Feb ’25
How to use .symbolVariant(.contains: )
I'm getting a weird response from Xcode in trying to use symbolVariant(.contains). I also don't understand why it demands the type cast. What am I doing wrong? Here's the code as text: import SwiftUI let Variants: [SymbolVariants] = [ .circle, .square, .fill, .rectangle, .slash, .none ] func varAvail(_ image: Image) -> [SymbolVariants] { var res: [SymbolVariants] = [] for variant in Variants { if image.symbolVariant(.contains(variant)) as! Bool { res.append(variant) } } }
2
0
357
Jan ’25
App Clip show "App Clip Unavailable" only when the main app is not installed
After uploading the app to App Store Connect, Apple automatically generated a Default App Clip Link. However, the App Clip card only opens successfully if the main app is already installed on the device. If the main app is not installed, the App Clip card displays an image and the message "App Clip Unavailable" What could cause this behavior, and how do I ensure the App Clip works without requiring the main app to be installed?
1
0
388
Feb ’25
Separate RealityView inside a RealityView attachment
Hi, I am having some troubles creating a "nested" RealityView content using MapKit attachment. I am building a visionOS app that has horizontal MapKit map as an attachment to RealityView. I want to display 3D pins on that map, therefore I am using native map annotation and inside of these annotations, I create a new RealityView just for the 3D pin. This worked completely fine, unitil I wanted to have those RealityViews interact with each other. By interaction of those RealityViews I mean that I wanted to group entities from the first "main" RealityViews content with the 3D pins using ModelSortGroupComponent. Why I want this? I want to make the map circular, that is not a problem. Problem is that when I move the map with 3D pins, these pins have their own RealityView space and are only bounded by volumetric window dimensions. What happes is that these pins float next to the map (shown on attached image). So I came up with this solution: create a custom "toroid" like 3D entity model that occludes the pins that go outside the map region. In order to occlude only the pins, I need to use ModelSortGroupComponent to group the "toroid" entity with 3D pins entities (as described in another forum thread). To summarize: need the content of the superior RealityView to interact with map attachment annotations RealityView content in order to group them. There might be of course another, better way to achieve my whole goal, so I would naturally appreciate any help or guidance. Image below showing 3D pins on circular map. Since pins RealityView does no know anything about other RealityViews, it just overlows and hangs in space until is cropped by volumetric window boundary. Simplified code: var body: some View { let modelSortGroup = ModelSortGroup(depthPass: .prePass) RealityView { content, attachments in var mainEntity = Entity() // My other entities here... if let mapAttachment = attachments.entity(for: "mapAttachment") { // Edit map properties, position, horizontal layout etc. mainEntity.addChild(mapAttachment) } // Create and add to content mask "toroid" entity mapMaskEntity. Use OcclusionMaterial() material. mapMaskEntity.components.set(ModelSortGroupComponent(group: modelSortGroup, order: 0)) // For all pins, somehow also set the group // 3DPinEntity.components.set(ModelSortGroupComponent(group: modelSortGroup, order: 1)) content.add(mainEntity) } attachments: { Attachment(id: "mapAttachment") { Map { ForEach(mapViewModel.clusters, id: \.id) { cluster in Annotation("", coordinate: cluster.coordinate) { MapPin3DView(cluster: cluster) } } } .clipShape(Circle()) } } } // MapPin3DView is an map annotation view that includes a model of 3D pin and some details like image etc., uses RealityView. struct MapPin3DView: View { var body: some View { RealityView { content in // 3D pin entities... } } }
1
0
507
Dec ’24
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
Do the coordinates obtained by scanning a QR code with VNDetectBarcodesRequest match the coordinates of the finder pattern?
I am creating an application that uses VNDetectBarcodesRequest to read QR codes from images and adjust the image orientation to match that of the QR code finder pattern. The QR code was successfully read, and the coordinates of the QR code were obtained.Upon checking the obtained topLeft, topRight, and bottomLeft coordinates, they always seem to match the topLeft, topRight, and bottomLeft coordinates of the finder pattern. Is it specified that the coordinates of topLeft, topRight, and bottomLeft obtained with VNDetectBarcodesRequest match the topLeft, topRight, and bottomLeft of the finder pattern? Or do they just happen to match? I would appreciate it if you could tell me if the matching of coordinates is a specification. Thank you for your help.
0
0
320
Feb ’25
Identifying SwiftUI list cells in XCUITest
In my macOS app I have a SwiftUI list that starts like this: List(selection: $selection) { HStack { Label("Staging", systemImage: "arrow.up.square") Spacer() WorkspaceStatusBadge(unstagedCount: model.statusCounts.unstaged, stagedCount: model.statusCounts.staged) } (where WorkspaceStatusBadge is a custom view that just contains a Text) I'm trying to set the accessibility ID of that first cell so I can find it in XCUITest. If I apply the accessibilityIdentifier() modifier to the HStack, it instead sets the ID of the two static text elements inside it, and the cell still has no ID. I could find the cell based on the ID of the child staticText, but I have some other cases where this doesn't work as well. If I use .accessibilityElement() on the HStack, then XCUI sees a cell containing a Group element with the ID. This might be workable, but it's certainly not ideal. So how do I set the ID of the cell itself?
3
0
469
Jan ’25
`Text` (Label) text color issue during app resuming from suspended (changes from black to light or vice versa, depending on current appearance mode).
Its important to note that this same app did not have this issue in iOS 17. Ever since iOS 18 I have noticed that when application written in SwiftUI uses Label with the default color (which auto changes between light and dark appearance), from time to time when resuming an application that has been in the background, the color of those labels (only the Label elements) switches from the opposite to the correct one. Here is an example: Steps to reproduce Phone is in dark appearance Open app Labels text color is white and labels background is black Go to home so that app is on background Wait random time (does not happen all the time), some times 1 min some times 10 Reopen the application. During the opening transition the Label text color was changed while the app was in suspended mode to the light appearance variant (black) Once the app opening transition finishes the Label text color switches back to the correct color for dark appearance (white) Same issue happens if you start from light appearance. I cannot reproduce this on Xcode simulators, I have tried to force memory warning to check if that has anything to do with it but that also does not cause the issue to appear on simulators. For now I can only reproduce this on real device. Screenshots Here is screenshots of the above example: During transition After transition
Topic: UI Frameworks SubTopic: SwiftUI
4
0
389
Feb ’25