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

Allow custom tap gesture in List but maintain default selection gesture
I'm trying to create a List that allows multiple selection. Each row can be edited but the issue is that since there's a tap gesture on the Text element, the list is unable to select the item. Here's some code: import SwiftUI struct Person: Identifiable { let id: UUID let name: String init(_ name: String) { self.id = UUID() self.name = name } } struct ContentView: View { @State private var persons = [Person("Peter"), Person("Jack"), Person("Sophia"), Person("Helen")] @State private var selectedPersons = Set<Person.ID>() var body: some View { VStack { List(selection: $selectedPersons) { ForEach(persons) { person in PersonView(person: person, selection: $selectedPersons) { newValue in // ... } } } } .padding() } } struct PersonView: View { var person: Person @Binding var selection: Set<Person.ID> var onCommit: (String) -> Void = { newValue in } @State private var isEditing = false @State private var newValue = "" @FocusState private var isInputActive: Bool var body: some View { if isEditing { TextField("", text: $newValue, onCommit: { onCommit(newValue) isEditing = false }) .focused($isInputActive) .labelsHidden() } else { Text(person.name) .onTapGesture { if selection.contains(person.id), selection.count == 1 { newValue = person.name isEditing = true isInputActive = true } } } } } Right now, you need to tap on the row anywhere but on the text to select it. Then, if you tap on the text it'll go in edit mode. Is there a way to let the list do its selection? I tried wrapping the tap gesture in simultaneousGesture but that didn't work. Thanks!
3
2
1.9k
Feb ’23
NavigationSplitView hide sidebar toggle button
I'm trying to implement the same UI used by the Settings app on iPad: a split view with two columns that are visible at all times. This code produces the layout i want, but I would like to hide the "toggle sidebar visibility" button that the system introduces. Is there a SwiftUI API I can use to hide this button? Maybe an alternate way to setup views that tells the system that the button is not necessary? struct SomeView: View { var body: some View { NavigationSplitView( columnVisibility: .constant(.all), sidebar: { Text("sidebar") }, detail: { Text("detail") } ) .navigationSplitViewStyle(.balanced) } }
7
3
8.3k
Apr ’23
dropDestination does not work inside List
I've discovered an issue with using iOS 16's Transferable drag-and-drop APIs for SwiftUI. The dropDestination modifier does not work when applied to a subview of a List. This code below will not work, unless you replace the List with a VStack or any other container (which, of course, removes all list-specific rendering). The draggable modifier will still work and the item will drag, but the dropDestination view won't react to it and neither closure will be called. struct MyView: View { var body: some View { List { Section { Text("drag this title") .font(.largeTitle) .draggable("a title") } Section { Color.pink .frame(width: 400, height: 400) .dropDestination(for: String.self) { receivedTitles, location in true } isTargeted: { print($0) } } } } } Has anyone encountered this bug and perhaps found a workaround?
8
0
3.6k
May ’23
Keep ScrollView position when adding items on the top
I am using a LayzVStack embedded into a ScrollView. The list items are fetched from a core data store by using a @FetchResult or I tested it also with the new @Query command coming with SwiftData. The list has one hundred items 1, 2, 3, ..., 100. The user scrolled the ScrollView so that items 50, 51, ... 60 are visible on screen. Now new data will be fetched from the server and updates the CoreData or SwiftData model. When I add new items to the end of the list (e.g 101, 102, 103, ...) then the ScrollView is keeping its position. Opposite to this when I add new items to the top (0, -1, -2, -3, ...) then the ScrollView scrolls down. Is there a way with the new SwiftData and SwiftUI ScrollView modifiers to update my list model without scrolling like with UIKit where you can query and set the scroll offset pixel wise?
8
1
9.8k
Jun ’23
@Transient update doesn't propagate to view
When I update a variable inside my model that is marked @Transient, my view does not update with this change. Is this normal? If I update a non-transient variable inside the model at the same time that I update the transient one, then both changes are propagated to my view. Here is an example of the model: @Model public class WaterData { public var target: Double = 3000 @Transient public var samples: [HKQuantitySample] = [] } Updating samples only does not propagate to my view.
7
8
2.8k
Jun ’23
iOS17 UITextView inputView becomFirstResponder does not work
Simplely, when we set UITextView.inputView and then call becomeFirstResponder, but the custom inputView could not show expectedly just like before. We test this code in iOS17 and below, while only iOS17 does not work. And xcode console print these logs: Failed to retrieve snapshot. -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID Unsupported action selector setShiftStatesNeededInDestination:autoShifted:shiftLocked: Unsupported action selector setShiftStatesNeededInDestination:autoShifted:shiftLocked: Unsupported action selector setShiftStatesNeededInDestination:autoShifted:shiftLocked: Unsupported action selector setShiftStatesNeededInDestination:autoShifted:shiftLocked:
49
17
37k
Jun ’23
Alert within Popover is clipped in height causing title to be hidden
When showing an Alert from within a Popover that has a fixed height, the newly presented Alert is in the same position but gets limited by the Popovers height causing the title of the Alert to be hidden. Is this intentional behavior or are Alerts not supported within Popovers and I'd have to pass it through to my main view? Code: // // DemoalertPopover.swift // ******** // // Created by Thilo on 26.06.2023. // import SwiftUI struct DemoAlertPopover: View { @Environment(\.dismiss) var dismiss @State private var showDeleteConfirmation = false let dateFormatter: DateFormatter = { let formatter = DateFormatter() formatter.dateFormat = "dd.MM.yyyy" return formatter }() var body: some View { VStack(alignment: .leading, spacing: 0) { HStack { Text("Title").font(.extraLargeTitle).lineLimit(1) Spacer() Button(action: { dismiss() }) { Label("Close", systemImage: "xmark").labelStyle(.iconOnly) } } HStack(alignment: .center) { Text("Content").font(.largeTitle) Text("Content2").foregroundStyle(.secondary) } LazyVGrid(columns: [GridItem(.flexible(), spacing: 10),GridItem(.flexible(), spacing: 10),], spacing: 10) { Button(action: { showDeleteConfirmation = true }) { ZStack{ Image(systemName: "trash.fill").resizable().foregroundColor(.primary) }.aspectRatio(1/1,contentMode: .fit) .frame(maxWidth: .infinity).padding(5) }.aspectRatio(3/1,contentMode: .fit) }.alert("Are you sure you want to delete ...?", isPresented: $showDeleteConfirmation) { Button("Trash",role: .destructive, action: { print("Deleted") dismiss() }) Button("Cancel", role: .cancel) {} } message: { Text("This is a small message below the title, just so you know.") } } .padding(.all, 10).frame(width: 300) } } #Preview { DemoAlertPopover() } Video: https://www.youtube.com/shorts/31Kl7qbJIiA
2
0
846
Jun ’23
Occasional Keyboard Cannot Hide in iOS16.5
Help,I have encountered a thorny problem! In systems with iOS 16.5 and above, there is a probability that the keyboard will not disappear after it appears. And once it appears, unless the app is restarted, all places where the keyboard is used cannot be closed. I have tried using the forced shutdown method [UIView endEditing:YES], but it didn't work. When this exception occurs, I notice that there will be two UITextEffectsWindow at the same time. Does anyone know how to solve it?
Topic: UI Frameworks SubTopic: UIKit Tags:
1
2
349
Jul ’23
Xcode 15 Breaks Usage Of TextField.focused()
My usage of TextField.focused() works fine in Xcode 14.3.1 but is broken as of Xcode 15. I first noticed it in the second beta and it's still broken as of the 4th beta. Feedback / OpenRadar # FB12432084 import SwiftUI struct ContentView: View { @State private var text = "" @FocusState var isFocused: Bool var body: some View { ScrollView { TextField("Test", text: $text) .textFieldStyle(.roundedBorder) .focused($isFocused) Text("Text Field Is Focused: \(isFocused.description)") } } }
7
1
1.7k
Jul ’23
ARView rotation animation changes when coming back to it from a navigationLink
I have an app that uses RealityKit and ARKit, which includes some capturing features (to capture and image with added Entities). I have a navigationLink that allows the user to see the gallery of the images he has taken. When launching the App, the rotation animation of the ARView happens smoothly, the navigationBar transitions from one orientation to another with the ARView keeping it's orientation. However, when I go to the galeryView to see the images and go back to the root view where the ARView is, the rotation animation of the ARView changed: When transitioning from one orientation to another, the ARView is flipped by 90° before transitioning to the new orientation. The issue is shown in this gif (https://i.stack.imgur.com/IOvCx.gif) Any idea why this happens and how I could resolve it without locking the App's orientation changes? Thanks!
1
0
810
Jul ’23
NavigationSplitView not fully supported on smaller (SE) iPhones
My SwiftUI code runs fine on macOS, iOS(iPad) and larger iPhones, but will not display the detail view on smaller iPhones. Is there a way to force the smaller iPhones to display the detail view? And if not, When I put the App on the Apple store, for sale, will the Apple store be smart enough to flag the App as not appropriate for smaller iPhones, such as the SE (2nd and 3rd gen.) and prevent downloads? Thanks in advance for any guidance.
6
0
1.2k
Aug ’23
TipKit: showing a popover tip on a SwiftUI toolbar button
Hi folks, there's currently a known issue in TipKit due to which it won't show popover tips on buttons that are inside a SwiftUI ToolbarItem. For example, if you try this code, the popover tip will not appear: ToolbarItem { Button(action: {...}) { Label("Tap here", systemImage: "gear") } .popoverTip(sampleTip) } There's an easy workaround for this issue. Just apply a style to the button. It can be any style. Some examples are bordered, borderless, plain and borderedProminent. Here's a fixed version of the above code: ToolbarItem { Button(action: {...}) { Label("Tap here", systemImage: "gear") } .buttonStyle(.plain) // Adding this line fixes the issue. .popoverTip(sampleTip) } Hope this helps anyone running into this issue.
10
10
5.8k
Aug ’23
SwiftUI - Placing ToolbarItem on .keyboard does not work
I have a regular SwiftUI View embedded inside of a NavigationStack. In this view, I make use of the .searchable() view modifier to make that view searchable. I have a button on the toolbar placed on the .confirmationAction section, which is a problem when a User types into the search bar and the button gets replaced by the SearchBar's cancel button. Thus, I conditionally place the button, depending on whether a User is searching, either on the navigationBar or on the keyboard. The latter does not work however, as the button does not show and when trying to debug the View Hierarchy, Xcode throws an error saying the View Hierarchy could not be displayed. If I set the button to be on the .bottomBar instead, it shows up perfectly and the View Hierarchy also displays with no further issue. Has someone come across this issue and if so, how did you get it fixed? Thank you in advance.
25
25
13k
Aug ’23
GroupBox breaks ability of XCTest to find popovers?
I'm using Xcode 14.3.1 on macOS 13.5, and I've managed to reproduce my issue in a trivial application. All the project settings are left at the defaults for a macOS project. It looks like using a GroupBox breaks the ability of XCTest to find popovers connected to buttons (I suspect any UI element) inside the GroupBox. The debug console output from the code below lists 15 descendants from my window with the outside-the-GroupBox popover open, and one of them is definitely a popover. With the inside-the-GroupBox popover open, my window only shows nine descendants, and no popover (the rest of the difference is the popover's contents). It's simple enough I don't see what I could be doing wrong: import SwiftUI @main struct GroupBox_Popover_DemoApp: App { var body: some Scene { WindowGroup { ContentView() } } } struct ContentView: View { @State var outsidePopoverPresented: Bool = false @State var insidePopoverPresented: Bool = false var body: some View { VStack { Button("Outside GroupBox") { outsidePopoverPresented = true } .popover(isPresented: $outsidePopoverPresented, attachmentAnchor: .point(.leading), arrowEdge: .leading) { Popover(selected: .constant("Item A"), isPresented: $outsidePopoverPresented) } .padding() GroupBox { Button("Inside GroupBox") { insidePopoverPresented = true } .popover(isPresented: $insidePopoverPresented, attachmentAnchor: .point(.leading), arrowEdge: .leading) { Popover(selected: .constant("Item B"), isPresented: $insidePopoverPresented) } .padding() } } .padding() } } struct Popover: View { @Binding var selected: String @Binding var isPresented: Bool var body: some View { VStack(alignment: .leading) { Picker("", selection: $selected) { Text("Item A").tag("Item A") Text("Item B").tag("Item B") Text("Item C").tag("Item C") } .pickerStyle(.radioGroup) HStack { Spacer() Button("Cancel") { isPresented = false } } } .padding() .frame(width: 200) } } Then in my UI tests: import XCTest final class GroupBox_Popover_DemoUITests: XCTestCase { let mainWindow = XCUIApplication().windows override func setUpWithError() throws { continueAfterFailure = false XCUIApplication().launch() } func testPopovers() { let myDescendants = mainWindow.descendants(matching: .any) mainWindow.buttons["Outside GroupBox"].click() print("Window descendants with outside popover open:") print(myDescendants.debugDescription) mainWindow.popovers.buttons["Cancel"].click() mainWindow.buttons["Inside GroupBox"].click() print("Window descendants with inside popover open:") print(myDescendants.debugDescription) mainWindow.popovers.buttons["Cancel"].click() XCTAssert(true, "Test was able to hit cancel on both popovers.") } } Any ideas? Have I missed unchecking some "Ignore anything in a GroupBox" checkbox somewhere?
3
0
805
Aug ’23
Are SVG assets faster than PNG when rendered or not?
I recently was thinking about which is the best format to use for my little icons in the app, and was considering the performance of PNG versus SVG . I know that PNG decoders are hardware accelerated and parallelized, and the rendering is as simple as placing the pixels on the screen. On the other hand, SVG requires computation to determine the placement of pixels based on mathematical equations. Considering this, my current assumption is that PNG is faster to render than SVG. However, if SVG is also hardware-accelerated, it could alter the situation, although this may not be the case.
3
0
2.2k
Sep ’23
Seeking KeyboardLayout ID for All Native Keyboards in iOS and macOS
Hello everyone, I am currently working on a project that requires me to programmatically manage keyboard layouts on both iOS and macOS devices. I'm looking for a comprehensive list of KeyboardLayout ID values for all the native keyboard layouts available in both iOS and macOS. While I can extract some of this information from the /System/Library/Keyboard Layouts/ directory on macOS, I cannot extract all without adding every keyboard layout active, having a complete and pre-compiled list would be immensely helpful. Does anyone here have such a list or know where I might find one? Any guidance on this matter would be greatly appreciated. Thank you in advance for your assistance! JJ
4
0
950
Sep ’23