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

Magnification Gesture conflicts with UIPageViewController scroll gesture
The Problem I am trying to implement a pinch-to-zoom feature on images within a UIPageViewController. However, often times when trying to pinch to zoom, the magnification gesture gets overridden by the scrolling gesture built into the UIPageViewController. I'm not sure how to get around this. The Apple Photos app seems to allow pinch to zoom on photos inside a full-page scrolling view without any issue, so I believe it should be possible. Versions: iOS 17.2.1 - iOS 18.2.1, Swift (SwiftUI), Xcode 15.1 Steps to Reproduce Run this sample Xcode project on a physical device: https://drive.google.com/file/d/1tB1QyY6QPEp-WLzdHxgDdkM45xCAELLr/view?usp=share_link Try pinching to zoom on the image. After a few goes at it, you'll likely find that one time it will scroll instead of pinching to zoom. It might take up to a dozen pinches to experience this issue. What I've Tried Making the magnification gesture a high priority gesture. Having only one page in the paging view controller. Subclassing UIScrollView and conforming to the UIGestureRecognizerDelegate in that subclass, as explained here: https://stackoverflow.com/a/51070947/12218938 Using the iOS 17 ScrollView instead. Unfortunately it has the same issue but even worse! It's possible that since this is a native SwiftUI view, people might have solutions to this, but from a brief search I couldn't find any. If you set the data source to nil (which indicates that there are no other pages for the paging view controller to scroll to), it does work, but it's not a workable solution since the time you'd want to set the data source to nil is when the user pinches the screen, but you can't know when the user pinches the screen if the gesture doesn't work! Other Ideas/Workarounds We could have some "zoom" mode that temporarily cancels the ability to scroll while zooming. But this seems like not too nice/intuitive of a solution. If there is no paging view that Apple provides which could be made compatible with a pinch-to-zoom gesture, it's possible we would have to make a completely custom paging view. But that would be a lot of work I presume, so it's probably not something we would have time for right now.
0
0
428
Jan ’25
Dynamically Update Complex UI Views in SwiftUI
I am working on a SwiftUI project where I need to dynamically update the UI by adding or removing components based on some event. The challenge is handling complex UI structures efficiently while ensuring smooth animations and state management. Example Scenario: I have a screen displaying a list of items. When a user taps an item, additional details (like a subview or expanded section) should appear dynamically. If the user taps again, the additional content should disappear. The UI should animate these changes smoothly without causing unnecessary re-renders. My Current Approach: I have tried using @State and if conditions to toggle views, like this: struct ContentView: View { @State private var showDetails = false var body: some View { VStack { Button("Toggle Details") { showDetails.toggle() } if showDetails { Text("Additional Information") .transition(.slide) // Using animation } } .animation(.easeInOut, value: showDetails) } } However, in complex UI scenarios where multiple components need to be shown/hidden dynamically, this approach is not maintainable and could cause performance issues. I need help with the below questions. Questions: State Management: Should I use @State, @Binding, or @ObservedObject for handling dynamic UI updates efficiently? Best Practices: What are the best practices for structuring SwiftUI views to handle dynamic updates without excessive re-renders? Performance Optimization: How can I prevent unnecessary recomputations when updating only specific UI sections? Animations & Transitions: What is the best way to apply animations smoothly while toggling visibility of multiple components? Advanced Approaches: Are there better techniques using @EnvironmentObject, ViewBuilder, or even GeometryReader for dynamically adjusting UI layouts? Any insights, code examples, or resources would be greatly appreciated.
0
0
330
Jan ’25
AppClip card keeps showing up
After the user clicks the Open button in the AppClip card, the AppClip launches, but the card keeps appearing whenever the user clicks Open. It doesn’t disappear until the user clicks the Close button on the card. This issue started appearing two months ago and only occurs on iOS 17.6 and 17.7. [demo video](https://drive.google.com/file/d/1vJ-7E5JSdO_xoVkDYxBJDkj8sm-dvxv1/view?usp=share_link
Topic: UI Frameworks SubTopic: General
0
0
166
Feb ’25
contactAccessPicker Ui referring to app name
We are using the contactAccessPicker modifier connected to a Button to allow the user to change the selection of contacts that he allows for use in our app. In the two places where the iOS UI screen refers to our app: "manage which contacts can access." on top, and below in the explanatory text, again , the value of is taken probably from the app's PRODUCT_NAME. Instead, we need it to be either CFBundleName or CFDisplayBundleName. In our case they are different (PRODUCT_NAME is legacy, reasons of rebranding, which is a very common reason in apps). Is there a specific reason why iOS is using PRODUCT_NAME (or something similar) in the contactAccessPicker UI screen instead of the user facing CFBundleName or CFDisplayBundleName? or is this a bug?
Topic: UI Frameworks SubTopic: SwiftUI
0
0
160
Jan ’25
How does the widget in iOS17 configure this kind of page?
I tried to use AppIntentConfiguration in iOS17 to fail to achieve such a dynamic configuration. code: struct ConfigurationAppIntent: WidgetConfigurationIntent {     static var title: LocalizedStringResource { "位置" }     static var description: IntentDescription { "选择位置以展示城市天气" }     @Parameter(title: "Select City", optionsProvider: CityOptionsProvider())     var selectedCity: String? }
Topic: UI Frameworks SubTopic: SwiftUI
0
0
160
Jan ’25
How to use the mouse to select List data items
I have a question about SwiftUI and would like to ask you guys The problem is described as follows I am learning to use SwiftUI. I have a file list display window. I encapsulate the files into a structure called FileInfo and use List to display the files obtained through filemanager. I want to select files by mouse selection. But I didn't find SwiftUI support for selection, so I used Zstack to select, but I found that it is difficult to respond to selection and click events at the same time. Below is my code ZStack { List(selection: $localWorkspaceViewModel.selectedFiles) { ForEach(localWorkspaceViewModel.files.indices, id: \.self) { index in ZStack { } .contextMenu{ // ... } .onTapGesture(count: 2) { // ... } .onTapGesture(count: 1) { // ... } .onDrag { // ... } } .listRowInsets(EdgeInsets()) .listRowSeparator(.hidden) } .contextMenu { // ... } .onDrop(of: ["public.data"], isTargeted: nil) { providers in // ... } Color.clear .contentShape(Rectangle()) .gesture( DragGesture(minimumDistance: 20) .onChanged { value in print() if !isDragging { dragStartPoint = value.startLocation isDragging = true } // ... } .onEnded { _ in isDragging = false } ) .allowsHitTesting(!isDragging) if isDragging { Rectangle() .fill(Color.blue.opacity(0.2)) .frame(width: selectionRect.width, height: selectionRect.height) .position(x: selectionRect.midX, y: selectionRect.midY) .overlay( Rectangle() .stroke(Color.blue, lineWidth: 1) ) .allowsHitTesting(false) } } The code problem is described as follows When the line of code .allowsHitTesting(!isDragging) sets the static value to true or false, the click and drag event of the List item behaves normally or the box selection of Color.clear behaves normally, but only one of them behaves normally. However, after setting it to !isDragging, only one of them behaves normally. I would like to ask how to solve this problem. I would be very grateful if you can give me a solution.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
280
Nov ’24
Detect user's tap on status bar
I have an app which uses Scene var body: some Scene { WindowGroup { RootView(root: appDelegate.root) .edgesIgnoringSafeArea(.all) .onOpenURL { url in let stringUrl = url.absoluteString if (stringUrl.starts(with: "http")) { handleUniversalLink(url: stringUrl) } else if (stringUrl.starts(with: "fb")) { let _ = ApplicationDelegate.shared.application( UIApplication.shared, open: url, sourceApplication: nil, annotation: [UIApplication.OpenURLOptionsKey.annotation]) } } } } I need to detect when a user taps on status bar. And call some functions when he does it. Is it possible in Swift?
Topic: UI Frameworks SubTopic: SwiftUI
0
0
236
Feb ’25
UIDocumentPickerViewController
I'm upgrading my app from minVersion iOS 11 to iOS 12. My compiler says that UIDocumentMenuViewController with UIDocumentPickerViewController is deprecated, they recommend to use directly the last one. So I change the code. fileprivate func openDocumentPicker() { let documentPicker = UIDocumentPickerViewController( documentTypes: [ "com.adobe.pdf", "org.openxmlformats.wordprocessingml.document", // DOCX "com.microsoft.word.doc" // DOC ], in: .import ) documentPicker.delegate = self view.window?.rootViewController?.present(documentPicker, animated: true, completion: nil) } When I open the picker in iOS 17.2 simulator and under it is well shown, like a page sheet. But in iOS 18.0 and up at first it opens like a page sheet with no content but then it is displayed as a transparent window with no content. Is there any issue with this component and iOS 18? If I open the picker through UIDocumentMenuViewControllerDelegate in an iphone with iOS 18.2 it is well shown. Image in iOS 18.2 with the snippet The same snippet in iOS 17.2 (and expected in older ones)
Topic: UI Frameworks SubTopic: UIKit Tags:
0
0
328
Jan ’25
CATransaction commit() crashed on background thread [EXC_BREAKPOINT: com.apple.root.****-qos.cooperative]
Problem Description We are developing a app for iOS and iPadOS that involves extensive custom drawing of paths, shapes, texts, etc. To improve drawing and rendering speed, we use CARenderer to generate cached images (CGImage) on a background thread. We adopted this approach based on this StackOverflow post: https://stackoverflow.com/a/75497329/9202699. However, we are experiencing frequent crashes in our production environment that we can hardly reproduce in our development environment. Despite months of debugging and seeking support from DTS and the Apple Feedback platform, we have not been able to fully resolve this issue. Our recent crash reports indicate that the crashes occur when calling CATransaction.commit(). We suspect that CATransaction may not be functioning properly outside the main thread. However, based on feedback from the Apple Feedback platform, we were advised to use CATransaction.begin() and CATransaction.commit() on a background thread. If anyone has any insights, we would greatly appreciate it. Code Sample The line CATransaction.commit() is causing the crash: [EXC_BREAKPOINT: com.apple.root.****-qos.cooperative] private let transactionLock = NSLock() // to ensure one transaction at a time private let device = MTLCreateSystemDefaultDevice()! @inline(never) static func drawOnCGImageWithCARenderer( layerRect: CGRect, itemsToDraw: [ItemsToDraw] ) -> CGImage? { // We have encapsulated everything related to CALayer and its // associated creations and manipulations within CATransaction // as suggested by engineers from Apple Feedback Portal. transactionLock.lock() CATransaction.begin() // Create the root layer. let layer = CALayer() layer.bounds = layerRect layer.masksToBounds = true // Add one sublayer for each item to draw itemsToDraw.forEach { item in // We have thousands or hundred thousands of drawing items to add. // Each drawing item may produce a CALayer, CAShapeLayer or CATextLayer. // This is also why we want to utilise CARenderer to leverage GPU rendering. layer.addSublayer( item.createCALayerOrCATextLayerOrCAShapeLayer() ) } // Create MTLTexture and CARenderer. let textureDescriptor = MTLTextureDescriptor.texture2DDescriptor( pixelFormat: .rgba8Unorm, width: Int(layer.frame.size.width), height: Int(layer.frame.size.height), mipmapped: false ) textureDescriptor.usage = [MTLTextureUsage.shaderRead, .shaderWrite, .renderTarget] let texture = device.makeTexture(descriptor: textureDescriptor)! let renderer = CARenderer(mtlTexture: texture) renderer.bounds = layer.frame renderer.layer = layer.self /* ********************************************************* */ // From our crash report, this is where the crash happens. CATransaction.commit() /* ********************************************************* */ transactionLock.unlock() // Rendering layers onto MTLTexture using CARenderer. renderer.beginFrame(atTime: 0, timeStamp: nil) renderer.render() renderer.endFrame() // Draw MTLTexture onto image. guard let colorSpace = CGColorSpace(name: CGColorSpace.sRGB), let ciImage = CIImage(mtlTexture: texture, options: [.colorSpace: colorSpace]) else { return nil } // Convert CIImage to CGImage. let context = CIContext() return context.createCGImage(ciImage, from: ciImage.extent) }
0
1
458
Jan ’25
Monitoring of the paste(GUI based) operation
I am working on the EndPoint DLP solution project. So I want to monitor the paste operation peformed by the user. So when he uses the keyboard keys then I can monitor them using the event callback. But if user uses the GUI for pasting the data then how can I monitor that ?
Topic: UI Frameworks SubTopic: General
0
0
210
Jan ’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
418
Dec ’24
QLPreviewingController can access previewed file, but cannot load files referenced by the previewed file
I have an app on the Mac App Store (so sandboxed) that includes a QuickLook Preview Extension that targets Markdown files. It established a QLPreviewingController instance for the macOS QuickLook system to access and it works. I'm in the process of updating it so that it displays inline images referenced in the file as well as styling the file's text. However, despite setting Downloads folder read-only access permission (and user-selected, though I know that shouldn't be required: no open/save dialogs here) in the extension's entitlements, Sandbox refuses too allow access to the test image: I always get a deny(1) file-read-data error in the log. FWIW, the test file is referenced in the source Markdown as an absolute unix file path. I've tried different signings and no joy. I’ve tried placing the referenced image in various other locations. Also no joy. All I can display is the error-case bundle image for 'missing image'. Question is, is this simply something that QuickLook extensions cannot do from within the sandbox, or am I missing something? Is there anything extra I can do to debug this?
0
0
391
Jan ’25
How can the long - press gesture act only on a certain element in a list item?
I use the effect in the picture to do the test, I want to achieve a habit of multiple punch card effect, click to complete a punch card, long press to cancel a punch card. I'm having a problem right now. I want the long press gesture to only work on the trash icon, not extend to the entire item, causing the entire item to be highlighted. What should I do about it? I tried a lot of methods, but I didn't achieve the effect.
0
0
214
Dec ’24
How to remove margins around built-in views?
I want to have my own background and foreground colors for some views and I am having a bit of trouble. I cannot figure out how to remove the margins around some built-in views. One example is below. The ScrollView portion is always black or white, depending on whether I am I dark mode or not. I've added various colors and borders to see what is going on below. I've also tried adding the modifiers to the Scroll View rather than the TextEditor and it doesn't work at all. If I don't have the .frame modifier on the ScrollView, the TextEditor moves to the top of its frame for some reason. I've played with .contentMargins, .edgeInsets, etc. with no luck How do I get the TextEditor to fill the entire ScrollView without the margin? Thanks! import SwiftUI struct TextEditorView: View { @Binding var editString: String var numberOfLines: Int var lineHeight: CGFloat { UIFont.preferredFont(forTextStyle: .body).lineHeight } var viewHeight: CGFloat { lineHeight * CGFloat(numberOfLines) + 8 } var body: some View { ScrollView([.vertical], showsIndicators: true) { TextEditor(text: $editString) .border(Color.red, width: 5) .foregroundStyle(.yellow) .background(.blue) .frame(minHeight:viewHeight, maxHeight: viewHeight) .scrollContentBackground(.hidden) } .frame(minHeight:viewHeight, maxHeight: viewHeight) } }
0
0
183
Jan ’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
203
Jan ’25
Navigation Bar Jumping Issue in SwiftUI with TabView and NavigationStack (Observed in Apple's Example Code)
I recently started exploring the latest version of SwiftUI and encountered an issue while working with TabView and NavigationStack. I downloaded the example code provided by Apple and began making changes to explore new SwiftUI features. However, I noticed that the navigation bar "jumps" or resets when switching between tabs, even in their example implementation. Here are some changes which I made below in the files: LibraryView: .navigationTitle("Library") .navigationBarTitleDisplayMode(.inline) .toolbarBackground(Color("AccentColor"),for: .navigationBar) WatchNowView: .navigationTitle("Watch Now") .navigationBarTitleDisplayMode(.inline) .toolbarBackground(Color("AccentColor"),for: .navigationBar) example code url :- destinationVideo I suspect the issue arises because each tab bar item has its own NavigationStack. When we set a navigation title for each view, the NavigationStack resets the navigation bar on view appearance, which causes this visual bug. Thank you!
0
0
286
Dec ’24
Bidirectional Text Rendering Issue in Swift UILabel for Arabic
I'm encountering an issue displaying a large HTML string (over 11470 characters) in a UILabel. Specifically, the Arabic text within the string is rendering left-to-right instead of the correct right-to-left direction. I've provided a truncated version of the HTML string and the relevant code snippet below. I've tried setting the UILabel's text alignment to right, but this didn't resolve the issue. Could you please advise on how to resolve this bidirectional text rendering problem? The results of the correct and incorrect approaches are shown in the image below. Here's the relevant Swift code: let labelView: UILabel = { let label = UILabel() label.textAlignment = .right label.translatesAutoresizingMaskIntoConstraints = false label.numberOfLines = 0 label.semanticContentAttribute = .forceRightToLeft label.backgroundColor = .white label.lineBreakMode = .byWordWrapping return label }() //Important!! //It must exceed 11470 characters. let htmlString = """ <p style=\"text-align: center;\"><strong>İSTİÂZE</strong></p> <p>Nahl sûresindeki:</p> <p dir="rtl" lang="ar"> فَاِذَا قَرَاْتَ الْقُرْاٰنَ فَاسْتَعِذْ بِاللّٰهِ مِنَ الشَّيْطَانِ الرَّج۪يمِ </p> <p><strong>“</strong><strong>Kur’an okuyacağın zaman kovulmuş şeytandan hemen Allah’a sığın!</strong><strong>”</strong> (Nahl 16/98) emri gereğince Kur’ân-ı Kerîm okumaya başlarken:</p> <p dir="rtl" lang="ar">اَعُوذُ بِاللّٰهِ مِنَ الشَّيْطَانِ الرَّج۪يمِ</p> <p><em>“Kovulmuş şeytandan Allah’a sığınırım” </em>deriz. Bu sözü söylemeye “istiâze<em>” denilir. “Eûzü”</em>, sığınırım, emân dilerim, yardım taleb ederim, gibi anlamlara gelir. It must exceed 11470 characters.</p> “”” if let data = htmlString.data(using: .utf8) { let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [ .documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue ] do { let attributedString = try NSAttributedString(data: data, options: options, documentAttributes: nil) labelView.attributedText = attributedString } catch { print("HTML string işlenirken hata oluştu: \(error)") } } I'm using iOS 18.2 and Swift 6. Any suggestions on how to correct the bidirectional text rendering?
0
0
347
Jan ’25