General
RSS for tagExplore 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
Is it possible to modify or mark elements in the room plan model generated by the framework?
The bane of my existence has been designing interfaces where the whole view needs to scroll, but a portion is a List and the other portion is static.
I run into this problem time and again so I was hoping someone has a good solution because we all know that embedding a List view inside ScrollView is a no-go within SwiftUI. It simply doesn't work.
So what is a best practice when you need the whole screen to scroll, but a portion is a List? Use a navigation stack instead of a ScrollView? What if it's a child view of a navigation stack already?
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
}
}
I have developed a mobile app using SwiftUI. Now I am in the process of building a CarPlay application. I know how to test the CarPlay app using a simulator but here is my confusion,
How to test the iPhone app and CarPlay together? I want to test few scenarios like, user login / logout from mobile app. Location enabled /disabled in the mobile app.
I know that swiftUI handles the scenes by itself. Kindly help me validate the above scenarios as I am getting black screen on iPhone whenever the CarPlay is launched. Below is the code snippet,
func application(_ application: UIApplication,
configurationForConnecting connectingSceneSession: UISceneSession,
options: UIScene.ConnectionOptions) -> UISceneConfiguration {
if connectingSceneSession.role == .carTemplateApplication {
let sceneConfiguration = UISceneConfiguration(name: "CarPlay Scene", sessionRole: connectingSceneSession.role)
sceneConfiguration.delegateClass = CarPlaySceneDelegate.self
return sceneConfiguration
}
// Configuration for other types of scenes
return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
}
struct MyApp: App {
@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
var body: some Scene {
WindowGroup {
ContentView()
.preferredColorScheme(.light)
}
}
}
Info.plist
<key>UIApplicationSceneManifest</key>
<dict>
<key>UIApplicationSupportsMultipleScenes</key>
<true/>
<key>UISceneConfigurations</key>
<dict>
<key>CPTemplateApplicationSceneSessionRoleApplication</key>
<array>
<dict>
<key>UISceneConfigurationName</key>
<string>CarPlay Scene</string>
<key>UISceneDelegateClassName</key>
<string>$(PRODUCT_MODULE_NAME).CarPlaySceneDelegate</string>
</dict>
</array>
</dict>
</dict>
Hello Apple Engineering Team and Fellow Developers,
I’ve been using iOS 26 beta from day one and closely following all its improvements. One feature that significantly enhances the user experience is the automatic hiding of the Home Bar (the bottom navigation indicator) after a few seconds of inactivity in menus and apps.
This subtle but powerful UI behavior not only increases immersion but also reduces distractions, making navigation smoother and visually cleaner.
I strongly urge the Apple team to integrate this feature into the upcoming iOS 18.6 update. Bringing this polished interaction to iOS 18 users would greatly improve usability and keep the interface modern and elegant.
Thank you for your continuous efforts in refining iOS.
Looking forward to seeing this improvement officially adopted soon!
Best regards,
[ERFANEX]
My newly released App Snapshot-Chess-Move, #1592848671, is not creating a public database of chess moves as I expect. What steps do I need to do inorder for my App to be using a public database. It appears as if each of my iOS devices, iPhone, iPad and Mac mini each have a private database of chess moves. When I change my data on the iPad, I expect the new data to appear (with slight delays) on the Mac.. I do not know what to do next. Please help me. This was working in Development mode but not in Production when I submitted my App for release.
UPDATE:
The cloud data is copied locally to a @Quary variable and updated by using .insert, .delete and .save commands. So, I deleted and re-downloaded my apps on each device, iPad, iPhone, and Mac and obtained the same cloud data. So how do users get the most recent copy of the cloud. Do they need to delete their App and start over? Is there a .update command that can do this updating for me? Also, I pushed the App out of the background and restarted the App to obtain the updated cloud data.
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!
How do I import a Reality Composer project into Blender (Windows x86_64)
I have come quite far with my first app and have various picker lists working well. However, I am stuck thinking through how to do this next picker.
My data model has Golf Course name and Tee. For each golf course there are multiple Tees and not all the same across the Courses.
Example of Data
CourseA RedTee
CourseA GreenTee
CourseA BlueTee
CouseB RedTee
CourseB YellowTee
CourseB WhiteTee
I first give the client the ability to Pick a Course from a picker list. That works fine.
Now I want to create a Picker list of Tees but only for that selected Course.
So if the client selected CourseB they would be presented with these Tees to select from
RedTee
YellowTee
WhiteTee
How do I limit the second picker to only show the Tees for the selected Course?
Then in an associated question, once i have the Course and the Tee, I want to Auto fill the rest of a form with Slope, Rating and Yardage.
@Model
class ScorecardData {
var scorecardcourseName: String
var scorecardTee: String
var scorecardSlope: Double
var scorecardRating: Double
var scorecardYardage: Int
Here is my code for the Course Picker List
Picker("", selection: $selectedCourse) {
Text("Select a Course").tag(" ")
ForEach(courses, id: \.self) { course in
Text(course.courseName)
.tag(course.courseName)
}
}
.onChange(of: selectedCourse) {
if(selectedCourse != nil) {
roundsdata.roundscourseName = selectedCourse!
}
}
Here is my current Picker list but its pulling all Tees for all Courses
Picker("", selection: $selectedTee) {
Text("Select Tee").tag(" ")
ForEach (tees, id: \.self) { tee in
Text(tee.scorecardTee)
.tag(tee.scorecardTee)
}
}
.onChange(of: selectedTee) {
if(selectedTee != nil) {
roundsdata.roundsTee = selectedTee!
}
}
My @State and @Query statements are as follows in case there is a change there that is needed as well,
@State private var selectedTee: String? = "Select Tee"
@Query(sort: \ScorecardData.scorecardcourseName) private var tees: [ScorecardData]
@State private var selectedCourse: String? = "Select Course"
@Query(sort: \CourseData.courseName) private var courses: [CourseData]
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.
In the past, we had a red badge without a number on the app icon. We want to bring it back. Please provide instructions.
Below is the sample css code where I render a web page in my webview screens fonts became too small after 18.4 and its so hard to read when I launch my app . Any workarounds to address this issue
.sg-labels-canvas {
font-size: 15px;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, sans-serif;
font-style: normal;
}
I would like to modify the content of a published LocationNode upon been clicked by the user. But unfortunately:
func hitTest(_ point: CGPoint, options: [SCNHitTestOption : Any]? = nil) -> [SCNHitTestResult]
returns an SCNNode array from which it is impossible to retrieve the original LocationNode being inserted in order to be able to modify it.
Of course the solution would be to either insert the SCNNode corresponding to the inserted LocationNode in a custom class or conversely insert the identifier of the custom object as a tag of the LocationNode, in order to solve the issue. But both options seem impossible to implement.
May anyone help me?
When we are going to have a real analog clock option on the lock screen. If an apple watch can do it surely its not that difficult. For someone who uses a clock to tell what time it isn't as opposed to what time it is, i’m constantly having to convert a digital image where the image of hands on a dial is so much easier. Surely this isnt because someone has forgotten how to read a clock
I have a multi view app I am trying to develop as my first app. I have gone through much of HackingwithSwiftui
Xcode 16.1 SwiftUI on a MacAir
The prior views in the app store various information. golf Course info in one and Golfers info in another.
This third view is to record rounds of golf played. I started it simple with me entering input manually and that worked.
I then decided to start using pickers with the first two being a DatePicker and the second pulling in the nickname(Handle) for players to select from. in a Handle Picker.
Following is my code. I can select a date as of Now and prior for date played and also the second picker does pull in the all the Handles from my prior view and I can select a Handle of the player for the round.
I then fill in all the other information. When I exit the view I do see that the Round is created but the Date always defaults to Now and the Handle stays blank. When i go back in to edit the round I can change the date and select a Handle but can get them to save.
I have tried many things and searched for days on the web for examples with no luck. I am sure its something simple.
Any help is appreciated as I want to add for pickers for course, tee and other fields. But until I figure out what I am missing the project is at a standstill.
import SwiftUI
import SwiftData
struct RoundsEditDataView: View {
@Bindable var roundsdata: RoundsData
@Environment(.modelContext) private var modelContext
@State private var playDate = Date.now
@Query(sort: \PlayerData.playerHandle) private var players: [PlayerData]
@State private var selectedHandle: PlayerData? = nil
var body: some View {
Form {
HStack {
Text("Course:")
TextField("Course Name", text: $roundsdata.roundscourseName)
.textContentType(.name)
}
HStack {
DatePicker("Date:", selection: $playDate, in: ...Date(),
displayedComponents: .date)
}
Section {
Picker("Handle:", selection: $selectedHandle) {
Text("Select a Handle").tag(nil as PlayerData?)
ForEach(players, id: \.self) { player in
HStack {
Text(player.playerHandle)
.frame(maxWidth: .infinity, alignment: .leading)
.tag(player as PlayerData?)
}
.frame(maxWidth: .infinity, alignment: .leading)
.tag(player as PlayerData?)
}
}
// .pickerStyle(.inline) this does not fix issue or design wise work
}
The rest of this works fine for now until I decide to convert more to picker lists.
HStack {
Text("Tee:")
TextField("Tee", text: $roundsdata.roundsTee)
.textContentType(.name)
}
HStack {
Text("Handicap:")
TextField("Handicap", value: $roundsdata.roundsHandicap, format: .number)
.textContentType(.name)
}
HStack {
Text("Gross:")
TextField("Gross", value: $roundsdata.roundsGross, format: .number)
}
HStack {
Text("Net:")
TextField("Net", value: $roundsdata.roundsNet, format: .number)
.textContentType(.name)
}
HStack {
Text("Rating:")
TextField("Rating", value: $roundsdata.roundsRating, format: .number)
.textContentType(.name)
}
HStack {
Text("Slope:")
TextField("Slope", value: $roundsdata.roundsSlope, format: .number)
.textContentType(.name)
}
}
}
}
support destinations have no Apple Watch, I tried delete the watch App target and recreate watch App for Existing app, but if is unuseful
Hi community,
I have a question regarding MusicKit, is it necessary to follow a design guideline to integrate this framework into my App?
Also, when no music is reproducing in MusicKit which placeholder we should show, do you provide the resource? Or can we create our own placeholder?
Thanks for all,
David.
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?
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.