Visual Design

RSS for tag

Discuss animation, branding, color, layout, typography, and other elements of great looking apps.

Posts under Visual Design tag

34 Posts
Sort by:
Post not yet marked as solved
0 Replies
85 Views
Hi, I have pretty much finished my app's layout but realized I needed to scale it for different devices. I have read online that hardcoding values (esp in frames) is a big no-no, and GeometryReader should be heavily utilized. Also was recommended ViewThatFits. The problem is, I want the app to look the exact same across all devices. What is the best way to get started? Also, when testing, do I only have to test on an iPad and iPhone or are the dimensions significantly different amongst each class of devices?
Posted
by Soil_Milk.
Last updated
.
Post not yet marked as solved
0 Replies
124 Views
I need to create an animation for previous and next questions. The current question should move out and next/prev question should come in. If you run the app and keep pressing next, it works well. Current question moves out towards left Next question appears from right to left. But if I switch the direction to previous, Current question moves out towards left( should move out towards right) next question comes in from left to right( which is correct). Similar discrepancy happens when I switch direction from prev to next. Why is this so? import SwiftUI struct Question { let id: Int let text: String } extension AnyTransition { static var slideRight: AnyTransition { let insertion = AnyTransition.move(edge: .trailing) let removal = AnyTransition.move(edge: .leading) return .asymmetric(insertion: insertion, removal: removal) } static var slideLeft: AnyTransition { let insertion = AnyTransition.move(edge: .leading) let removal = AnyTransition.move(edge: .trailing) return .asymmetric(insertion: insertion, removal: removal) } } struct QuizView: View { let questions = [ Question(id: 1, text: "11111111111"), Question(id: 2, text: "222222222222222222222222"), Question(id: 3, text: "3333333333333333333"), Question(id: 4, text: "444444444444444444444444"), Question(id: 5, text: "55555555555555555555"), Question(id: 6, text: "6666666666666666666666666") ] @State private var currentQuestionIndex = 0 @State private var navigationDirection: NavigationDirection = .forward var body: some View { VStack(spacing: 20) { Text(questions[currentQuestionIndex].text) .id(questions[currentQuestionIndex].id) // Important for transition .transition(navigationDirection == .forward ? .slideRight : .slideLeft) .frame(maxWidth: .infinity, maxHeight: .infinity) HStack { Button("Previous") { moveToPreviousQuestion() } .disabled(currentQuestionIndex == 0) Spacer() Button("Next") { moveToNextQuestion() } .disabled(currentQuestionIndex == questions.count - 1) } } .padding() .animation(.easeInOut(duration: 1.0), value: currentQuestionIndex) } private func moveToNextQuestion() { if currentQuestionIndex < questions.count - 1 { navigationDirection = .forward currentQuestionIndex += 1 } } private func moveToPreviousQuestion() { if currentQuestionIndex > 0 { navigationDirection = .backward currentQuestionIndex -= 1 } } } enum NavigationDirection { case forward, backward }
Posted Last updated
.
Post not yet marked as solved
1 Replies
112 Views
If you run the app and keep pressing next, it works well. current question moves out towards left, next question appears from right to left. But if I switch the direction to previous, current question moves out towards left( should move out towards right) next question comes in from left to right( which is correct). Similar discrepancy happens when I switch direction from prev to next. Why is this so? import SwiftUI struct Question { let id: Int let text: String } extension AnyTransition { static var slideRight: AnyTransition { let insertion = AnyTransition.move(edge: .trailing) let removal = AnyTransition.move(edge: .leading) return .asymmetric(insertion: insertion, removal: removal) } static var slideLeft: AnyTransition { let insertion = AnyTransition.move(edge: .leading) let removal = AnyTransition.move(edge: .trailing) return .asymmetric(insertion: insertion, removal: removal) } } struct QuizView: View { let questions = [ Question(id: 1, text: "11111111111"), Question(id: 2, text: "222222222222222222222222"), Question(id: 3, text: "3333333333333333333"), Question(id: 4, text: "444444444444444444444444"), Question(id: 5, text: "55555555555555555555"), Question(id: 6, text: "6666666666666666666666666") ] @State private var currentQuestionIndex = 0 @State private var navigationDirection: NavigationDirection = .forward var body: some View { VStack(spacing: 20) { Text(questions[currentQuestionIndex].text) .id(questions[currentQuestionIndex].id) // Important for transition .transition(navigationDirection == .forward ? .slideRight : .slideLeft) .frame(maxWidth: .infinity, maxHeight: .infinity) HStack { Button("Previous") { moveToPreviousQuestion() } .disabled(currentQuestionIndex == 0) Spacer() Button("Next") { moveToNextQuestion() } .disabled(currentQuestionIndex == questions.count - 1) } } .padding() .animation(.easeInOut(duration: 1.0), value: currentQuestionIndex) } private func moveToNextQuestion() { if currentQuestionIndex < questions.count - 1 { navigationDirection = .forward currentQuestionIndex += 1 } } private func moveToPreviousQuestion() { if currentQuestionIndex > 0 { navigationDirection = .backward currentQuestionIndex -= 1 } } } enum NavigationDirection { case forward, backward }
Posted
by gowmukhi.
Last updated
.
Post not yet marked as solved
0 Replies
157 Views
Hi. Can anyone who's into cosmology give hints as to how I might depict and animate dark matter for the VisionPro?
Posted
by Jeqhe.
Last updated
.
Post marked as solved
2 Replies
355 Views
Dear All, I want to maximise an Image above a Form. That should be easy enough but with the naive code, the Form is pushed out of the screen. I don't want to allow scrolling. This is my code: Image(systemName: "gear") .resizable() .scaledToFit() Form { Section("section 1") { Text("text 1") Text("text 2") Text("text 3") } Section("section 2") { Text("text 1") Text("text 2") Text("text 3") } } .scrollDisabled(true) Any hint on how to achieve that the Form is fully displayed and the Image dynamically maximised in the space that is left? Thanks in advance! Cheers F
Posted
by floteich.
Last updated
.
Post not yet marked as solved
0 Replies
161 Views
Hi, I am currently working through a SwiftUI tutorial where I am adding words entered into a text field to be displayed in a list beneath it. While doing so, I noticed that when trying to animate the insertion of the word into the text field, it wasn't working. private func addNewWord(){ let answer = newWord.lowercased().trimmingCharacters(in: .whitespacesAndNewlines) guard answer.count > 0, !usedWords.contains(answer) else {return} newWord = "" withAnimation { usedWords.insert(answer, at: 0) } } But, when I switched around those last 2 statements, the following code works properly: private func addNewWord(){ let answer = newWord.lowercased().trimmingCharacters(in: .whitespacesAndNewlines) guard answer.count > 0, !usedWords.contains(answer) else {return} withAnimation { usedWords.insert(answer, at: 0) } newWord = "" } Does anyone know why this is ? Is there something that has to do with the withAnimation call not being the final part in the function call ? Does it have to do with altering different State variables before or after the withAnimation call ? Is this expected behavior or some type of bug? Please let me know, here is the entire SwiftUI Struct in case you want to run this and see for yourselves. Thank you (Currently using xcode 15.0 on OS Sonoma 14.3.1) struct ContentView: View { @State private var newWord : String = "" @State private var usedWords : [String] = [String]() @State private var rootWord : String = "" var body: some View { NavigationStack { List { Section { TextField("Enter your word", text: $newWord).textInputAutocapitalization(.never) } Section{ ForEach(usedWords, id: \.self){ word in HStack { Image(systemName: "\(word.count).circle") Text(word) } } } } .navigationTitle(rootWord) } .padding() .onSubmit() { addNewWord() } } private func addNewWord(){ let answer = newWord.lowercased().trimmingCharacters(in: .whitespacesAndNewlines) guard answer.count > 0, !usedWords.contains(answer) else {return} // newWord = "" withAnimation { usedWords.insert(answer, at: 0) } newWord = "" } }
Posted
by Myersjac.
Last updated
.
Post not yet marked as solved
0 Replies
167 Views
HI, We need to rebrand our app name and app logo only for one country, for other regions/ countries. the existing branding should be shown. Is it possible to achieve this? The app name, logo need to be set from the code wise based on the region selected in the device settings. Please share me the options to implement on this.
Posted Last updated
.
Post marked as solved
2 Replies
324 Views
Dear all, I am using SwiftUI 15.2 and I have created a donut chart using SectorMark. Now, I have three values to show in the chart. When I set up the foregroundstyle, it returns orange, blu and green colors, whereas I'd like to have different colors (e.g. red, yellow and green). Chart(data, id: \.risultato) { dataItem in SectorMark(angle: .value("Type", dataItem.partite), innerRadius: .ratio(0.7), angularInset: 1.5) .foregroundStyle(by: .value("Type", dataItem.risultato)) .annotation(position: .overlay){ Text("\(dataItem.partite)") .font(.caption) } } .frame(height: 150) I'm reporting the final result here below. Do you know how I can customize them? Thanks in advance for your support, Andrea
Posted
by AndreB82.
Last updated
.
Post not yet marked as solved
1 Replies
637 Views
I'm trying to animate a shape (e.g. a circle) to follow a custom path, and struggling to find the best way of doing this. I've had a look at the animation options from SwiftUI, UIKit and SpriteKit and all seem very limited in what paths you can provide. Given the complexity of my path, I was hoping there'd be a way of providing a set of coordinates in some input file and have the shape follow that, but maybe that's too ambitious. I was wondering if this were even possible, and assuming not, if there were other options I could consider.
Posted Last updated
.
Post not yet marked as solved
0 Replies
418 Views
I want to add a small play button to play a song preview on my site. I don't want to use the embedded player because I want to style it custom. If I use the MusicKit Web library, do I need to add Apple branding legally? I don't see anywhere that says its required and I want to confirm.
Posted Last updated
.
Post not yet marked as solved
2 Replies
539 Views
The themes that bundle with Xcode are all very complex, in the sense that they highlight every token-type a different color, and often use colors that are only slightly different (as there aren't nearly enough distinct colors). Given that these themes are intended to be used, they should be optimized for practicality (not just flexing the power of Xcode). Syntax highlighting is most useful when it distinguishes between things that the programmer distinguishes between conceptually (if I don't know why one variable is blue, while another, apparently similar, variable is red, the highlighting actually makes the code harder to parse correctly). I've also observed a trend towards more minimal highlighting schemes, just generally. I don't have any evidence for this, but assume other people have noticed it too. To offer a concrete example, the following scheme does the usual kinda thing with keywords, comments and literals, but sets everything else to look like plain text, except types, which are gold when they're being declared, and copper otherwise: In my experience, it's notably easier to parse like this, which helps when learning Swift & Co. This is the same theme, applied to a C-family language (Metal): I'm not asking for feedback on the theme specifically. I'm just asking whether you agree that Xcode should bundle a couple of these simpler themes.
Posted Last updated
.
Post not yet marked as solved
2 Replies
484 Views
Customers are reporting after the update to mac OS Sonoma 14.2 bitmap images have a black background! When we run the same application on Sonoma 14.1.1 the bitmap images appear as expected Like I said at the beginning, it happened after upgrading to Sonoma 14.2 so it introduced the issue.
Posted Last updated
.
Post not yet marked as solved
0 Replies
325 Views
Hi Folks, I am reaching out for an iOS A11y color contrast issue, which I have also fired a bug report 12525894 but does not get any reply. The UIAlertAction in destructive style has a poor color contrast ratio of less than 4.5: 1 between text color and background color. This applies to any system/third party app which uses UIAlertViewController from UIKit and Alert from SwiftUI (Take the system Photos app as an example). Given that the "titleTextColor" property from UIAlertAction class is private, developers have no ways to modify the alert action to make it WCAG compatible. Here is an example of the Photo app alert. The text "Delete Photo" (#EB4E3D) should have a contrast ratio of at least 4.5 to 1 against its background(#EAEBE7) to comply to the Web Content Accessibility Guidelines (WCAG). Actual result: The text "Delete Photo" (#EB4E3D) has a contrast ratio of 3.08 to 1 against its background(#EAEBE7), which does not match 4.5:1 Web Content Accessibility Guidelines (WCAG).
Posted
by edwinruan.
Last updated
.
Post not yet marked as solved
1 Replies
807 Views
I'm working on a SwiftUI project where I use a .sheet modifier to present a bottom drawer with two detent sizes: .medium and .large. The drawer contains a button that toggles its size between these two states. This part works as expected. However, I'm facing an animation issue when I set a non-default background color to the sheet. Here's the simplified code for context: struct ContentView: View { @State private var selectedDetent: PresentationDetent = .medium var body: some View { VStack {} .sheet(isPresented: .constant(true)) { Button("Press Me") { selectedDetent = selectedDetent == .medium ? .large : .medium } .presentationBackground(.gray) .presentationDetents([.medium, .large], selection: $selectedDetent) } } } The issue arises when I try to set a background color using .presentationBackground(.gray) (or any color, even white). Instead of the expected behavior when pressing the button (where the upper part of the sheet closes, and the bottom part stays attached to the screen bottom), the sheet momentarily turns into a square in the middle of the screen before moving down to the .medium position. As soon as I remove the.presentationBackground(.gray) line, it works as expected: I tried several approaches, such as: Using a custom background view. Explicitly specifying animations. Adjusting view hierarchy and layering. Unfortunately, none of these solutions worked. The issue persists with any color. It seems like a bug or limitation in SwiftUI's handling of sheet animations with custom backgrounds. Has anyone else encountered this issue, or does anyone have a workaround or solution?
Posted
by Flict.
Last updated
.
Post not yet marked as solved
1 Replies
356 Views
Hey there! 👋🏻 I'm currently localizing my app and came across the interesting fact that in China (I'm not aware of other countries) the color red is associated with something positive, whereas in Germany (where I come from) the color green evokes a positive association. I then tried out whether this is taken into account in Apple's native apps. For example, in the Stocks app, a price gain with German localization is shown in green, whereas a price gain with Chinese localization is shown in red. Now I'm wondering whether there is a static property of the Color or UIColor class where I can retrieve a positive or negative color depending on the localization. Does anyone have experience with this? Thanks in advance! 😊
Posted
by Murd2017.
Last updated
.
Post not yet marked as solved
3 Replies
861 Views
Hello, I have this widget: And as you can see down at the bottom, next item is very barely visible. This is because on different devices (combined with varied text sizes + number of lines) the vertical space differs quite a lot. In the past I had the limit set to 4 items in the bottom part but that often left empty space at the bottom or even overflowed still on iPhone SE. What is the proper way to tell ForEach (or any other component) to "layout as many items as can fully fit, but no more". The only solution I could think of is to use ViewThatFits and try first rendering 6 items, then 5 and so on to find the count that fully fits. But that seems maybe too complicated? Thanks.
Posted
by nemecek_f.
Last updated
.