I am creating a shooting game which uses Game Center for multiplayer and I want to make the Matchmaker view look different. How can I do that?
Explore the art and science of app design. Discuss user interface (UI) design principles, user experience (UX) best practices, and share design resources and inspiration.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Hi,
I am trying to create a custom SF Symbol from an SVG file created with Affinity Designer but, even though my SVG file look perfect in Firefox for example compared to the exported custom.circle.svg file (as recommended in Apple's documentation), I fail to get rid of this error:
"The provided variants are not interpolatable"
My creation process using Affinity Designer is:
Export as SVG file
Duplicate the custom.circle.svg file exported from the SF Symbols app
In the new file, replace the 3 "path" tags in the "g" sections "id="Black-S", "Regular-S", "Ultralight-S" with the paths from the SVG file exported from Affinity designer
Set the 3 transform matrices to "matrix(1 0 0 1 0 0)" for the 3 variants to be generated at the correct location.
Verify in an SVG viewer that the file looks correct.
Import the file via Drag&Drop into the SF Symbols app.
What is wrong with my file?
Thank you in advance for any help,
Marc
mySymbol.svg.txt
I created a data structure based on a dictionary of words. The purpose is to link each word to all other words made up of the same letters plus one.
Example: table -> ablate, cablet, tabled, gablet, albeit, albite, etc.
For this I built a data model made of three entities: Word, Draw, Link.
A Draw is a set of letters corresponding to a Word and sorted in alphabetic order, like : HOUSE -> EHOSU. A Link is a letter that you add to a Draw to get another Draw.
So my data model looks like this:
And here is how I implemented it in Xcode:
Entity Word
(let's forget the attribute optComp that plays no role here)
Entity Draw
Entity Link
I am populating the data in two steps:
first I read a list of words from a .txt source and I populate the Word entity and at the same time the Draw entity with the corresponding relationship (function loadDic())
This first step apparently works fine. I can easily find all anagrams of any word with something like word.sort.word.spelling
I read through the Draw entity. For each draw I seek all existing +1 draws considering each letter of the alphabet. If there are, I create a Link and add the relationships (function createLinks())
Here is where something goes wrong. If the Link's and the relationship Draw.plus seem to be correctly created, the other relationship Link.gives is only partially populated, say 50%.
Moreover, I tried to apply an additional routine (updateLinks()) , focusing only on Link's with an empty Link.gives relationship and updating them. But again, only 50% of the nil relationships appear to be populated.
I could not find out why those relationships are not properly populated. If someone can help me out I would be grateful.
Here is the code:
LoadDic() function (OK) :
func loadDic() {
print("Loading dictionary...")
dataAlreadyLoaded.toggle()
guard let url = Bundle.main.url(forResource: INPUT_FILE, withExtension: "txt") else {
fatalError("\(INPUT_FILE).txt not found")
}
if let dico = try? String(contentsOf: url, encoding: String.Encoding.utf8 ) {
let lines = dico.split(separator: "\r\n")
for line in lines {
let lineArray = line.split(separator: " ")
print("\(lineArray[0])") // word
let wordSorted = String(lineArray[0].sorted())
let draw = getDraw(drawLetters: wordSorted) ?? addDraw(drawLetters: wordSorted) // look if draw already exists, otherwise create new one.
let wordItem = Word(context: viewContext) // create word entry with to-one-relationship to draw
wordItem.spelling = String(lineArray[0])
wordItem.optComp = (Int(String(lineArray[1])) == 1)
wordItem.sort = draw
do {
try viewContext.save()
} catch {
print("Errort saving ods9: \(error)")
}
}
}
print("Ods Chargé")
}
func addDraw(drawLetters: String) -> Draw {
let newDraw = Draw(context: viewContext)
newDraw.draw = drawLetters
return(newDraw)
}
func getDraw(drawLetters: String) -> Draw? {
let request: NSFetchRequest<Draw> = Draw.fetchRequest()
request.entity = Draw.entity()
request.predicate = NSPredicate(format: "draw == %@", drawLetters)
do {
let drw = try viewContext.fetch(request)
return drw.isEmpty ? nil : drw[0]
} catch {
print("Erreur recherche Tirage")
return nil
}
}
createLinks() function (NOK):
func createLinks() {
var erreur = " fetch request <Draw>"
let request: NSFetchRequest<Draw> = Draw.fetchRequest()
request.entity = Draw.entity()
request.predicate = NSPredicate(value: true)
print("Building relationships...")
do {
let draws = try viewContext.fetch(request)
count = draws.count
for draw in draws {
print("\(count) - \(draw.draw!)")
linkTable.removeAll()
for letter in ALPHABET {
print(letter)
let drawLettersPlus = String((draw.draw! + String(letter)).sorted()) // draw with one more letter
if let drawPlus = draws.first(where: { $0.draw == drawLettersPlus }) { // look for Draw entity that matches augmented draw
let linkItem = Link(context: viewContext) // if found, create new link based on letter with relationship to augmented draw
linkItem.letter = String(letter)
linkItem.gives = drawPlus
erreur = " saving \(draw.draw!) + \(letter)"
try viewContext.save()
linkTable.append(linkItem) // saves link to populate the one-to-many relationship of the initial draw, once the alphabet is through
}
}
let drawUpdate = draw as NSManagedObject // populate the one-to-many relationship of the initial draw
let linkSet = Set(linkTable) as NSSet
drawUpdate.setValue(linkSet, forKey: "plus")
erreur = " saving \(draw.draw!) links plus"
try viewContext.save()
count -= 1 // next draw
}
} catch {
print("Error " + erreur)
}
print("Graph completed")
}
updateLinks function (NOK):
func updateLinks() {
var erreur = "fetch request <Link>"
let request: NSFetchRequest<Link> = Link.fetchRequest()
request.entity = Link.entity()
print("Running patch...")
do {
request.predicate = NSPredicate(format: "gives == nil")
let links = try viewContext.fetch(request)
for link in links {
let baseDraw = link.back!.draw!
print("\(baseDraw) \(link.letter!)")
let augmDrawLetters = String((baseDraw + link.letter!).sorted())
if let augmDraw = getDraw(drawLetters: augmDrawLetters) {
viewContext.perform {
let updateLink = link as NSManagedObject
updateLink.setValue(augmDraw, forKey: "gives")
erreur = " saving \(augmDraw.draw!) \(link.letter!)"
do {
try viewContext.save()
} catch {
print("Erreur mise à jour lien")
}
}
}
}
} catch {
print("Error " + erreur)
}
}
RESULT
And this is the output showing the content of the Draw entity with relationships after createLinks() is applied:
And here after updateLinks() is applied :
So…I am hitting a wall here and could use some guidance towards best practice.
I’ve developed an app in Xcode/SwiftUI that renders just fine on the iPhone - text, images, buttons, frames…everything is nicely centered on the screen or scrolls where and when I want.
The iPad though…not so much. I’m having issues with tops and bottoms being cut off in scrollviews. These are just straight up text screens too - the ones with other elements/controls…they’re rendering fine.
I’ve tried a mix of geometry, vstack, scrollview, padding, spacers…the lot of it. Nothing I seem to do works - the views do not want to fill and fit properly.
And, of course, the issue becomes worse the moment you flip the iPad into landscape view. Or use the 13” models.
I’d imagine others are battling these issues as well and found solutions, so I decided to hit up the brain trust.
When I first tried to create a custom SF Symbol using Affinity Designer, I encountered difficulties because of two problems which have cumulated:
SVG files created by Affinity Designer cannot be directly imported into the SF Symbols app because Affinity Designer totally recreates the content of tag <g id="Notes">, making so the file incompatible for later import into the SF Symbols app. So I had to manually fix that tag via a text editor in order to make the file compatible with the SF Symbols app.
Because I was so focused on fixing manually the SVG file, I did not see that the actual content of my SVG file did not follow all Apple recommendations. As a consequence, I have posted this question on the forum:
Struggling creating a custom SF Symbol: The provided variants are not interpolatable
Finally I have found a way to create an SVG file compatible with SF Symbols using Affinity Designer, meeting the Apple recommendations, and at last perfectly suitable for further use in Xcode.
You will find the solution in my reply to this post below which is actually a quasi copy/paste of my final own reply to my original post.
Marc
Hi,
I would like to make an educational app for helping my students to learn about malaria diagnosis and need to put some animal icon.
In the tabview, is it possible to use system images like monkey, bird, mouse. I cannot see these animals in SF symbol list.
I'm trying to use URL structure in the foundation framework and it is failing to build, returning a nil value. Could it be trying to evaluate the string I am giving it as a variable for its argument at build time? Is there a test argument I can give URL to see if it can return a non-nil value? (of URL type)?
Not sure if anyone else has this issue, however with the new appearances when i use the dark appearance and then open the app "TickTick", the icon goes to its original colour until the app is closed.
I've seen a few older posts claiming the same behavior I'm seeing which is my cloudkit/core data app only syncs to iOS when the iOS app is reloaded. Can someone clarify if this is a bug, or the expected behavior.
I have an iOS app which the entire purpose of it is to view synced data from MacOS, and I have a refresh button which does nothing because the data only syncs when the app is closed and reopened. Am I supposed to tell users to close and reopen the app to see fresh data? that seems like a terrible UI behavior, and I know apple does not accept this as all of their apps sync without needing to be reloaded. For example the notes app does not need to be reloaded for the MacOS -> iOS data to be synced.
Looking at the UIDesignRequiresCompatibility documentation, watchOS is not listed among the supported platforms. When added to the project, it is also being ignored, resulting in Liquid Glass design. It is possible to opt-out from Liquid Glass design temporarily. Is that just an oversight for Apple Watch please?
Prior to iOS 26, this successfully gave me a modal view with a transparent background:
let settingsVC = MySettingsViewController()
settingsVC.modalPresentationStyle = .automatic
//settingsVC.modalPresentationStyle = .overCurrentContext
self.present(settingsVC, animated: true, completion: {
}
MySettingsViewController:
self.view.backgroundColor = UIColor(white: 0, alpha: 0.5)
Now in iOS 26, modal view is presented in a opaque grey background.
i accidentally updated my iphone with the ios 18 and i dislike it. the emoji display were too huge and the picture gallery was kinda messy. i hope apple could fix this by bringing back the old emoji display and the gallery settings.
Hello,
You are developing iOS 26. I hope you will fix the issue where the AṀ/PM is missing from the Time Display.
Thanks
Hello,
Im new to Xcode, ive been taking some classes and watching YouTube videos as well as using AI. Im having an issue I cannot find a video on, and AI just keeps screwing up my layout and sizing.
Here is the issue, I have a Custom Made Image for my Sign In button, for my log in page on Xcode. The issue being that I can barely see the button and when I go to adjust the size the whole layout gets screwed up. My Logo Image (supposed to take up the top 50% of the screen) takes over the whole Botton of the screen and I loose my username and password Text threads and images. I guess my question is, is this an issue with the size of image ive uploaded or is this an issue with my code? I changed the size of the Image I created in Canva to 900pixles for the width and 300pixals for the height and that did absolutely nothing to my image in Xcode.
Below is the Button and Create Account section in my code that seems to be having issues. Ppppplease help me.
var body: some View {
NavigationStack(path: $navigationPath) {
ZStack {
// Background image
Image("Background1")
.resizable()
.scaledToFill()
.ignoresSafeArea()
.clipped()
// Main content
ScrollView {
VStack(spacing: 20) {
// Logo
Image("DynastyStatDropLogo")
.resizable()
.scaledToFit()
.padding(.top, -160)
.padding(.bottom, -30)
// Form elements
// Username field
ZStack {
Image("UsernameBar")
.resizable()
.aspectRatio(contentMode: .fill)
.padding()
TextField("UserName:", text: $textInput)
.padding(.horizontal, 75)
.background(Color.clear)
.foregroundColor(.red)
.focused($focus, equals: .username)
.submitLabel(.next)
.onSubmit {
focus = .password
}
}
.frame(height: 50)
.clipShape(RoundedRectangle(cornerRadius: 10))
.padding(.horizontal)
// Password field and Forgot Password link
VStack(spacing: 20) {
ZStack {
Image("PasswordBar")
.resizable()
.aspectRatio(contentMode: .fill)
.padding()
SecureField("Password:", text: $textInput2)
.padding(.horizontal, 75)
.background(Color.clear)
.foregroundColor(.red)
.focused($focus, equals: .password)
.submitLabel(.go)
.onSubmit {
submitForm()
}
}
.frame(height: 50)
.clipShape(RoundedRectangle(cornerRadius: 10))
.padding(.horizontal)
// Forgot Password link (right-aligned)
HStack {
Spacer()
Text("Forgot Password?")
.foregroundColor(.blue)
.onTapGesture {
navigationPath.append("passwordRecovery")
}
}
.padding(.horizontal, 90)
}
Spacer(minLength: -110)
// SignIn Button - Explicitly showing it
HStack {
Spacer()
Button {
submitForm()
} label: {
Image("signinButton")
.resizable()
.frame(width: 500, height: 400)
}
Spacer()
}
Spacer(minLength: -300)
// Create Account (centered)
HStack {
Spacer()
Text("Create Account")
.foregroundColor(.blue)
.onTapGesture {
navigationPath.append("accountCreation")
}
Spacer()
}
.padding(.bottom, -10)
}
}
}
.onAppear {
focus = .username
}
.navigationDestination(for: String.self) { destination in
switch destination {
case "dashboard":
DSDDashboard()
case "passwordRecovery":
PasswordRecoveryView()
case "accountCreation":
AccountCreationView()
default:
EmptyView()
}
}
.alert(isPresented: $showAlert) {
Alert(
title: Text("Missing Information"),
message: Text("Enter UserName and Password to continue to DSD"),
dismissButton: .default(Text("OK"))
)
}
}
}
// Function to handle form submission
func submitForm() {
focus = nil
if textInput.isEmpty || textInput2.isEmpty {
showAlert = true
} else {
print("Login with username: \(textInput), password: \(textInput2)")
navigationPath.append("dashboard")
}
}
// Enum to manage focus states
enum FormFieldFocus: Hashable {
case username, password
}
}
When I create a tab group for the sidebar on iPad, the title and disclosure triangle act like a single control. Every time I tap the section title, the disclosure triangle for that section activates and hides or exposes that section's children and actions.
I want the section title to behave like Photos, where tapping a section title just displays its view controller, and the disclosure triangle is a separate control that must be tapped to hide and show children and actions.
I did not see any delegate methods that would let me control this behavior. Is this supported?
In the past, we had a red badge without a number on the app icon. We want to bring it back. Please provide instructions.
Is it possible to modify or mark elements in the room plan model generated by the framework?
Hi everyone,
I’m testing our SwiftUI app on both Xcode simulator and a real iPhone. On the simulator, everything looks clean and aligned. But when I run it on an actual iPhone (same build, iOS 18), the layout looks broken—fonts overlap, spacing is off, and elements are misaligned.
Both screenshots are from the exact same screen and time. First is simulator, second is iPhone.
Any idea why this difference happens? Is there something I should check in terms of rendering or layout settings?
Thanks in advance!
Hi everyone 👋
I’ve been using the Apple Pencil Pro with my iPad Pro M4 and absolutely love it — the squeeze gesture, rotation, and haptics are amazing for creative work. But I’ve run into a little roadblock…
Right now, only one Pencil Pro can be paired at a time. So while one is charging, you can’t use another as a backup without unpairing and re-pairing, which interrupts the workflow.
I’d really love to see one of two things:
The ability to use one Pencil while another charges
or
An official external charger (or support for third-party ones)
Personally, I’d happily buy both a second Pencil and a charger if this became possible. I’ve even chatted with other creatives who feel the same — it would make a huge difference for long projects or working on the go.
Just wanted to share this idea and see if anyone else here would like this too. Thanks for reading!
I placed apple.logo symbol image on the top of a view. This view is used to link or unlink Apple ID for user. In the middle is the apple sign in button. I want to use something to describe or represent what the view is, instead of using text description. so I think sign in's company logo is a good choice. Is it allowed by apple official?