Create elegant and intuitive apps that integrate seamlessly with Apple platforms.

All subtopics
Posts under Design topic

Post

Replies

Boosts

Views

Activity

Icon Composer missing margins
I'm trying out Icon Composer Version 1.0 (27.4). I imported a simple logo and sized it in the outer circle. The icon appears good in the Icon Composer. But when I export the file and use it for my app icon it seems to be missing a margin or padding that other native application icons have. Am i supposed to be adding my own padding to these resulting icons or am I building them incorrectly? Any guidance would be appreciated. Thanks!
Topic: Design SubTopic: General Tags:
0
1
103
Jun ’25
HotKey support for sandboxed apps
App design: macos, Xcode 16.4, Sequioa 15.5, it is sandboxed Uses: Pods->HotKey for a global hotkey which xcode says "binary compatibility can't be guaranteed" This app is on the Apple Store and supposedly apps on the Apple Store can't use global hotkeys. Someone internally, installed it from the store and the global hotkey works just fine. I'm concerned for two potential problems; I need to find a hotkey library or code that is known to work with a sandbox'd Apple Store app. Why is it working now when everything I have read says it shouldn't.
0
0
115
Jun ’25
Page view in SwiftUI
I have an app for musicians that works with Songs and Setlists. The logical structure is as follows: A Setlist contains Songs. A Song has Sections, which include Lines (chords & lyrics). I want to view my Setlist in a "Page View," similar to a book where I can swipe through pages. In this view, the Song Sections are wrapped into columns to save screen space. I use a ColumnsLayout to calculate and render the columns, and then a SplitToPages modifier to divide these columns into pages. Problem: The TabView sometimes behaves unexpectedly when a song spans multiple pages during rendering. This results in a transition that is either not smooth or stops between songs. Is there a better way to implement this behavior? Any advice would be greatly appreciated. struct TestPageView: View { struct SongWithSections: Identifiable { var id = UUID() var title: String var section: [String] } var songSetlistSample: [SongWithSections] { var songs: [SongWithSections] = [] //songs for i in 0...3 { var sections: [String] = [] for _ in 0...20 { sections.append(randomSection() + "\n\n") } songs.append(SongWithSections(title: "Song \(i)", section: sections)) } return songs } func randomSection() -> String { var randomSection = "" for _ in 0...15 { randomSection.append(String((0..<Int.random(in: 3..<10)).map{ _ in "abcdefghijklmnopqrstuvwxyz".randomElement()! }) + " ") } return randomSection } var body: some View { GeometryReader {geo in TabView { ForEach(songSetlistSample, id:\.id) {song in let columnWidth = geo.size.width / 2 //song ColumnsLayout(columns: 2, columnWidth: columnWidth, height: geo.size.height) { Text(song.title) .font(.largeTitle) ForEach(song.section, id:\.self) {section in Text(section) } } .modifier(SplitToPages(pageWidth: geo.size.width, id: song.id)) } } .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) } } } public struct ColumnsLayout: Layout { var columns: Int let columnWidth: CGFloat let height: CGFloat let spacing: CGFloat = 10 public static var layoutProperties: LayoutProperties { var properties = LayoutProperties() properties.stackOrientation = .vertical return properties } struct Column { var elements: [(index: Int, size: CGSize, yOffset: CGFloat)] = [] var xOffset: CGFloat = .zero var height: CGFloat = .zero } public func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> CGSize { let columns = arrangeColumns(proposal: proposal, subviews: subviews, cache: &cache) guard let maxHeight = columns.map({ $0.height}).max() else {return CGSize.zero} let width = Double(columns.count) * self.columnWidth return CGSize(width: width, height: maxHeight) } public func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) { let columns = arrangeColumns(proposal: proposal, subviews: subviews, cache: &cache) for column in columns { for element in column.elements { let x: CGFloat = column.xOffset let y: CGFloat = element.yOffset let point = CGPoint(x: x + bounds.minX, y: y + bounds.minY) let proposal = ProposedViewSize(width: self.columnWidth, height: proposal.height ?? 100) subviews[element.index].place(at: point, anchor: .topLeading, proposal: proposal) } } } private func arrangeColumns(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> [Column] { var currentColumn = Column() var columns = [Column]() var colNumber = 0 var currentY = 0.0 for index in subviews.indices { let proposal = ProposedViewSize(width: self.columnWidth, height: proposal.height ?? 100) let size = subviews[index].sizeThatFits(proposal) let spacing = size.height > 0 ? spacing : 0 if currentY + size.height > height { currentColumn.height = currentY columns.append(currentColumn) colNumber += 1 currentColumn = Column() currentColumn.xOffset = Double(colNumber) * (self.columnWidth) currentY = 0.0 } currentColumn.elements.append((index, size, currentY)) currentY += size.height + spacing } currentColumn.height = currentY columns.append(currentColumn) return columns } } struct SplitToPages: ViewModifier { let pageWidth: CGFloat let id: UUID @State private var pages = 1 func body(content: Content) -> some View { let contentWithGeometry = content .background( GeometryReader { geometryProxy in Color.clear .onChange(of: geometryProxy.size) {newSize in guard newSize.width > 0, pageWidth > 0 else {return} pages = Int(ceil(newSize.width / pageWidth)) } .onAppear { guard geometryProxy.size.width > 0, pageWidth > 0 else {return} pages = Int(ceil(geometryProxy.size.width / pageWidth)) } }) Group { ForEach(0..<pages, id:\.self) {p in ZStack(alignment: .topLeading) { contentWithGeometry .offset(x: -Double(p) * pageWidth, y: 0) .frame(width: pageWidth, alignment: .leading) VStack { Spacer() HStack { Spacer() Text("\(p + 1) of \(pages)") .padding([.leading, .trailing]) } } } .id(id.description + p.description) } } } }
0
0
366
Nov ’24
A phone keyboard layout for easy typing!
Last November 13 I came up with a phone keyboard layout (strategy) that can make key size bigger hence less mistyping. The typical phone keyboard looks like this: My proposed keyboard looks like this: Essentially, it's a split keyboard with the left-hand part stacked above/below the right-hand part. Key size/width/height and the vertical distance between the left-hand part and right-hand part may be adjustable to suit different phone widths and user hand sizes. You guys can show the proposed keyboard's image on your phone and fit this keyboard to your phone width so you can actually simulate typing on it to see how it feels. On my phone, the letter keys in it are a little too big for my thumbs to reach the farthest keys, but as I said, key size should be adjustable to suit different phone widths and user hand sizes.
0
0
661
Oct ’24
[Technical Issue] BDK Native: Unexpected UI element (notch) appearing only in iPad environment
Hi, my name is Yuki. I'm developing an application with generative AI for junior and high school students based on the Nocode tool "bubble" (BDK Native). I want to upload this app to the App Store, however, a notch-like interface element is appearing only in the iPad environment, which is causing my app to fail App Store review. I've reached out to the BDK Native support team about this issue, but they were unable to identify the cause and only offered a refund as a solution. This is particularly frustrating as I'm unable to proceed with the App Store publication, and time is passing without a resolution. Technical details: The notch appears only on iPad devices The issue is not present on iPhone versions The app was built using bubble/BDK Native Multiple App Store submissions have been rejected due to this UI issue Has anyone encountered a similar issue or knows how to resolve this iPad-specific interface problem? Any guidance or suggestions would be greatly appreciated, as this is blocking our app's release. Thank you in advance for your help!
0
1
583
Nov ’24
OCR does not work
Hi, I'm working with a very simple app that tries to read a coordinates card and past the data into diferent fields. The card's layout is COLUMNS from 1-10, ROWs from A-J and a two digit number for each cell. In my app, I have field for each of those cells (A1, A2...). I want that OCR to read that card and paste the info but I just cant. I have two problems. The camera won't close. It remains open until I press the button SAVE (this is not good because a user could take 3, 4, 5... pictures of the same card with, maybe, different results, and then? Which is the good one?). Then, after I press save, I can see the OCR kinda works ( the console prints all the date read) but the info is not pasted at all. Any idea? I know is hard to know what's wrong but I've tried chatgpt and all it does... just doesn't work This is the code from the scanview import SwiftUI import Vision import VisionKit struct ScanCardView: UIViewControllerRepresentable { @Binding var scannedCoordinates: [String: String] var useLettersForColumns: Bool var numberOfColumns: Int var numberOfRows: Int @Environment(.presentationMode) var presentationMode func makeUIViewController(context: Context) -&gt; VNDocumentCameraViewController { let scannerVC = VNDocumentCameraViewController() scannerVC.delegate = context.coordinator return scannerVC } func updateUIViewController(_ uiViewController: VNDocumentCameraViewController, context: Context) {} func makeCoordinator() -&gt; Coordinator { return Coordinator(self) } class Coordinator: NSObject, VNDocumentCameraViewControllerDelegate { let parent: ScanCardView init(_ parent: ScanCardView) { self.parent = parent } func documentCameraViewController(_ controller: VNDocumentCameraViewController, didFinishWith scan: VNDocumentCameraScan) { print("Escaneo completado, procesando imagen...") guard scan.pageCount &gt; 0, let image = scan.imageOfPage(at: 0).cgImage else { print("No se pudo obtener la imagen del escaneo.") controller.dismiss(animated: true, completion: nil) return } recognizeText(from: image) DispatchQueue.main.async { print("Finalizando proceso OCR y cerrando la cámara.") controller.dismiss(animated: true, completion: nil) } } func documentCameraViewControllerDidCancel(_ controller: VNDocumentCameraViewController) { print("Escaneo cancelado por el usuario.") controller.dismiss(animated: true, completion: nil) } func documentCameraViewController(_ controller: VNDocumentCameraViewController, didFailWithError error: Error) { print("Error en el escaneo: \(error.localizedDescription)") controller.dismiss(animated: true, completion: nil) } private func recognizeText(from image: CGImage) { let request = VNRecognizeTextRequest { (request, error) in guard let observations = request.results as? [VNRecognizedTextObservation], error == nil else { print("Error en el reconocimiento de texto: \(String(describing: error?.localizedDescription))") DispatchQueue.main.async { self.parent.presentationMode.wrappedValue.dismiss() } return } let recognizedStrings = observations.compactMap { observation in observation.topCandidates(1).first?.string } print("Texto reconocido: \(recognizedStrings)") let filteredCoordinates = self.filterValidCoordinates(from: recognizedStrings) DispatchQueue.main.async { print("Coordenadas detectadas después de filtrar: \(filteredCoordinates)") self.parent.scannedCoordinates = filteredCoordinates } } request.recognitionLevel = .accurate let handler = VNImageRequestHandler(cgImage: image, options: [:]) DispatchQueue.global(qos: .userInitiated).async { do { try handler.perform([request]) print("OCR completado y datos procesados.") } catch { print("Error al realizar la solicitud de OCR: \(error.localizedDescription)") } } } private func filterValidCoordinates(from strings: [String]) -&gt; [String: String] { var result: [String: String] = [:] print("Texto antes de filtrar: \(strings)") for string in strings { let trimmedString = string.replacingOccurrences(of: " ", with: "") if parent.useLettersForColumns { let pattern = "^[A-J]\\d{1,2}$" // Letras de A-J seguidas de 1 o 2 dígitos if trimmedString.range(of: pattern, options: .regularExpression) != nil { print("Coordenada válida detectada (letras): \(trimmedString)") result[trimmedString] = "Valor" // Asignación de prueba } } else { let pattern = "^[1-9]\\d{0,1}$" // Solo números, de 1 a 99 if trimmedString.range(of: pattern, options: .regularExpression) != nil { print("Coordenada válida detectada (números): \(trimmedString)") result[trimmedString] = "Valor" } } } print("Coordenadas finales después de filtrar: \(result)") return result } } }
0
0
525
Jan ’25
Unable to Add Font to Asset Catalog as a Font Set (Appearing as "Data")
Hi Support Team, I am new here. I am unable to add my fonts to the asset catalog there is no option to add new font set when I click the plus sign. When I drag my files in they show up as data. I have a Contents.json in the font folder called BeVietnamProFont.font. Is there something I am doing wrong? Thanks SO much! { "info": { "version": 1, "author": "xcode" }, "properties": {}, "fonts": [ { "filename": "BeVietnamPro-Black.ttf", "weight": "black", "style": "normal" }, { "filename": "BeVietnamPro-BlackItalic.ttf", "weight": "black", "style": "italic" }, { "filename": "BeVietnamPro-Bold.ttf", "weight": "bold", "style": "normal" }, { "filename": "BeVietnamPro-BoldItalic.ttf", "weight": "bold", "style": "italic" }, { "filename": "BeVietnamPro-ExtraBold.ttf", "weight": "heavy", "style": "normal" }, { "filename": "BeVietnamPro-ExtraBoldItalic.ttf", "weight": "heavy", "style": "italic" }, { "filename": "BeVietnamPro-ExtraLight.ttf", "weight": "ultralight", "style": "normal" }, { "filename": "BeVietnamPro-ExtraLightItalic.ttf", "weight": "ultralight", "style": "italic" }, { "filename": "BeVietnamPro-Light.ttf", "weight": "light", "style": "normal" }, { "filename": "BeVietnamPro-LightItalic.ttf", "weight": "light", "style": "italic" }, { "filename": "BeVietnamPro-Regular.ttf", "weight": "regular", "style": "normal" }, { "filename": "BeVietnamPro-Italic.ttf", "weight": "regular", "style": "italic" }, { "filename": "BeVietnamPro-Medium.ttf", "weight": "medium", "style": "normal" }, { "filename": "BeVietnamPro-MediumItalic.ttf", "weight": "medium", "style": "italic" }, { "filename": "BeVietnamPro-SemiBold.ttf", "weight": "semibold", "style": "normal" }, { "filename": "BeVietnamPro-SemiBoldItalic.ttf", "weight": "semibold", "style": "italic" }, { "filename": "BeVietnamPro-Thin.ttf", "weight": "thin", "style": "normal" }, { "filename": "BeVietnamPro-ThinItalic.ttf", "weight": "thin", "style": "italic" } ] } ![]("https://developer.apple.com/forums/content/attachment/56835f04-d1c1-468f-808b-9a786562d367" "title=Screenshot 2025-07-13 at 1.05.05 PM.png ;width=539;height=630")
0
0
143
Jul ’25
(tvOS) Categories or Selection Menus Don't Fit the Design
Hi everyone, I'm currently working on my own Apple TV app. So far, things are going pretty well, but right now, I'm stuck on the design of the categories or selection menus. Here's a screenshot of how it looks right now: The green color and the border are intentionally added for now so I can see what is where. My actual goal is to remove the gray bar (or is this the "main bar"?). The pink bar and its border are just design elements that can be removed if needed. I want it to look more "original," like this: Here is the code: let title: String let isSelected: Bool var body: some View { HStack { Text(title) .foregroundColor(isSelected ? .black : .white) .font(.system(size: 22, weight: .regular)) .padding(.leading, 20) Spacer() Image(systemName: "chevron.right") .foregroundColor(isSelected ? .black : .gray) .padding(.trailing, 20) } .frame(height: 50) // Einheitliche Höhe für die Kategorien .background(Color.pink) // Innerer Hintergrund auf pink gesetzt .cornerRadius(10) // Abrundung direkt auf den Hintergrund anwenden .overlay( RoundedRectangle(cornerRadius: 10) .stroke(Color.green, lineWidth: 3) // Äußerer Rahmen auf grün gesetzt ) .padding(.horizontal, 0) // Entferne äußere Ränder .background(Color.clear) // Entferne alle anderen Hintergründe } } struct SettingsView_Previews: PreviewProvider { static var previews: some View { SettingsView() } } I’ve adjusted the code, but it’s still not quite right. When a category is not selected, it appears black instead of gray, like in the original design Here is the code: struct SettingsView: View { @State private var selectedCategory: String? var body: some View { NavigationStack { ZStack { Color.black .edgesIgnoringSafeArea(.all) VStack(spacing: 0) { // Überschrift oben in der Mitte Text("Einstellungen") .font(.system(size: 40, weight: .semibold)) .foregroundColor(.white) .padding(.top, 30) HStack { // Linke Seite mit Logo VStack { Spacer() Image(systemName: "applelogo") .resizable() .scaledToFit() .frame(width: 120, height: 120) .foregroundColor(.white) Spacer() } .frame(width: UIScreen.main.bounds.width * 0.4) // Rechte Seite mit Kategorien VStack(spacing: 15) { ForEach(categories, id: \.self) { category in NavigationLink( value: category, label: { SettingsCategoryView( title: category, isSelected: selectedCategory == category ) } ) .buttonStyle(PlainButtonStyle()) } } .frame(width: UIScreen.main.bounds.width * 0.5) } } } .navigationDestination(for: String.self) { value in Text("\(value)-Ansicht") .font(.title) .foregroundColor(.white) .navigationTitle(value) } } } private var categories: [String] { ["Allgemein", "Benutzer:innen und Accounts", "Video und Audio", "Bildschirmschoner", "AirPlay und HomeKit", "Fernbedienungen und Geräte", "Apps", "Netzwerk", "System", "Entwickler"] } } struct SettingsCategoryView: View { let title: String let isSelected: Bool var body: some View { HStack { Text(title) .foregroundColor(.white) .font(.system(size: 22, weight: .medium)) .padding(.leading, 20) Spacer() Image(systemName: "chevron.right") .foregroundColor(.gray) .padding(.trailing, 20) } .frame(height: 50) // Einheitliche Höhe für die Kategorien .background(isSelected ? Color.gray.opacity(0.3) : Color.clear) // Hervorhebung des ausgewählten Elements .cornerRadius(8) // Abgerundete Ecken .scaleEffect(isSelected ? 1.05 : 1.0) // Fokus-Animation .animation(.easeInOut, value: isSelected) } } struct SettingsView_Previews: PreviewProvider { static var previews: some View { SettingsView() } }
0
0
533
Jan ’25
When using the animation, the CPU usage rises to around 20-25%.
I'm new to developing with SwiftUI and I created a Pomodoro app for macOS that runs in the menu bar. I added 4 animations and when the user selects the snow animation, it starts snowing on the screen. But the app uses 20%-30% of the CPU and has high energy consumption. I can't reduce it and I couldn't find a solution. // snow animation import SwiftUI struct SnowflakeView: View { @State private var flakeYPosition: CGFloat = -100 @State private var isAnimating = false private let flakeSize: CGFloat = CGFloat.random(in: 10...30) private let flakeColor: Color = Color( red: Double.random(in: 0.8...1), green: Double.random(in: 0.9...1), blue: Double.random(in: 1...1), opacity: Double.random(in: 0.6...0.8) ) private let animationDuration: Double = Double.random(in: 1...3) private let flakeXPosition: CGFloat = CGFloat.random(in: 0...310) var body: some View { Text("❄️") .font(.system(size: flakeSize)) .foregroundColor(flakeColor) .position(x: flakeXPosition, y: flakeYPosition) .onAppear { if !isAnimating { withAnimation(Animation.linear(duration: animationDuration).repeatForever(autoreverses: false)) { flakeYPosition = 280 + 50 } isAnimating = true } } } } I also have how I run the animation below. ZStack { ForEach(0..<10, id: \.self) { index in if selectedAnimal == "Snow" { SnowflakeView() } else if selectedAnimal == "Rain" { RainDropAnimation() }else if selectedAnimal == "Leaf"{ LeafFallAnimation() }else if selectedAnimal == "Confetti"{ ConfettiAnimation() } } }
0
0
614
Nov ’24
Issue with External Browser on Sign In (Privy SDK limitation)
Hello Apple App Review Team, We are using Privy to enable sign in with Farcaster in our app. Privy is a 3rd party authentication SDK, and it currently opens the authentication URL using the system browser. Unfortunately, this behavior is handled internally by Privy and we do not have access or control to override it in order to present the sign-in flow in-app using SFSafariViewController. We understand the importance of maintaining a seamless and secure user experience, and we fully support the use of SFSafariViewController or ASWebAuthenticationSession. However, since Privy does not expose an option to change this behavior at the moment, we are limited by their current implementation. We have reached out to the Privy team requesting a change or improvement that would allow us to use SFSafariViewController instead of the external browser. In the meantime, we would appreciate your guidance on how to proceed, or whether an exception could be granted due to this 3rd party SDK limitation. Thank you for your understanding and support.
0
0
191
Jul ’25
Text with standard font style appears smaller on iPadOS than on iOS
I used standard font styles in an iOS app. For example .font(.headline). I hoped that developing this way would allow the adoption of the app to other platforms, relatively easy. However, when trying to run for iPadOS, the text did not increase in size to occupy the more abundant space offered by larger screen, but it actually shrank. Overall, the app does not look great "automatically". Why does it happen? What is the best practice for cross platform development with SwiftUI (with regards to font sizes). I want to make as little as possible human interface design decisions on my own and just let SwiftUI take care of everything. (But I also want the results to look as Apple would consider great looking)
0
0
491
Oct ’24
Optimizing for the 500 widgets and updating it faster in iOS
I am creating 500 textfield widgets and then updating them and all their 40 properties at once. I require to update all 500 widgets with their properties at once as it is a usecase in our app, so pooling and showing only those that will be on screen won't really help in this case. I have found that for updating all these 500 textfield widgets with their 40 properties, the time taken is 80 to 100 milliseconds. However, if I update the non-string properties like .text, then it comes down to half which is 40 to 50 milliseconds. Wanted to know if there was a far more quicker or optimized way to do this? The following snippet of code shows what I am doing: @objc private func handleImmediateMode() { let startTime = CFAbsoluteTimeGetCurrent() for (index, textField) in retainedInputFields.enumerated() { updateAllProperties(for: textField, index: index) } let endTime = CFAbsoluteTimeGetCurrent() print("Immediate Mode -- (500 fields, 40 props): \( (endTime - startTime) * 1000) ms") } In the above code, I have already created the 500 textfield widget, and then in updateAllProperties () function I am passing the textfield widget to it and then updating the 40 properties that the widget has. Particularily, the following properties: textField.placeholder = "Input Field (index)" UILabel().text Seem to be adding the extra 40 - 50 milliseconds.
0
0
28
Jul ’25
The screen of the watchOS app automatically turns off and pauses operation.
I developed a watchOS app to capture gyro data, save it in real-time as a CSV file, and send it to an iOS app. However, when I start writing with the watch on, the screen dims, and it stops working. It only resumes operation when I tap the screen again. Is there a way to let it run in the background and transmit files in real-time, even when the screen is off?
0
1
616
Nov ’24
iPadOS Floating Tab Bar Items (unselected) use Black Text - Unreadable with App Black Background (Dark Mode): UIKit App
Reference Feedback FB19152594 Occurs with my 3rd Party UIKit App called "Lifeorities". Latest occurrence was 7/27/25 at 13:49 pm. Launch app (actual device running iPadOS 26 or iPadOS 26 simulator) Initial screen displays view content and floating tab bar at top of screen (both portrait orientation and landscape). Floating tab bar items respond to liquid glass effect (but liquid glass appearance of the whole tab bar doesn't comply with new glass pill shaped tab bar area). Selected tab bar item obeys selected app designated color (assets). Unselected tab bar items are using black text which is unreadable on app background which used dark mode as default (as intended). Selecting another tab bar item shows the liquid glass effect as you navigate to the new tab bar item and shows the app designated color (assets). Previous tab bar item that was selected, now is unselected and shows black text. NOTE: iOS tab bar items work fine (show white foreground color as desired for unselected tab bar items).
0
1
89
Aug ’25
Changing pad colour in Image Events
I'm trying to use Image Events instead of Photoshop to manipulate a bunch of images. I need to extend the canvas and have the padding be white. I've tried pad theImage to dimensions {545, 545} with pad color {65535, 65535, 65535} But that does nothing. If I remove the 'with pad colour...' part, it works but the pad defaults to black. I've looked everywhere, but there doesn't seem to be a solution. Is there one?
0
0
322
Feb ’25