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

Created

NavigationSplitView: Make button clickable in detail-section safe area
Hi, I've tried to find a solution for this problem for weeks now but it seems no one knows how to solve it and Apple doesn't seem to care. I have a NavigationSplitView with two columns. In the detail column I have a button - or any other clickable control - which is placed in the very top where usually the safe area resides. The button is NOT clickable when he is in the safe area and I have NO idea why. I know I can place buttons in safe areas of other views and they are clickable. Please have a look at the code: `struct NavTestView: View { var body: some View { GeometryReader { p in VStack(spacing: 0) { NavigationSplitView { List(names) { Text($0.name).frame(width: p.size.width) .background(Color.green) }.listRowSpacing(p.size.height * 0.15 / 100 ) .toolbar(.hidden, for: .navigationBar) } detail: { TestView().ignoresSafeArea() }.frame(width: p.size.width, height: p.size.height, alignment: .topLeading) .background(Color.yellow) } } } } struct TestView: View { var body: some View { GeometryReader { p in let plusButton = IconButton(imageName: "plus.circle.fill", color: Color(uiColor: ThemeColor.SeaFoam.color), imageWidth: p.size.width * 5 / 100, buttonWidth: p.size.width * 5 / 100) let regularAddButton = Button(action: { log.info("| Regular Add Button pressed") } ) { plusButton } VStack { regularAddButton }.frame(width: p.size.width , height: p.size.height, alignment: .top) .background(Color.yellow) } } } ` this code produces the following screen: Any help would be really greatly appreciated! Thank you! Frank
1
0
673
Dec ’23
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
Jan ’24
Scroll TextEditor to cursor position
Hello. Is there a good SwiftUI approach on getting the TextEditor cursor position? I have a TextEditor and sometimes when we have a longer text inside it, the cursor is not seen because the keyboard is above covering the bottom of the TextEditor. I would like to somehow detect the position of the cursor, and if it's on the last line of the TextEditor, scroll to the bottom. I've already checked a bit and didn't find any good method of doing this in SwiftUI. If you have any ideas on how to do this, or even a different method any help would be highly appreciated. Thank you!
1
3
807
Jan ’24
AppClip+TipKit: Tips status stuck at .pending and don't display
Hi - I use TipKit in my App and AppClip. TipKit is configured with the app group's datastore. The tips show in the App, but on the AppClip, with the same rules/state, the tips do not display. Is this expected? TipKit is not listed as one of the frameworks unavailable to AppClips. try? Tips.configure([ Tips.ConfigurationOption.displayFrequency(.hourly), Tips.ConfigurationOption.datastoreLocation(.groupContainer(identifier: BuildConfiguration.shared.userDefaultsSuite)) ])
2
1
800
Jan ’24
Unwanted "More" button in tabView when selected tab is in 5th position and beyond
Hello SwiftUI devs, I would like to remove the "More" button that appears in the top left of the screen whenever the selected tab of a tab view is in 5th position and beyond. It ruins the layout. struct ContentView: View { private let tabs = (1...10).map { "\($0)" } @State private var selectedTab: String = "5" var body: some View { TabView(selection: $selectedTab) { ForEach(tabs, id: \.self) { tab in Text("Tab \(tab)") .tabItem { Label("Tab \(tab)", systemImage: "star") } .toolbar(.hidden, for: .tabBar) } } } } At first glance, one easy fix would be to rearrange the tabs list in the ForEach loop, putting the selected tab at the first position. This does the trick BUT we lose the states of the views, which is out of the question in my use-case. Getting rid of the tab view and handling the logic with a simple Switch paired with a state restoration mechanism using SceneStorage or SwiftData is probably possible but sounds like a white elephant compared to finding a solution to remove that "More" button. Thank you
1
1
605
Jan ’24
SwiftUi Picker in WatchOS throws Scrollview Error when using Digital Crown
The following WatchOs App example is very short, but already not functioning as it is expected, when using Digital Crown (full code): import SwiftUI struct ContentView: View { let array = ["One","Two","Three","Four"] @State var selection = "One" var body: some View { Picker("Array", selection: $selection) { ForEach(array, id: \.self) { Text($0) } } } } The following 2 errors are thrown, when using Digital Crown for scrolling: ScrollView contentOffset binding has been read; this will cause grossly inefficient view performance as the ScrollView's content will be updated whenever its contentOffset changes. Read the contentOffset binding in a view that is not parented between the creator of the binding and the ScrollView to avoid this. Error: Error Domain=NSOSStatusErrorDomain Code=-536870187 "(null)" Any help appreciated. Thanks a lot.
6
5
1.1k
Jan ’24
SwiftUI Sheet race condition
Hi! While working on my Swift Student Challenge submission it seems that I found a race condition (TOCTOU) bug in SwiftUI when using sheets, and I'm not sure if this is expected behaviour or not. Here's an example code: import SwiftUI struct ContentView: View { @State var myVar: Int? @State private var presentSheet: Bool = false var body: some View { VStack { // Uncommenting the following Text() view will "fix" the bug (kind of, see a better workaround below). // Text("The value is \(myVar == nil ? "nil" : "not nil")") Button { myVar = nil } label: { Text("Set value to nil.") } Button { myVar = 1 presentSheet.toggle() } label: { Text("Set value to 1 and open sheet.") } } .sheet(isPresented: $presentSheet, content: { if myVar == nil { Text("The value is nil") .onAppear { print(myVar) // prints Optional(1) } } else { Text("The value is not nil") } }) } } When opening the app and pressing the open sheet button, the sheet shows "The value is nil", even though the button sets myVar to 1 before the presentSheet Bool is toggled. Thankfully, as a workaround to this bug, I found out you can change the sheet's view to this: .sheet(isPresented: $presentSheet, content: { if myVar == nil { Text("The value is nil") .onAppear { if myVar != nil { print("Resetting View (TOCTOU found)") let mySwap = myVar myVar = nil myVar = mySwap } } } else { Text("The value is not nil") } }) This triggers a view refresh by setting the variable to nil and then to its non-nil value again if the TOCTOU is found. Do you think this is expected behaivor? Should I report a bug for this? This bug also affects .fullScreenCover() and .popover().
5
0
1.7k
Feb ’24
Swift unable to find sound file
Hi everyone, I'm currently facing an issue with AVAudioPlayer in my SwiftUI project. Despite ensuring that the sound file "buttonsound.mp3" is properly added to the project's resources (I dragged and dropped it into Xcode), the application is still unable to locate the file when attempting to play it. Here's the simplified version of the code I'm using: import SwiftUI import AVFoundation struct ContentView: View { var body: some View { VStack { Button("Play sound") { playSound(named: "buttonsound", ofType: "mp3") } } } } func playSound(named name: String, ofType type: String) { guard let soundURL = Bundle.main.url(forResource: name, withExtension: type) else { print("Sound file not found") return } do { let audioPlayer = try AVAudioPlayer(contentsOf: soundURL) audioPlayer.prepareToPlay() audioPlayer.play() } catch let error { print("Error playing sound: \(error.localizedDescription)") } }
8
0
2.7k
Feb ’24
TextEditor with a fixedSize and scroll disabled is completely broken
I am trying to build a text editor that shrinks to its content size. The closest I have been able to get has been to add the .scrollDisabled(true) and .fixedSize(horizontal: false, vertical: true) modifiers. This almost achieves what I need. There are two problems though: long single line text gets cut off at the end creating line breaks causes the text editor to grow vertically as expected (uncovering the cut off text in point 1 above). However, when you delete the line breaks, the TextEditor does not shrink again. I have had a radar open for some time: FB13292506. Hopefully opening a thread here will get more visibility. And here is some sample code to easily reproduce the issue: import SwiftUI struct ContentView: View { @State var text = "[This is some long text that will be cut off at the end of the text editor]" var body: some View { TextEditor(text: $text) .scrollDisabled(true) .fixedSize(horizontal: false, vertical: true) } } #Preview { ContentView() } Here is a gif of the behavior:
2
2
1.5k
Feb ’24
Xcode 15 console logging of system messages
Background I have a SwiftUI app that uses OSLog and the new Logger framework. In my SwiftUI views, I would like to use something like Self._logChanges() to help debug issues. After some trial and error, I can see the messages appear in the System console log for the app I am debugging using the com.apple.SwiftUI subsystem. Problem I'd like to see those same messages directly in Xcode's console window so I can filter them as needed. How do I do that? Thanks! -Patrick
4
1
2.4k
Feb ’24
Keyboard will not show when setting focus on a SwiftUI text field from a button in an ornament on visionOS
Using a button that is placed in the bottom ornament to set focus on a text field will not display the keyboard properly while a button embedded in the view will behave as expected. To demonstrate the issue, simply run the attached project on Vision Pro with visionOS 1.1 and tap the Toggle 2 button in the bottom ornament. You’ll see that the field does have focus but the keyboard is now visible. Run the same test with Toggle 1 and the field will get focus and the keyboard will show as expected. import SwiftUI import RealityKit import RealityKitContent struct ContentView: View { @State private var text = "" @State private var showKeyboard = false @FocusState private var focusedField: FocusField? private enum FocusField: Hashable { case username case password } var body: some View { VStack { TextField("Test", text: $text) .focused($focusedField, equals: .username) Text("Entered Text: \(text)") .padding() Button("Toggle 1") { // This button will work and show the keyboard if focusedField != nil { focusedField = nil } else { focusedField = .username } } Spacer() } .padding() .toolbar { ToolbarItem(placement: .bottomOrnament) { Button("Toggle 2") { // This button will set focus properly but not show the keyboard if focusedField != nil { focusedField = nil } else { focusedField = .username } } } } } } Is there a way to work around this? FB13641609
1
0
757
Feb ’24
StoreKit's manageSubscriptionsSheet view modifier not loading
Our app was just rejected by Apple because they say the subscription management sheet never loads. It just spins indefinitely. We're using StoreKit's manageSubscriptionsSheet view modifier to present the sheet, and it's always worked for us when testing in SandBox. Has anyone else had this problem? Given that it's Apple's own code that got us rejected, what's our path forward?
10
6
1.3k
Feb ’24
Widgets and App extensions
Hi, I have few questions regarding the widgets. I would like to know whether widget and app extensions are same ? This link(https://developer.apple.com/app-extensions/) says widget is type of app extension but I am not quite sure as few link in web says they are different. so need to confirm here :) Can a widget share same bundle id as the main app ? so basically can we use the same provisioning profile as the main app? If we use the same bundle id and provisioning profile, will there be any issue during the app store submission process.?
1
0
638
Feb ’24
SubscriptionStoreView showing 'The subscription is unavailable in the current storefront.' in production (StoreKit2)
I Implement a 'SubscriptionStoreView' using 'groupID' into a project (iOS is targeting 17.2 and macOS is targeting 14.1).Build/run the application locally (both production and development environments will work fine), however once the application is live on the AppStore in AppStoreConnect, SubscriptionStoreView no longer shows products and only shows 'Subscription Unavailable' and 'The subscription is unavailable in the current storefront.' - this message is shown live in production for both iOS and macOS targets. There is no log messages shown in the Console that indicate anything going wrong with StoreKit 2, but I haven't made any changes to my code and noticed this first start appearing about 5 days ago. I expect the subscription store to be visible to all users and for my products to display. My application is live on both the iOS and macOS AppStores, it passed App Review and I have users who have previously been able to subscribe and use my application, I have not pushed any new changes, so something has changed in StoreKit2 which is causing unexpected behaviour and for this error message to display. As 'SubscriptionStoreView' is a view provided by Apple, I'm really not sure on the pathway forward other than going back to StoreKit1 which I really don't want to do. Is there any further error information that can be provided on what might be causing this and how I can fix it? (I have created a feedback ticket FB13658521)
4
2
1.8k
Feb ’24
TimelineView using ExplicitTimelineSchedule ignores last date?
Hi, everyone. I'm trying my first TimelineView with an explicit schedule, but my attempt – and even the simple example from the documentation – doesn't seem to work as documented. Here's what the documentation says an explicit schedule does: The timeline view updates its content on exactly the dates that you specify, until it runs out of dates, after which it stops changing. And it gives this example: let dates = [ Date(timeIntervalSinceNow: 10), // Update ten seconds from now, Date(timeIntervalSinceNow: 12), // and a few seconds later. ] struct MyView: View { var body: some View { TimelineView(.explicit(dates)) { context in Text(context.date.description) } } } There are stipulations about what the view – which always displays some version of its content body – will do given only past or future dates, but it seems clear we should expect the view in this example to redraw at least once after it appears. Here's the rest of the discussion from the documentation with my comments after testing what's stated: If the dates you provide are in the past, the timeline view updates exactly once with the last entry. That seems true, considering the "update" to be the initial draw. If you only provide dates in the future, the timeline view renders with the current date until the first date arrives. Not exactly: it looks the "date" property of the initial render is the (future) date of the first schedule entry, even though it's drawn early. When the first date does arrive, the body closure doesn't seem to be called. Only on the next date, if there is one, is it called again. If you provide one or more dates in the past and one or more in the future, the view renders the most recent past date, refreshing normally on all subsequent dates. That also seems correct, except… … that in every scenario, the final date entry seems to be ignored completely! In other words, unless all date entries are in the past, the Timeline View stops before it runs out of dates. That documented example from the start, which we expect to redraw at least once after it appears? When I test it in a Playground, it appears, but doesn't redraw at all! So, that's my main point of confusion after experimenting with TimelineView for the first time. I can achieve my own goal by appending an extra entry to my explicit schedule – even appending an entry identical to the previous "final" entry seems to work – but naturally that leaves me unclear about why I need to. If anyone can tell me what I'm not understanding, I'd be grateful.
3
2
796
Feb ’24