Visual Design

RSS for tag

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

Posts under Visual Design tag

30 Posts
Sort by:
Post marked as solved
2 Replies
445 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
Post marked as solved
2 Replies
514 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
Post not yet marked as solved
0 Replies
241 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
by
Post not yet marked as solved
0 Replies
251 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
Post not yet marked as solved
1 Replies
199 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
Post not yet marked as solved
0 Replies
226 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
by
Post not yet marked as solved
0 Replies
179 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