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.

All subtopics

Post

Replies

Boosts

Views

Activity

Menu in SwifUI
Hi, i´m trying to get a menu with three rows. The top one should be a HStack with three RoundedRectangle (Red, Yellow and Green). The second row and the third one (both separated with a Divider from the top one) are for edit and delete. But I get five rows, three empty rows plus the edit row and the delete row. The three first rows are empty but they execute the moveTask function correctly. I don't know how to solve this. Can anybody help please? struct TaskView: View { @EnvironmentObject var viewModel: BoardViewModel @EnvironmentObject var languageManager: LanguageManager @State private var isEditing = false let task: Task var body: some View { HStack(alignment: .center, spacing: 8) { Text(task.title) .font(.system(size: 16, weight: .medium)) .foregroundColor(.primary) .lineLimit(4) .multilineTextAlignment(.leading) .fixedSize(horizontal: false, vertical: true) Spacer(minLength: 0) Menu { ColorButtonsView(task: task, viewModel: viewModel) Divider() Button(action: { self.isEditing = true }) { Label(languageManager.localizedString("edit"), systemImage: "pencil") } Button(action: { viewModel.deleteTask(task) }) { Label(languageManager.localizedString("delete"), systemImage: "trash") } } label: { Image(systemName: "ellipsis") .font(.system(size: 20)) .foregroundColor(.gray) .frame(width: 30, height: 30) } } .padding(.vertical, 8) .padding(.horizontal, 12) .background(Color.white) .cornerRadius(10) .shadow(color: Color.black.opacity(0.1), radius: 3, x: 0, y: 1) .sheet(isPresented: $isEditing) { EditTaskView(task: task, viewModel: viewModel) } } } struct ColorButtonsView: View { let task: Task let viewModel: BoardViewModel var body: some View { HStack(spacing: 10) { ForEach(Column.allCases, id: \.self) { column in Button(action: { viewModel.moveTask(task, to: column) }) { RoundedRectangle(cornerRadius: 5) .fill(colorForColumn(column)) .frame(width: 30, height: 30) } } } } private func colorForColumn(_ column: Column) -> Color { switch column { case .toDo: return .red case .inProgress: return .yellow case .done: return .green } } }
0
0
207
Sep ’24
Video Playback on iOS 18 public release is seriously flawed
Video Playback on iOS 18 public release is asinine. I use video playback to show slow-motion video frame by frame to my students and the video can only be shown at like 3/5 of the screen size (just like Apple fouled up screenshot editing about a year ago) If you try to view video in the full screen you can’t scrub through and see time stamps or play frame by frame sliding left to right. It’s absolutely ridiculous. 2 out of 3x the video timeline finishes fully right and I haven’t watched the full clip. Here’s a video showing the issue how at the small default size I can see the entire timeline and play the full video from beginning to end, but when I go to full screen and/or zoom in or move the screen around the timeline doesn’t work and you can’t scroll through the full video! Need the video to not condense in size on the screen and play the full height / width of the screen. Also not have the text of the location showing above the screen. Way too much clutter. The reduced size of the video for editing issue started with photos several updates ago and now Apple idiotically brought a terrible flaw from photos to videos as well. Ugh.
9
15
1.7k
Sep ’24
iOS 18 (22A3354) icons dark/light swapping
I am seeing a bug with the use of iOS 18’s Customize Automatic setting. When swiping from page view to page view forward and back, the apps’ icon version of dark or light change with each return to that page, constantly…first view the app’s icon is light, return view and it’s dark, then return a next time and it’s back to light. Going further, switching the Customize dark/normal background setting (the sun icon in top left) resolves once clicked.
0
0
1.1k
Sep ’24
Buttons in NavigationBar
Hi Guys, I saw in iOS 18 (Photos App) that there are buttons (in an scrollview) below the navigation title and inside the navigation bar. Is there an new API or an method to "clone" this UI without using: .safeAreaInset(edge: .top, content: { }) Thanks in advance for any feedback and help!
0
0
246
Sep ’24
Need to remove a button image and use new xcode features
HI, I have an older app that used a button with an image in a storyboard that is also localized. The image was just a red button with rounded corners, white stroke outline, and two lines of white text. (actually two words on top of each other) Now I see that I should be able to create this button with the new xcode button features. I want to try that, by removing the old image and just setting the configuration boxes. I see under the Attributes view, there is the setting with my image fileaname,but no dropdown box to set like "none" or an abiltity to remove it right there at the setting of it. I didn't want to delete the button since it would wipe out the connected code etc. I want to be able to translate the two words to other languages as well. I can't find instructions for this particular task. I guess it's too trivial but I just not figuring it out. I keep deleting the whole button. And now the constraints are all gone so I need to use the new xcode to set it backup. thanks for any guidance with the xcode interface! Chrissie
2
0
792
Sep ’24
Button with symbol SF design like Apple
Hello everyone, I'm working on a fun project for my teacher and want to give my software an Apple-inspired look. Specifically, I'm trying to create image buttons similar to Apple's design (as shown in the image). I need a button with an image that darkens its background when the user hovers over it with the mouse. Any suggestions on how to achieve this effect would be greatly appreciated. For now, I have this code : import SwiftUI struct StudentRow: View { @Environment(\.modelContext) private var modelContext var student: Student @State private var isHover = false var body: some View { HStack { Text(student.name) Image(systemName: "xmark") .opacity(isHover ? 0.9 : 0.1) .bold() .onTapGesture { deleteStudent(student, modelContext: modelContext) } .onHover { hovering in isHover = hovering } } .padding() } } However, I'm not entirely satisfied with the outcome of this code. (Trust me, the outcome is the same when using the magnifying glass icon) plz help
1
0
502
Sep ’24
App is too minimal?
So, I run a website about my high school football team, and I created an app that would send score updates to people, provide the schedule, region and local team records. You could log in to adjust whether you get notified every score, or every quarter, or neither. However, when I uploaded it to Apple, it was rejected for it being too minimal. I mean, it does what people would want it to do, which if they can't make it to the game they'll get notified on score updates, the schedule, etc. I don't know what features to add to make it "less minimal". Any suggestions? Also, idk what tags to use for this so, I apologize if I put it in the wrong place.
2
0
431
Sep ’24
iOS 17.6.1 vs app issue
We've been using our app for the past year, and a user came back today that after three minutes, their phone starts getting hot and the screen dims. He is using 17.6.1 with an iPhone 14 max. No one else is seeing an issue, but with the posts online about 17.6.1 battery drain, I wonder if our AR app is somehow more sensitive to the issue.
2
0
786
Sep ’24
Wrong unit in HIG > Components > System Experiences > Widget > watchOS widget dimensions
Hello, I noticed a small mistake in the Human Interface Guidelines (HIG). On the page HIG > Components > System Experiences > Widget > watchOS Widget Dimensions, scroll down to the bottom. In the "watchOS widget dimensions" section, the sizes in the table are in pixels (px), not points (pt) actually. However, the table header indicates the sizes should be in points (pt). Page link: https://developer.apple.com/design/human-interface-guidelines/widgets#watchOS-widget-dimensions For example, the widget size in the Smart Stack on a 49mm watch should be 192x81.5 pt (or 382x163 px), not 382x163 pt. This size can be verified with the information provided here: https://developer.apple.com/documentation/watchos-apps/supporting-multiple-watch-sizes/. https://developer.apple.com/documentation/watchkit/wkinterfacedevice/1620974-screenscale
2
0
498
Aug ’24
PixTransfFunc of MacBook|M3,iPAD|M2 displays dark_gray tones "weirder" against cheapest PC
1) The situation: 8-bit grayscale still radiology-images, comparing to cheapest PC-displays: = appear "literally disgusting" on MacBook|M3; = appear "very bad" on iPAD|M2; = appear "just bad" on available iMAC (though this situation is ~correctable). Typical example (photo of 3 displays; the same 8-bit BMP or PNG by default view/preview on MacBook, iPAD, Windows): "https://ic.pics.livejournal.com/jbstphr/26474885/18157/18157_original.jpg" ** 2) The problem:** in cheapest PC-desktop/laptop a radiologist (or any human at all) distinguishes sRGB "gray 0..255 " (within 1..3 LeastSignificantBits) in default MacBook ~ 4 LSB in dark gray-tones disappear (i.e "gray 0" appears absolutely same as "gray 16") in default iPAD ~ 3 LSB in dark gray-ones disappear (i.e "gray 0" looks identical to "gray 8") 3) The question: = what could be stated in user-manual of a radiology-gadget to guide an end-user ?... = to adjust still gray-scale image_presentation of 8-bit BMP, PNG, GIF, TIFF, DCM (~sRGB-color-space) in: 3a) MacBook "AppleSilicon", 3b) iPAD "AppleSilicon"; assuming standard preview_app, Osirix, ImageJ; assuming that one places "3a,3b" near against cheapest PC-display on market; = so that: "gray 0..16" and "gray 240..255" are distinguishable in "3a,3b" not much worse tnan in cheapest PC-display 4) Comment 4a) Apple's PTC seemingly is weird S-like curve, to improve moving_imaging_impression sacrificing objective information of still-imaging presentation. 4b) Alternate color-profiles in MacBook's system_setting are 100% useless for the task. 4c) Adjust of white_point in MacBook,iPAD is <99%> useless for still radiology imaging (which needs adjustment of the black_point). 4d) Dedicated S-curve-like XLAT from PC-sRGB to APple's gray-scale isn't suitable, because of = the gadget is most world-wide-spread of it's case; = experience of existing Windows, Android-users can't be disturbed by few potential MAC-users; = double XLAT "sRGB => adhoc_color_space =>sRGB" (without overcomplicated & non_robust sentinels) causes pixellation (i.e. ~"gray 3.4.5" all become "gray 4")
0
0
325
Aug ’24
13” M4 IPad Pro 18.1 Beta issues with stage manager
I am running into an issue with the latest 2 beta drops of 18 when using Stage Manager with an external monitor. I have the ipad directly below the monitor and when I move the mouse to the other screen it shifts dramatically right then go to the proper position about an inch up the screen. This issue can easily be duplicated. I can share a video if I am given the proper way to do so. This worked fine with the first beta release. Please contact me because it will cause issues when the gold release is dropped. I have found smaller bugs but this is bad.
1
1
504
Aug ’24
ios 18 beta feedback
it’s a cool concept, i see the vision, but it’s really ugly. all my app colours have changed, none of my transparent widgets work anymore because it changed the size of my wallpaper. i do like how the brightness and volume are now colours, i just wish we could’ve gotten to choose the colours. i also like how the things are circles instead of squares. i’m mostly just upset that my transparent widgets don’t work anymore, and how all the colours of all my apps are darker than i would like.
1
0
499
Aug ’24
iPhone Doesn't Ring
I have an iPhone 14 with the iOS version 18 Beta Version. My phone does not ring. Callers are immediately prompted to leave a voicemail. Even my wife, who is designated a favorite has this happen. I’ve gone to Settings and checked Sounds & Haptics. It appears to be set correctly. Please help. Should I go to the local Apple Store for hands on help? Thank you. Bo Kirk
3
0
583
Aug ’24
SF Mono, open source?
I know that the general San Francisco (SF) fonts (Text, Display, Pro, etc.) are exclusive to Apple, its products, and its affiliates. But when it comes to SF Mono, I am unsure of its official status. Is it open source? I know many companies often release their monospace font under the OFL license (i.e., Twilio Sans Mono, Intel One Mono, Ubuntu Mono (et al), Roboto Mono (et al), and more). As I've previously said, I also know that Apple is very protective it its brand. The thing that really confuses me is that the page for Microsoft's Open Source projects (opensource.microsoft.com) actually uses SF Mono! Are Apple and MS collaborating on this? There is no repository on GitHub or the Apple Developer website, but why is a competitor to Apple using their font? (I am using Windows, so the SF fonts aren't installed on my device, they use the font from their own CDN on their website)
1
0
599
Aug ’24
iMessage
Can we get a customizable iMessage color change???? That would be great. Would love to change my blue bubble to either yellow or pink!!!!!
2
0
328
Aug ’24