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 - Drag gesture blocks scroll gesture only on iPhone 11
I'm pretty new to Swift and SwiftUI. I'm making my first app for sorting a gallery with some extra features. I was using my own iPhone for testing and just started testing my app on other Apple products. Everything works fine on iPad Air M1, iPhone 15 Pro, iPhone 15 Pro Max, iPhone 13, iPhone XS (Simulator), and iPhone 11 Pro (Simulator). However, when I tried to show my app to a family member with an iPhone 11, I came across an issue. Issue Description: My app takes all photos from iPhone's native gallery, then you can sort it by some spesific filters and delete pictures. It just looks like the native gallery. (I can add photos later if needed) You can just scroll the gallery by swiping up and down. You can press the select button and start selecting pictures to delete. I recently added a drag-to-select-multiple-pictures feature. This makes it feel more like the native iOS experience, eliminating the need to tap each picture individually. However, on the iPhone 11, the moment you open the app, you can't scroll. Scrolling is completely locked. You can still select pictures by tapping or dragging, so it's not a touch area issue. The same issue persists on the iPhone 11 simulator. And I think I found the problematic part in my (sadly messy) ContentView.swift file; ScrollView { RefreshControl(coordinateSpace: .named("refresh")) { await viewModel.refreshMediaItems() } LazyVGrid(columns: gridColumns, spacing: UIDevice.current.userInterfaceIdiom == .pad ? 12 : 4) { let items = viewModel.filteredItems(typeFilter: mediaTypeFilter, specialFilter: specialFilter) ForEach(Array(zip(items.indices, items)), id: \.1.id) { index, item in MediaThumbnailView( item: item, isSelected: selectedItems.contains(item.id), viewModel: viewModel, onLongPress: { if !isSelectionMode { toggleSelectionMode() selectedItems.insert(item.id) } }, onTap: { if isSelectionMode { toggleSelection(item: item) } else { viewModel.selectItem(item) } } ) .aspectRatio(1, contentMode: .fit) .background( GeometryReader { geometry in let frame = geometry.frame(in: .named("grid")) Color.clear.preference( key: ItemBoundsPreferenceKey.self, value: [ItemBounds(id: item.id, bounds: frame, index: index)] ) } ) } } .padding(.horizontal, 2) .coordinateSpace(name: "grid") .onPreferenceChange(ItemBoundsPreferenceKey.self) { bounds in itemBounds = Dictionary(uniqueKeysWithValues: bounds.map { ($0.id, $0) }) itemIndices = Dictionary(uniqueKeysWithValues: bounds.map { ($0.id, $0.index) }) } .gesture( DragGesture(minimumDistance: 0) .onChanged { gesture in if isSelectionMode { let location = gesture.location if !isDragging { startDragging(at: location, in: itemBounds) } updateSelection(at: location, in: itemBounds) } } .onEnded { _ in endDragging() } ) } .coordinateSpace(name: "refresh") } you can see the .gesture(.... part. I realised that this DragGesture and ScrollView blocks each other (somehow only on iPhone 11) highPriorityGesture also won't work. When I change it with simultaneousGesture, scroll starts to work again. BUT - since it's simultaneous, when multiple selection mode is activated, when I'm dragging my finger gallery also starts to scroll and it becomes a very unpleasant experience. After this issue I realised on native gallery iOS locks scroll when you are dragging for multiple selection and just when you release your finger you can scroll again even if the multiple selection mode is active. I tried a million things, asked claude, chatgpt etc. etc. Found some similar issues on stackoverflow but they were all related to iOS 18, not spesific to an iPhone. My app works fine on iOS 18 (15 Pro Max) iOS 18 drag gesture blocks scrollview Here are the some of the things I've tried: using highPriorityGesture and simultenousgesture together, tried to lock the scroll briefly while dragging, implement much complicated versions of these things with the help of claude, try to check if isSelectionMode is true or not All of them broke other things/won't work. Probably there's something pretty simple that I'm just missing; but iPhone 11 being the single problematic device confuses me. I don't want to mess too much with my already fragile logic.
1
0
778
Jan ’25
Adding a Label with UIImage and Text to the TabSection Header in tvOS 18+
I've been trying to add a header to the tabSection of the tabview in tvos 18+ . init( @TabContentBuilder<SelectionValue> content: () -> Content, @ViewBuilder header: () -> Header ) where Header : View, Footer == EmptyView Here the ehader clearly conforms to View but i cant quite fit the label with uiimage as the icon into this. This Label when i add it to any other view, the image is in the specified 50 x 50 size but inside header it functions weirdly to be of a huge size. but also to note, if i simply hav an icon here, it is correct. So what is the problem here.. can someone help me? im supposed to add the user profile and name in the header. I dont think there's any other way
Topic: UI Frameworks SubTopic: SwiftUI Tags:
0
0
352
Jan ’25
SwiftUI flash animation
I'm struggling to implement a flash animation in SwiftUI. Generally animations animate from one value to another. I'd like to animate from normal to the flashed state and then back to normal, each time the data shown by the view changes. The "flashed state" could be transparent, or a white background, or it could be a scale change for a pulse effect, or something. Example: struct MyView: View { let value: String; var body: some View { ZStack { Capsule() .fill(Color.green); Text(value); } }; }; Each time value changes, I'd like the colour of the capsule to quickly animate from green to white and back to green. I feel this should be easy - am I missing something? For bonus points: I'd like the Text to change to its new value at the midpoint of the animation, i.e. when the white text is invisible on the white background. I'd like to get the flash effect whenever I have a new value even if the new value is equal to the old value, if you see what I mean.
3
0
606
Jan ’25
Controlling the focus order in a UICollectionView
I'm running into a problem with the focus order in my UICollectionView in my tvOS app. The layout of my app is outlined in the following diagram On the uppermost layer I have a UITableView, each cell containing a single UICollectionView that can contain a variable number of UICollectionViewCells. When the user swipes down, I want the left-most item in the next row down to be selected, as follows: I've been able to get this to work for the majority of cases. The exception is when the previously focused item extends to the length of the screen - in this case the next focused item isn't the leftmost item, but rather the center item, as follows. Using focus guides won't really fit the use case here since collection views are dynamically generated. I've found that there is a function in UICollectionViewDelegate, indexPathForPreferredFocusedView that should help here but it only seems to be called intermittedly, even though I have set remembersLastFocusedIndexPath on the collectionview to true. I can force it to be called by calling setNeedsFocusUpdate() but I can't figure out a good place to call it - shouldUpdateFocus is too early and didUpdateFocus is too late. Is there some way to constrain the focus area of a view to a certain subset of it's frame - for example, the left-most quarter of its width? Or does anyone know of some other solution to this problem?
1
0
563
Jan ’25
SwiftData Query and optional relationships
Xcode 16.2 (16C5032a) FB16300857 Consider the following SwiftData model objects (only the relevant portions are shown) (note that all relationships are optional because eventually this app will use CloudKit): @Model final public class Team { public var animal: Animal? public var handlers: [Handler]? ... } @Model final public class Animal { public var callName: String public var familyName: String @Relationship(inverse: \Team.animal) public var teams: [Team]? ... } @Model final public class Handler { public var givenName: String @Relationship(inverse: \Team.handlers) public var teams: [Team]? } Now I want to display Team records in a list view, sorted by animal.familyName, animal.callName, and handlers.first.givenName. The following code crashes: struct TeamListView: View { @Query<Team>(sort: [SortDescriptor(\Team.animal?.familyName), SortDescriptor(\Team.animal?.callName), SortDescriptor(\Team.handlers?.first?.givenName)]) var teams : [Team] var body: some View { List { ForEach(teams) { team in ... } } } } However, if I remove the sort clause from the @Query and do the sort explicitly, the code appears to work (at least in preliminary testing): struct TeamListView: View { @Query<Team> var teams: [Team] var body: some View { let sortedTeams = sortResults() List { ForEach(sortedTeams) { team in ... } } } private func sortResults() -> [Team] { let results: [Team] = teams.sorted { team1, team2 in let fam1 = team1.animal?.familyName ?? "" let fam2 = team2.animal?.familyName ?? "" let comp1 = fam1.localizedCaseInsensitiveCompare(fam2) if comp1 == .orderedAscending { return true } if comp1 == .orderedDescending { return false } ... <proceed to callName and (if necessary) handler givenName comparisons> ... } } } While I obviously have a workaround, this is (in my mind) a serious weakness in the implementation of the Query macro.
5
0
812
Jan ’25
learning coregraphics help: connecting line to circles
Hi everyone, im in the process of delving more into coregraphics with swiftui, but I am at a roadblock. First I would like to ask, what are some good resources to learn coregraphics? Secondly: I currently have a circle view made and what I want to do is to make my circle view modular so that it can be directly connected to another given circle by a line. How can I do this? For example, I want my circles to represent nodes and be able to connect by lines to other nodes that are related. Thanks in advanced. Here is my code for the circle view: @State private var circleProgress: CGFloat = 0 let timer = Timer.publish(every: 0.016, on: .main, in: .common).autoconnect() private let animationDuration: TimeInterval = 1.5 @Binding var startPoint: CGPoint @Binding var endPoint: CGPoint var body: some View { GeometryReader { geometry in Canvas { context, size in // Circle parameters let circleSize: CGFloat = 50 let circleOrigin = CGPoint( x: size.width / 4, y: size.height / 2 - circleSize / 2 ) let circleRect = CGRect( origin: circleOrigin, size: CGSize(width: circleSize, height: circleSize) ) let circleCenter = CGPoint( x: circleOrigin.x + circleSize / 2, y: circleOrigin.y + circleSize / 2 ) // Animate circle creation var circlePath = Path() circlePath.addArc( center: circleCenter, radius: circleSize / 2, startAngle: .degrees(0), endAngle: .degrees(360 * circleProgress), clockwise: false ) context.addFilter(.shadow(color: .white.opacity(0.6), radius: 5, x: 1, y: 1)) // Add white shadow context.stroke( circlePath, with: .linearGradient( Gradient(colors: [.purple, .white]), startPoint: circleRect.origin, endPoint: CGPoint(x: circleRect.maxX, y: circleRect.maxY) ), lineWidth: 5 ) } .frame(width: 300, height: 150) .onReceive(timer) { _ in // Update circle progress let progressChange = 0.02 / animationDuration if circleProgress < 1.0 { circleProgress = min(circleProgress + progressChange, 1.0) } else { circleProgress = 0.0 // Reset the circle to repeat the animation } // Get the starting and ending points of the Canvas view startPoint = CGPoint(x: geometry.frame(in: .global).minX, y: geometry.frame(in: .global).minY) endPoint = CGPoint(x: geometry.frame(in: .global).maxX, y: geometry.frame(in: .global).maxY) // Print the points for debugging print("Start Point: \(startPoint.x), \(startPoint.y)") print("End Point: \(endPoint.x), \(endPoint.y)") } } .frame(width: 300, height: 150) } }
1
0
543
Jan ’25
Carplay在CPNowPlayingTemplate显示图片的败,且不可点击
System: iOS 18.1.1 When connected to Carplay, after playing a song, check the playback page CPNowPlayingTemplate. This error appears on the BMW car, as shown in the picture: In our project, this is achieved using the following methods: UIImage *image1 = [UIImage imageNamed:@"imageName"];; CPNowPlayingImageButton *button1 = [[CPNowPlayingImageButton alloc] initWithImage:image1 handler:^(__kindof CPNowPlayingButton * _Nonnull action) { //do something }]; UIImage *image2 = [UIImage imageNamed:@"imageName"];; CPNowPlayingImageButton *button2 = [[CPNowPlayingImageButton alloc] initWithImage:image2 handler:^(__kindof CPNowPlayingButton * _Nonnull action) { //do something }]; NSArray<CPNowPlayingButton *> *buttons; buttons = @[button1,button2]; [[CPNowPlayingTemplate sharedTemplate] updateNowPlayingButtons:buttons]; Is there any way to solve this problem?
Topic: UI Frameworks SubTopic: UIKit Tags:
1
0
382
Jan ’25
SwiftUI Animation - Spooky Action At A Distance
I have a grid-like container with subviews. I recently changed some internal details of the subviews, so that changes to the values they display animate. Now, the behaviour of the grid container has changed: the animation duration used for the internal changes is now also used when the grid is re-ordered or subviews are added or removed. I can see why this happens: the grid repositions the subviews, and the subview has declared an animation that applies to all of its properties however they are modified. This doesn't seem like a good idea to me. The principle of encapsulation suggests that I should be able to make internal changes to a component without suffering "spooky action at a distance", i.e. other components unexpectedly changing their behaviour. Is this an inherent issue with SwiftUI animations, or does it suggest that I am doing something wrong?
1
0
319
Jan ’25
Validate drag operations with Transferable
Let's say I want to build a simple photo management app on Mac or iPad with Swift UI. This app has multi-window support. My photos are organized inside albums. I should be able to drag photos between windows from one album to another. I struggle to get this working properly with Swift UI. Writing modern code I would like to use Transferable. Let's say my photos are not real files. So I can't use a FileRepresentation. Instead I use CodableRepresentation and encode an identifier. This identifier is later used to drive the move operation between folders. I ran into some limitations here Transferable seems to be meant for copy-like Drag & Drop operations. I have no possible to get a "move" cursor on macOS (it's always the copy cursor with the green + sign). Also the API reads like it is about importing/exporting – not moving. When using dropDestination on ForEach, I completely lack the possibility to deny a drop (e.g. when a photo is already part of the album). I'd like to have modifier key to switch between copying and moving. Sometimes a drop should be redirected to a different index. How to do that? Is there any chance to do this with Transferable? It even doesn't seem to be easy with NSItemProvider and onDrop/onDrag? Or should we still use a plain old UICollectionView/NSCollectionView, if we want to have more sophisticated control over drag/drop validation?
4
0
442
Jan ’25
State Restoration not restoring root view controller
I'm trying to implement UI state restoration in an old Objective-C UIKit app that does not use scenes and also does not have a storyboard. I have implemented the correct AppDelegate methods -- application:shouldSaveSecureApplicationState: and application:shouldRestoreSecureApplicationState: -- and I can see that they are being called when expected. I have also implemented the state restoration and UIViewControllerRestoration viewControllerWithRestorationIdentifierPath:coder: methods for the view controllers I want to persist and restore; along with correctly setting their restorationIdentifier and restorationClass properties. I can also see that those are being called when expected. I've also installed the restorationArchiveTool and have verified that the persisted archive contains the expected view controllers and state. However, once state restoration is complete, the window's rootViewController property is still nil and has not been assigned to the view controller that has the restorationIdentifier of the rootViewController at the time the state is persisted. I found this sample app that does what I want to do -- persist and restore the state of the view controllers without the use of storyboards. Running that I verified that it does in fact work as expected. https://github.com/darrarski/iOS-State-Restoration The difference between what that app does and what mine does, is that it always creates the top level view controllers in application:willFinishLaunchingWithOptions:. func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool { let viewControllerA = DemoViewController() viewControllerA.title = "A" let navigationControllerA = UINavigationController(rootViewController: viewControllerA) navigationControllerA.restorationIdentifier = "Navigation" let viewControllerB = DemoViewController() viewControllerB.title = "B" let navigationControllerB = UINavigationController(rootViewController: viewControllerB) navigationControllerB.restorationIdentifier = "Navigation" let tabBarController = UITabBarController() tabBarController.restorationIdentifier = "MainTabBar" tabBarController.viewControllers = [navigationControllerA, navigationControllerB] window = UIWindow(frame: UIScreen.main.bounds) window?.restorationIdentifier = "MainWindow" window?.rootViewController = tabBarController return true } Unfortunately, my app is more dynamic and the rootViewController is determined after launch. When I updated the app to be structured more like mine, I see that it fails the same as mine and no longer restores the rootViewController. class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? var didRestoreState = false func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool { window = UIWindow(frame: UIScreen.main.bounds) window?.restorationIdentifier = "MainWindow" return true } func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { if !didRestoreState { let viewControllerA = DemoViewController() viewControllerA.title = "A" let navigationControllerA = UINavigationController(rootViewController: viewControllerA) navigationControllerA.restorationIdentifier = "Navigation" let viewControllerB = DemoViewController() viewControllerB.title = "B" let navigationControllerB = UINavigationController(rootViewController: viewControllerB) navigationControllerB.restorationIdentifier = "Navigation" let tabBarController = UITabBarController() tabBarController.restorationIdentifier = "MainTabBar" tabBarController.viewControllers = [navigationControllerA, navigationControllerB] window?.rootViewController = tabBarController } window?.makeKeyAndVisible() return true } func application(_ application: UIApplication, shouldSaveSecureApplicationState coder: NSCoder) -> Bool { let libraryDirectory = FileManager.default.urls(for: .libraryDirectory, in: .userDomainMask).first let appStateUrl = libraryDirectory?.appendingPathComponent("Saved Application State") NSLog("Restoration files: \(appStateUrl?.path ?? "none")") return true } func application(_ application: UIApplication, shouldRestoreSecureApplicationState coder: NSCoder) -> Bool { return true } func application(_ application: UIApplication, didDecodeRestorableStateWith coder: NSCoder) { didRestoreState = true } } I don't really understand why this doesn't work since the archive file looks identical in both cases, and the methods used to create and restore state of the view controllers are being called in both cases. Is there something else I need to do to correctly restore the view controllers without having to create them all before state restoration begins?
2
1
385
Jan ’25
SwiftUI Issues on iOS 16: App Freezes, Buttons Unresponsive, and Missing Data (Works Fine on iOS 17)
Hi everyone, I’m experiencing significant issues with my SwiftUI app when running on iOS 16. These issues are not present in iOS 17, where everything works as expected. I’m hoping someone can provide insights or suggestions on how to address these problems. The Problems App Freezing: In certain views, the app becomes completely unresponsive when running on iOS 16. There are no clear patterns or console logs pointing to the source of the freeze. Unresponsive Buttons: Buttons stop working in some views. Tapping them does nothing, even though the logic and bindings are correct. Missing Data: Data fetched from services (remote APIs) or local storage doesn’t show up in the UI. Expected Behavior The app should handle user interactions and display data correctly on both iOS 16 and iOS 17, without freezes or unresponsive elements. Environment: Xcode Version: Xcode 15.4 Deployment Target: iOS 16 Testing Devices: iPhone 14 with iOS 17.6.1, iPhone 13 with iOS 18.1.1, iPhone 8 with iOS 16.4, iPhone 12 with 16.4, iPhone 8 Plus with iOS 16.0, iPhone 8 Plus with 16.7.10
Topic: UI Frameworks SubTopic: SwiftUI
3
0
341
Jan ’25
Why can NavigationStacks be nested in a sheet but not an overlay?
If two NavigationStacks are nested with the inner stack in a sheet NavigationLinks in the inner stack open as expected in the inner stack. struct ContentView: View { var body: some View { NavigationStack { Color.clear .sheet(isPresented: .constant(true)) { NavigationStack { ExampleList() .navigationTitle("Inner Navigation Stack") } .presentationDetents([.medium]) } .navigationTitle("Outer Navigation Stack") } } } If I try the same with an overlay instead of a sheet, NavigationLinks in the inner stack unexpectedly open in the outer stack. struct ContentView: View { var body: some View { NavigationStack { Color.clear .overlay(alignment: .bottomTrailing) { NavigationStack { ExampleList() .navigationTitle("Inner Navigation Stack") } .frame(width: 200, height: 250) .border(.black, width: 5) .padding() .presentationDetents([.medium]) } .navigationTitle("Outer Navigation Stack") } } } Even the navigation title for the outer stack is being overridden by the inner stack's navigation title. TLDR What magic is sheet using that allows for nested NavigationStacks and how might I approach getting this to work in an overlay? iOS 18.2 Xcode 16.2 The definition of ExampleList for reproducibility: struct ExampleList: View { var body: some View { List(1..<5) { number in NavigationLink("\(number)") { Text("\(number)") .font(.largeTitle) } } } }
1
0
506
Jan ’25
How to determine the default duration of a long-press
Using gesture recognizers it is easy to implement a long-press gesture to open a menu, show a preview or something else on the iOS platform. And you can provide the duration the user must hold down the finger until the gesture recognizer fires. But I could not yet find out how to determine the default duration for a long-press gesture that is configured in the system settings within the "accessibility" settings under "Haptic Touch" (the available options are fast, standard and slow here). Is it possible to read out this setting, so my App can adapt to this system setting as well?
1
0
356
Jan ’25
iPadOS 18 App (on Apple Silicon) - Duplicate Tab Bar Appearing in Toolbar
With iPadOS 18, the UITabBar now defaults to the floating style. I successfully reverted the tab bar to its traditional style by overriding the UITabBarController's horizontalSizeClass property: self.tabBarController?.traitOverrides.horizontalSizeClass = .unspecified When I launch the app on my Mac using Apple Silicon, TWO tab bars appear: One appears at the bottom of the screen, like a traditional tab bar. The second tab bar is still embedded in the app toolbar in its floating style. Is this a bug? How do you ensure that overriding the horizontalSizeClass will remove/hide the floating tab bar when running an app on Apple Silicon? TIA! (Demonstrated on a test project)
0
0
484
Jan ’25
Single window keyboard shortcut
I made a macOS document-based app that has a second scene that's a Window. It's name appears in the single window list of the Windows menu, but has no assigned shortcut. I've tried the following to assign a shortcut to it, but it doesn't add a "⌘L" as I want: Window("Logs", id: "logs") { LogsView() } .keyboardShortcut("l") I can brute-force this using .commands to replace the menu item but that seems crude and unnecessary. Is it the only way?
2
0
478
Jan ’25
SwiftUI Canvas Text - scale to fill rectangle
How do I draw a single line of text in a SwiftUI Canvas, scaled to fill a given rectangle? Example: Canvas { context, size in let r = CGRect(origin: CGPointZero, size: size); // Whole canvas let t = Text("Hello World"); context.draw(t, in: r); } Outside of Canvas I'd add .minimumScaleFactor(0) .lineLimit(1), and I guess set a large default font size, and I'd get the result I want. But inside Canvas, .minimumScaleFactor and .lineLimit don't seem to be available; they return some View, not Text, which can't be used in context.draw. (Is there a trick to make that work?) I have written the following to do this, but I think there must be an easier way to achieve this! Suggestions? extension GraphicsContext { mutating func draw_text_in_rect(string: String, rect: CGRect) { let text = Text(string) .font(.system(size: 25)); // The font size used here does matter, because e.g. letter spacing // varies with the font size. let resolved = resolve(text); let text_size = resolved.measure(in: CGSize(width: CGFloat.infinity, height: CGFloat.infinity)); let text_aspect = text_size.width / text_size.height; let fit_size = CGSize(width: min(rect.size.width, rect.size.height*text_aspect), height: min(rect.size.height, rect.size.width/text_aspect)); let fit_rect = CGRect(x: rect.origin.x + (rect.size.width-fit_size.width)/2, y: rect.origin.y + (rect.size.height-fit_size.height)/2, width: fit_size.width, height: fit_size.height); let scale = fit_size.width / text_size.width; // For debug: // var p = Path(); // p.addRect(fit_rect); // stroke(p, with: GraphicsContext.Shading.color(.red), lineWidth: 1); translateBy(x: fit_rect.minX, y: fit_rect.minY); scaleBy(x:scale, y:scale); draw(resolved, at: CGPointZero, anchor: UnitPoint.topLeading); transform = CGAffineTransformIdentity; } };
0
0
368
Jan ’25
INUIHostedViewControlling ViewController's Life Cycle Events not being Called
I am implementing a new Intents UI Extension and am noticing that the viewWillDisappear, viewDidDisappear, and deinit methods are not being called on my UIViewController that implements INUIHostedViewControlling, when pressing the "Done" button and dismissing the UIViewController. This causes the memory for the UI Extension to slowly increase each time I re-run the UI Extension until it reaches the 120MB limit and crashes. Any ideas as to what's going on here and how to solve this issue?
2
0
417
Jan ’25