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

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
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
Unable to display SwiftUI View Previews in a Static Framework target
Hello, I am currently encountering an issue where SwiftUI View Previews cannot be displayed when the View is defined in a Static Framework target. This issue only occurs under specific conditions. Environment Xcode: 16.2 Scheme Structure: MainApp Test Target: TestHogeFeature Test Setting: Gather coverage (Code coverage collection) enabled(all) Target Structure: MainApp (Application target) Dependencies: [HogeFeature, Core] HogeFeature (Static Framework target) Dependencies: [Core] Core (Framework target) Dependencies: None TestHogeFeature (Unit test target) Dependencies: [HogeFeature] Summary I am currently working on a SwiftUI-based project and have encountered an issue where Previews fail to display under specific conditions. Below are the details: Issue In the MainApp scheme, when the code coverage collection setting (Gather coverage for) is enabled, Previews for SwiftUI Views within the HogeFeature (Static Framework) target fail to display correctly. However, the issue is resolved by taking one of the following actions: Change HogeFeature from a Static Framework to a Dynamic Framework. Remove the build setting MACH_O_TYPE: staticlib Disable the Gather coverage setting in the MainApp scheme. I have attached the actual error log from the failed Preview. preview error log Questions Why does this issue occur only when using a Static Framework with code coverage enabled? Is there any way to resolve this issue while maintaining the current configuration (Static Framework with code coverage enabled)? I would appreciate any advice or insights regarding the cause and potential solutions.
0
0
504
Jan ’25
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 <= 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 < hymn.verses.count { currentZin += 1 } } } } } func maskLetters(in sentence: String, with mask: Character = "*") -> String { return sentence.map { char in if char.isLetter { return String(mask) } else { return String(char) } }.joined() } private func currentSentence(for verse: Verse) -> 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
206
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
macOS Menu Bar
Xcode 16.2 Swift 6 macOS Sequoia 15.1 SwiftUI I am a beginner. If I understand we can add buttons to the default Menu Bar but not delete them. Am I right? If you do not need most of the buttons, how do you solve that? I can add a button: import SwiftUI @main struct NouMenuProvesApp: App { var body: some Scene { WindowGroup { ContentView() } .commands { CommandMenu("Custom") { Button("Custom Action") { print("Custom Action performed") } } } } } Can I delete a Menu Button or create a new simpler Menu Bar?
Topic: UI Frameworks SubTopic: SwiftUI Tags:
1
0
299
Jan ’25
iOS Widget can't connect to the host app and shows Skeleton.
Some of our users keep reporting that occasionally some widgets (which initially were working perfectly) are now broken and show only skeletons. Note that the app has multiple widgets, and this happens only to some of them (that is when some widgets get broken, some other widgets are still working normally). While developing the app, I came across this symptom as well, and when I read the device console, I found the following errors in the console (which the system was repeatedly reporting to the console): Unable to get connection interface: Error Domain=LNConnectionErrorDomain Code=1100 "Unable to locate com.example.app.MyAppntents for the com.apple.intents-service extension point" UserInfo={NSLocalizedDescription=Unable to locate com.example.app.MyAppIntents for the com.apple.intents-service extension point} The affected widgets use the 'UserDefaults with groups' to read the data that is stored by the host app. And I think that sometimes the widget fails (or even crashes) while reading the data from the UserDefaults and it ends up showing the skeleton. The only remedy I found was Uninstall the app Reboot the device Install the app again. After this, the widget starts to work again.. So, what can be the reason behind this? Is this an iOS bug or what and how to fight it?
2
0
405
Jan ’25
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
442
Jan ’25
Confusion about units for new WeatherKit visibility items
I am really confused by some of the new data returned in WeatherKit for iOS 18. The visibility (of an object) was already being returned in HourWeather as a Measurement. iOS 18 added max/min visibility (of terrain) in DayWeather. BUT instead of a Measurement it's just a Double. HourWeather: /// The distance at which an object can be clearly seen. /// /// The amount of light and weather conditions like fog, mist, and smog affect visibility. public var visibility: Measurement<UnitLength> DayWeather's comment: /// The maximum distance at which terrain is visible for the day. /// /// The amount of light, and weather conditions like fog, mist, and smog affect visibility. @available(iOS 18.0, macOS 15.0, tvOS 18.0, watchOS 11.0, visionOS 2.0, *) public var maximumVisibility: Double This makes it sound like the new items are also a distance and not a percentage. Why wasn't Measurement used so the unit would be clear? Documentation doesn't explain this either. I'm hoping that this isn't being returned in the unit used by the current locale because my app lets you specify what unit to use for temperature, length, etc regardless of locale. Since all the temperature, length, etc data returned had used Measurement that was possible. The iOS weather app refers to the lowest/highest visibility in my preferred unit, which is miles.
1
0
402
Jan ’25
iPhone mirroring and controlling
One of my clients is interested in developing a system similar to BrowserStack for internal team usage. Could you please guide me on how to approach the development of this system? Specifically, the project requires: Full iPhone screen recording. Capturing and executing click events on the iPhone. Do I need to obtain permission from Apple for these functionalities?
0
0
367
Jan ’25
Multi Section Sidebar using List with selections for macOS
I'm trying to implement a 3 column NavigationSplitView in SwiftUI on macOS - very similar to Apple's own NavigationCookbook sample app - with the slight addition of multiple sections in the sidebar similar to how the Apple Music App has multiple sections in the sidebar. Note: This was easily possible using the deprecated NavigationLink(tag, selection, destination) API The most obvious approach is to simply do something like: NavigationSplitView(sidebar: { List { Section("Section1") { List(section1, selection: $selectedItem1) { item in NavigationLink(item.label, value: item) } } Section("Section2") { List(section2, selection: $selectedItem2) { item in NavigationLink(item.label, value: item) } } } }, content: { Text("Content View") }, detail: { Text("Detail View") }) But unfortunately, this doesn't work - it doesn't seem to properly iterate over all of the items in each List(data, selection: $selected) or the view is strangely cropped - it only shows 1 item. However if the 1 item is selected, then the appropriate bindable selection value is updated. See image below: If you instead use ForEach for enumerating the data, that does seem to work, however when you use ForEach, you loose the ability to track the selection offered by the List API, as there is no longer a bindable selection propery in the NavigationLink API. NavigationSplitView(sidebar: { List { Section("Section1") { ForEach(section1) { item in NavigationLink(item.label, value: item) } } Section("Section2") { ForEach(section2) { item in NavigationLink(item.label, value: item) } } } }, content: { Text("Content View") }, detail: { Text("Detail View") }) We no longer know when a sidebar selection has occurred. See image below: Obviously Apple is not going to comment on the expected lifespan of the now deprecated API - but I am having a hard time switching to the new NavigationLink with a broken sidebar implementation.
3
0
575
Jan ’25
Calling Async Functions in SwiftUI
Hi, I'd like to call an Async function upon a state change or onAppear() but I'm not sure how to do so. Below is my code: .onAppear() { if !subscribed { await Subscriptions().checkSubscriptionStatus() } } class Subscriptions { var subscribed = UserDefaults.standard.bool(forKey: "subscribed") func checkSubscriptionStatus() async { if !subscribed { await loadProducts() } } func loadProducts() async { for await purchaseIntent in PurchaseIntent.intents { // Complete the purchase workflow. await purchaseProduct(purchaseIntent.product) } } func purchaseProduct(_ product: Product) async { // Complete the purchase workflow. do { try await product.purchase() } catch { // Add your error handling here. } // Add your remaining purchase workflow here. } }
1
0
382
Jan ’25
Numerous Undefined symbol errors
Getting these two warnings: Could not find or use auto-linked framework 'CoreAudioTypes': framework 'CoreAudioTypes' not found Could not parse or use implicit file '/Applications/Xcode16.0/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/SwiftUICore.framework/SwiftUICore.tbd': cannot link directly with 'SwiftUICore' because product being built is not an allowed client of it Followed by 100 + errors like below Undefined symbol: _TIFFCleanup & Undefined symbol: _TIFFReadRGBAImageOriented ..... Any ideas? I have tried adding CoreAudioTypes etc. Error is not clear. Am trying to stop using Rosetta
Topic: UI Frameworks SubTopic: General
2
0
781
Dec ’24
SwiftUI: How to create different background colors for List sections?
I'm trying to achieve a specific UI design in SwiftUI where the bottom section of my List has a different background color than the top section. For example in the Medications portion of the Health app, the "Your Medications" Section has a different background than the top "Log" Section. How do I achieve this?: Here some example code. I wonder if I am supposed to use two Lists instead. If I use two Lists though and nest it in a ScrollView, the height of the lists needs to be specified. I am working with dynamic content, though so I don't think that is ideal. class ProtocolMedication {} // Example model struct HomeView: View { @Query private var protocolMedications: [ProtocolMedication] var body: some View { NavigationStack { List { // Upper sections with default background Section { Text("Content 1") } header: { Text("Log") } // Bottom section that needs different background Section { ForEach(protocolMedications) { medication in Text(medication.name) } } header: { Text("Your Medications") } } .listStyle(.insetGrouped) } } }
1
0
693
Dec ’24
the ID [":"] occurs multiple times within the collection, this will give undefined results!
Hi! After upgrading to Xcode 16.1 my watchOS app is getting below error using a DatePicker configured with: displayedComponents: .hourAndMinute. I cannot find a solution for this error/warning. It only appears when im using : .hourAndMinute or : .hourAndMinuteandSeconds, but not .date. Note! My code is unchanged only change I Xcode upgrade. Any suggestions? ForEach<Array, Array, _ConditionalContent<_ConditionalContent<_ConditionalContent<_ConditionalContent<YearPicker, MonthPicker>, _ConditionalContent<DayPicker, ComponentPicker>>, _ConditionalContent<_ConditionalContent<ComponentPicker, ComponentPicker>, _ConditionalContent<AMPMPicker, ModifiedContent<Text, _PaddingLayout>>>>, EmptyView>>: the ID [":"] occurs multiple times within the collection, this will give undefined results! import SwiftUI import WidgetKit struct TimeEditView: View { let title: String @Binding var storedValue: String var body: some View { Form { DatePicker( title, selection: Binding<Date>( get: { Date.from(storedValue) ?? Date() }, set: { newDate in storedValue = newDate.toString() } ), displayedComponents: .hourAndMinute ) .onChange(of: storedValue) { WidgetCenter.shared.reloadAllTimelines() print("Morning Start changed!") } } .navigationTitle(title) } }
0
0
301
Dec ’24