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

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
487
Feb ’25
How do I make a UIViewRepresentable beneath SwiftUI elements ignore touches to these elements?
Hello, and an early "Merry Christmas" to all, I'm building a SwiftUI app, and one of my Views is a fullscreen UIViewRepresentable (SpriteView) beneath a SwiftUI interface. Whenever the user interacts with any SwiftUI element, the UIView registers a hit in touchesBegan(). For example, my UIView has logic for pinching (not implemented via UIGestureRecognizer), so whenever the user holds down a SwiftUI element while touching the UIView, that counts as two touches to the UIView which invokes the pinching logic. Things I've tried to block SwiftUI from passing the gesture down to the UIView: Adding opaque elements beneath control elements Adding gestures to the elements above Adding gesture masks to the gestures above Converting eligible elements to Buttons (since those seem immune) Adding SpriteViews beneath those elements to absorb gestures So far nothing has worked. As long as the UIView is beneath SwiftUI elements, any interactions with those elements will be registered as a hit. The obvious solution is to track each SwiftUI element's size and coordinates with respect to the UIView's coordinate space, then use exclusion areas, but this is both a pain and expensive, and I find it hard to believe this is the best fix for such a seemingly basic problem. I'm probably overlooking something basic, so any suggestions will be greatly appreciated
0
0
434
Dec ’24
wrong value on the first buttonClick
When I run this code, and click on one of both 'currentZin' in the first screen that comes up with the view WordView, I see the content of the .preview value I used to initialize currentVerse (Verse= .preview) and not the values of the currentVerse that is in the Button action. When I leave the WordView-sheet and click again the WordView shows the good result. I looks that on the first click the currentVerse = verse in the Button is not executed. If Ido not initialize it, it has a nil value. Can Anyone explain what happens and how to solve it. struct HymnVerses: View { var hymn:Hymn @State private var currentZin: Int = 2 @State private var isLatin: Bool = true @State private var isMasked: Bool = false @State private var isTranslation: Bool = true @State private var currentSentence: String = "" @State private var showWordView: Bool = false @State private var currentVerse: Verse = .preview // Deze calculated property wordt op voorhand berekend. // Hierdoor blijft de referentie naar het origineel bestaan // wanneer ik currentVerse bereken. Daarvoor geraakte ik ze altijd kwijt. private var filteredVerses: [Verse] { hymn.verses.filter { $0.zin &lt;= currentZin } } var body: some View { List { ForEach(filteredVerses) { verse in VStack(alignment: .leading) { Button { currentVerse = verse showWordView = true } label: { Text("\(verse.zin). \(currentSentence(for: verse))") .font(.headline) } } } .onAppear { currentVerse = filteredVerses.first! } }.sheet(isPresented: $showWordView, content: { WordView(vers: currentVerse, showWordView: $showWordView) }) .toolbar { ToolbarItem(placement: .bottomBar) { Button(isLatin ? "Dutch" : "Latin") { isLatin.toggle() } } ToolbarItem(placement: .bottomBar) { Button(isMasked ? "Unmask" : "Mask") { isMasked.toggle() } } ToolbarItem(placement: .bottomBar) { Button("Restart") { currentZin = 1 } } ToolbarItem(placement: .bottomBar) { Button("Next") { if currentZin &lt; hymn.verses.count { currentZin += 1 } } } } } func maskLetters(in sentence: String, with mask: Character = "*") -&gt; String { return sentence.map { char in if char.isLetter { return String(mask) } else { return String(char) } }.joined() } private func currentSentence(for verse: Verse) -&gt; String { var temp: String { return isLatin ? verse.latijn : verse.nederlands } if isMasked { return maskLetters(in: temp) } else { return temp } } } #Preview { /// the navigationStack is nodig omdat anders de toolbar niet zichtbaar is met #Preview NavigationStack { let allTexts = AllTexts() HymnVerses(hymn: .preview).environment(allTexts) } }
3
0
205
Jan ’25
ShareLink does not prompt inside of fullScreenCover
When I try to launch a ShareLink from within a fullScreenCover, I get the following error: Attempt to present <UIActivityViewController: 0x105e6a400> on <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVS_7AnyViewVS_12RootModifier__: 0x1053a37c0> (from <_TtGC7SwiftUI19UIHostingControllerVVS_7TabItem8RootView_: 0x105eb8a00>) which is already presenting <_TtGC7SwiftUI29PresentationHostingControllerVS_7AnyView_: 0x114890000> Seems like a bug, has anyone else encountered this or found a way around it?
1
0
205
Jan ’25
A glitch with retained view controllers on Catalyst
Hello! I discovered a bug on Catalyst about a three years ago but it still seems to be not fixed. My bug report number is FB9705748. The Internet is silent on this so I'm even not sure, perhaps it's only me. So to the problem. When you display UICollectionViewController or UIViewController that contains UICollectionView, interact with the collection view then dismiss the view controller, the displayed view controller isn't released if dismissal is done through navigation bar item. The problem occurs only when the run target is My Mac (Mac Catalyst). Everything is fine when you run on iOS or via My Mac (Designed for iPad). The sample project is uploaded to GitHub. It has a video that shows this strange behavior, see the log for 'deinit' messages. I did have some workaround to fix this but it stops to work, presumable on the new macOS. Also, chances are that it's not only UICollectionView which initiates the glitch, it's just that I only encounter it with collection views.
2
0
389
Feb ’25
Is it possible to make GeometryReader less vertically greedy?
I must be missing something here. I want to put a landscape image in a geometry reader that contains a ZStack that contains an image and an overlay centred on top of the Image. I would like the ZStack and GeoReader's sizes to be the size of Image. (ie I want geometry.size to be the size of the image, which can be used to control the offset of the overlay's position.) Unfortunately the ZStack also includes the space above the image (ie the top safeArea) and the GeometryReader also includes all the space below the Image. (so geometry.size.height is greater than the height of Image) I've gone down rabbit holes of adding other items above/below, but I don't seem to be able to prevent the GeometryReader from being vertically greedy. eg the Text(" ") above the ZStack in the VStack solves the ZStack claiming the top safe area. But adding Text(" ") below the ZStack does not prevent the GeometryReader from claiming more vertical space below the image. Any/all guidance greatly appreciated. struct ContentView: View { var body: some View { VStack { // Text(" ") GeometryReader { geometry in ZStack { Image( uiImage: .init(imageLiteralResourceName: "LandscapeSample") ) .resizable() .aspectRatio(contentMode: .fit) Text("Hello, world!") .background(.white) } .background(.red) } .background(.blue) // Text(" ") } } }
2
0
450
Jan ’25
How can I integrate my own text changes into UITextView's undo manager?
I have an app that uses UITextView for some text editing. I have some custom operations I can do on the text that I want to be able to undo, and I'm representing those operations in a way that plugs into NSUndoManager nicely. For example, if I have a button that appends an emoji to the text, it looks something like this: func addEmoji() { let inserting = NSAttributedString(string: "😀") self.textStorage.append(inserting) let len = inserting.length let range = NSRange(location: self.textStorage.length - len, length: len) self.undoManager?.registerUndo(withTarget: self, handler: { view in view.textStorage.deleteCharacters(in: range) } } My goal is something like this: Type some text Press the emoji button to add the emoji Trigger undo (via gesture or keyboard shortcut) and the emoji is removed Trigger undo again and the typing from step 1 is reversed If I just type and then trigger undo, the typing is reversed as you'd expect. And if I just add the emoji and trigger undo, the emoji is removed. But if I do the sequence above, step 3 works but step 4 doesn't. The emoji is removed but the typing isn't reversed. Notably, if step 3 only changes attributes of the text, like applying a strikethrough to a selection, then the full undo chain works. I can type, apply strikethrough, undo strikethrough, and undo typing. It's almost as if changing the text invalidates the undo manager's previous operations? How do I insert my own changes into UITextView's NSUndoManager without invalidating its chain of other operations?
4
0
1.7k
Dec ’24
Strange Behavior of UITabBarController selectedIndex and UINavigationController pop
UITabBarController | | VC_Tab1 --------------------------- VC_Tab2 | | | | VC_Tab1_Child VC_Tab2_Child | (HeaderView) | (MyButton) The structure of the view controllers and views in the project is as described above. <case 1> self.navigationController?.popToRootViewController(animated: false) tabBarController.selectedIndex = 1 When popToRootViewController(animated: false) is called in VC_Tab1_Child, followed by setting the tab controller’s selectedIndex = 1, the following results are observed: viewWillAppear(_:), <VC_Tab2_Child> deinit, <VC_Tab1_Child> viewDidAppear(_:), <VC_Tab2_Child> The originally expected results are as follows viewWillDisappear(_:), <VC_Tab1_Child> viewDidDisappear(_:), <VC_Tab1_Child> deinit, <VC_Tab1_Child> deinit, <HeaderView> deinit, <MyButton> headerView.backButton.rx.tap -> Event completed headerView.backButton.rx.tap -> isDisposed viewWillAppear(_:), <VC_Tab2_Child> viewDidAppear(_:), <VC_Tab2_Child> The HeaderView belonging to VC_Tab1_Child was not deallocated, and the resources associated with that view were also not released. Similarly, VC_Tab1_Child.viewWillDisappear and VC_Tab1_Child.didDisappear were not called. <case 2> self.navigationController?.popToRootViewController(animated: false) DispatchQueue.main.async { tabBarController.selectedIndex = 1 } After performing the pop operation as shown in the code and waiting for a short period before testing, the expected results were generally achieved. (However, rarely, the results were similar to those observed when called without async.)” <case 3> self.navigationController?.popToRootViewController(animated: false) DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { tabBarController.selectedIndex = 1 } When a sufficient delay was ensured as described above, the expected results were achieved 100% of the time.” The abnormal behavior is more pronounced in iOS versions prior to 18 and varies depending on the iOS version. I couldn’t find any documentation explaining the unexpected behavior shown in the results above. What could be the cause? The simulation code is provided below. https://github.com/linusix/UITabBarController_Test2
0
0
294
Dec ’24
Inconsistency Between Translation API Language Identifiers and Foundation Locale
I recently noticed an inconsistency in how languages are represented in Apple’s new Translation API compared to Foundation’s Locale system. Observation from the Translation API When retrieving the list of supported languages using: let availableLanguages = try await LanguageAvailability().supportedLanguages The results are: Language(components: Foundation.Locale.Language.Components(languageCode: Optional(uk), script: nil, region: Optional(UA))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(zh), script: nil, region: Optional(TW))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(ko), script: nil, region: Optional(KR))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(en), script: nil, region: Optional(GB))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(de), script: nil, region: Optional(DE))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(zh), script: nil, region: Optional(CN))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(ja), script: nil, region: Optional(JP))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(id), script: nil, region: Optional(ID))) Language(components: Foundation.Locale.Language.Components(languageCode: Optional(nl), script: nil, region: Optional(NL))) .... Key points: • The script component is always nil. • Region codes (CN, TW, etc.) determine the script for languages like Chinese (Simplified or Traditional). • Other languages (e.g., en-GB, en-US, pt-BR) also rely on region-based identification. Observation from Foundation Locale (Locale.current.language) When retrieving the user’s system language setting: systemLanguageObj = Locale.current.language I get a different format where the script component is present, but the region may vary based on user settings. This means that mapping between script and region is not consistent between the two APIs, requiring manual handling. My key questions: 1. Is my current approach correct, or is there a better way to get user language settings that match Translation API identifiers? 2. If no alternative exists, could the Translation API align its language identification method with Foundation Locale to reduce ambiguity? Any insights or suggestions would be greatly appreciated!
1
0
332
Feb ’25
Change anchor position of view for the tvOS focus engine
I'm developing a grid of focusable elements in SwiftUI with different sizes for tvOS (similar to a tv channel grid). Because the Focus Engine calculates the next view to focus based on the center of the currently focused view, sometimes it changes focus to an unexpected view. Here's an example: Actual: Expected: Is it possible to customize the anchor point from which the focus engine traces a ray to the next view? I would prefer the leading edge in my case.
0
0
399
Jan ’25
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
516
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
Modifying the native selection menu ios
I am working on a React Native application where I want to modify the native text selection menu (the menu that appears when you long-press on text). Specifically, I want to add a custom option alongside the default ones like Copy, Look Up, Translate, Search Web, and Share. Is there a way to modify the native text selection menu inside a WebView on iOS? How can I add a custom menu option to the default text selection menu while keeping all the default options intact?
1
0
422
Feb ’25
Explanation of DynamicProperty's update func in SwiftUI
Could an Apple employee that works on SwiftUI please explain the update() func in the DynamicProperty protocol? The docs have ambiguous information, e.g. "Updates the underlying value of the stored value." and "SwiftUI calls this function before rendering a view’s body to ensure the view has the most recent value." From: https://developer.apple.com/documentation/swiftui/dynamicproperty/update() How can it both set the underlying value and get the most recent value? What does underlying value mean? What does stored value mean? E.g. Is the code below correct? struct MyProperty: DynamicProperty { var x = 0 mutating func update() { // get x from external storage x = storage.loadX() } } Or should it be: struct MyProperty: DynamicProperty { let x: Int init(x: Int) { self.x = x } func update() { // set x on external storage storage.save(x: x) } } This has always been a mystery to me because of the ambigious docs so thought it was time to post a question.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
218
Jan ’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
collectionView(_:shouldBeginMultipleSelectionInteractionAt:) triggered by trackpad click
In my collection view I have allowsSelection, allowsSelectionDuringEditing, and allowsMultipleSelectionDuringEditing set to true. In my delegate's collectionView(_:shouldBeginMultipleSelectionInteractionAt:) I return true unconditionally, getting me the desired behavior of triggering edit mode with a two-finger swipe. So far so good. The problem is that collectionView(_:shouldBeginMultipleSelectionInteractionAt:) is also called on a single-finger click from a trackpad. Tapping one of my cells is supposed to open a sub-screen, so with this happening there's no way to navigate my screen using a trackpad. This also goes against the documentation, which says this delegate method is supposed to get called because of a two-finger swipe. Is there a way to keep that call from happing from a trackpad click? Or a way to distinguish whether I'm getting the call because of an actual two finger swipe?
Topic: UI Frameworks SubTopic: UIKit Tags:
2
0
248
Feb ’25
SwiftUI creating MapCameraPosition from CLLocationManager initialiser/self error when trying to tie them? (see code)
Trying to use new Swift @Observable to monitor GPS position within SwiftUI content view. But how do I tie the latest locations to the SwiftUI Map's mapCameraPosition? Well ideally the answer could cover: How to fix this error - So get map tracking along with the User Position, but also How to include facility to turn on/off the map moving to track the user position (which I'll need to do next). So could be tracking, then disable, move map around and have a look at things, then click button to start syncing the mapcameraposition to the GPS location again Refer to error I'm embedded in the code below. import SwiftUI import MapKit @Observable final class NewLocationManager : NSObject, CLLocationManagerDelegate { var location: CLLocation? = nil private let locationManager = CLLocationManager() func startCurrentLocationUpdates() async throws { if locationManager.authorizationStatus == .notDetermined { locationManager.requestWhenInUseAuthorization() } for try await locationUpdate in CLLocationUpdate.liveUpdates() { guard let location = locationUpdate.location else { return } self.location = location } } } struct ContentView: View { var newlocationManager = NewLocationManager() @State private var cameraPosition: MapCameraPosition = .region(MKCoordinateRegion( center: newlocationManager.location?.coordinate ?? <#default value#>, span: MKCoordinateSpan(latitudeDelta: 0.25, longitudeDelta: 0.25) )) // GET ERROR: Cannot use instance member 'newlocationManager' within property initializer; property initializers run before 'self' is available var body: some View { ZStack { Map(position: $cameraPosition) Text("New location manager: \(newlocationManager.location?.description ?? "NIL" )") // works } .task { try? await newlocationManager.startCurrentLocationUpdates() } } } #Preview { ContentView() }
2
0
1.5k
Dec ’24
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