SwiftUI - Animating HUD / Pop Over like iOS Silent Mode - animation

I'm trying to clone the following animation from iOS:
Here's my code. I'm stuck with the animation of the star. I'd for example like to shake it a little bit or rotate it around it's y-axis.
Here's my code:
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
PopOver(image: "star.fill", color: .primary, title: "Thank You!")
}
}
struct PopOver: View{
var image: String
var color: Color
var title: String
#Environment(\.colorScheme) var scheme
var body: some View{
HStack(spacing: 10){
Image(systemName: image)
.font(.title3)
.foregroundColor(color)
Text(title)
.foregroundColor(.primary)
}
.padding(.vertical,10)
.padding(.horizontal)
.background(
scheme == .dark ? Color.black : Color.white
)
.clipShape(Capsule())
.shadow(color: Color.primary.opacity(0.1), radius: 5, x: 1, y: 5)
.shadow(color: Color.primary.opacity(0.03), radius: 5, x: 0, y: -5)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.offset(y: 0)
}
}
Can you tell me how this can be achieved?
Many Thanks!

you could try something like this approach:
struct ContentView: View {
#State var popUpPresented = false
var body: some View {
Button(action: {popUpPresented = true}) {
Text("click me")
}
.popover(isPresented: $popUpPresented, arrowEdge: .top) {
PopOver(image: "star.fill", color: .primary, title: "Thank You!")
}
}
}
struct PopOver: View{
var image: String
var color: Color
var title: String
#State var rotate = 0.0 // <-- here
#Environment(\.colorScheme) var scheme
var body: some View{
HStack(spacing: 10){
Image(systemName: image).font(.title3).foregroundColor(color)
// --- here ---
.rotation3DEffect(Angle.degrees(rotate), axis: (x: 0, y: 1, z: 0))
.task {
withAnimation(Animation.default.speed(0.3).delay(0).repeatForever(autoreverses: false)){
rotate = 360.0
}
}
Text(title).foregroundColor(.primary)
}
.padding(.vertical,10)
.padding(.horizontal)
.background(scheme == .dark ? Color.black : Color.white)
.clipShape(Capsule())
.shadow(color: Color.primary.opacity(0.1), radius: 5, x: 1, y: 5)
.shadow(color: Color.primary.opacity(0.03), radius: 5, x: 0, y: -5)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.offset(y: 0)
}
}

Related

The textfield in my search bar will not allow for text to be entered (swiftUI)

I have tried to implement a search bar within my app (using swiftUI), which shows up when I build the app. However, it won't allow me to type into the actual text field. My code is below. I have been searching for solutions to this problem for awhile and can't seem to see any problems in my code. Is there something wrong with my TextField?
Code for search bar -
import SwiftUI
struct SearchBar: View {
#Binding var text: String
#State private var isEditing = false
var body: some View {
HStack {
TextField("Search...", text: $text)
// .foregroundColor(Color("Teal"))
// .background(Color("Grey"))
.overlay(
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(Color(UIColor.systemGray3))
.frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
.padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
// Search icon
if isEditing {
Button(action: {
self.text = ""
}, label: {
Image(systemName: "multiply.circle")
.foregroundColor(Color(UIColor.systemGray3))
.padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
// Delete button
})
}
}
).onTapGesture {
self.isEditing = true
}
if isEditing{
Button(action: {
self.isEditing = false
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
// Hide delete button when search bar is not selected
}){
}
}
}
}
}
Code implementing search bar into my view -
import SwiftUI
struct BusinessList: View {
#EnvironmentObject var modelData: ModelData
#State private var showFavoritesOnly = false
#State var searchText = ""
var filteredBusinesses: [Business] {
modelData.businesses.filter { business in
(!showFavoritesOnly || business.isFavorite)
}
}
var body: some View {
NavigationView {
ScrollView {
LazyVStack {
VStack {
SearchBar(text: $searchText)
.padding(.bottom)
.padding(.top)
.padding(.top)
.padding(.top)
.padding(.top)
// Search bar won't show text when 'typed into'
ScrollView(.horizontal, showsIndicators: false) {
HStack {
Button(action: {
showFavoritesOnly = true
}) {
Text("Favourites")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 100.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
.padding(EdgeInsets.init(top: 0, leading: 20, bottom: 0, trailing: 0))
}
Button(action: {
}) {
Text("Hospitality")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 100.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
}
Button(action: {
}) {
Text("Retail")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 100.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
}
Button(action: {
}) {
Text("Lifestyle")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 110.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
}
}
.padding(.bottom)
}
}
.background(Color(UIColor.white))
.shadow(radius: 6)
.padding(.bottom)
ForEach(filteredBusinesses) { business in
NavigationLink(destination: BusinessDetail(business: business)) {
BusinessRow(business: business)
}
}
}
}
.navigationBarHidden(true)
.ignoresSafeArea()
}
}
}
struct BusinessList_Previews: PreviewProvider {
static var previews: some View {
BusinessList()
}
}
your code works for me with minor changes to the colors, nothing major. Maybe the colors did not show your typing, but the text was there.
This is the test I did:
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct SearchBar: View {
#Binding var text: String
#State private var isEditing = false
var body: some View {
HStack {
TextField("Search...", text: $text)
// .foregroundColor(Color("Teal"))
// .background(Color("Grey"))
.overlay(
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
.padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
// Search icon
if isEditing {
Button(action: {
self.text = ""
}, label: {
Image(systemName: "multiply.circle")
.foregroundColor(.gray)
.padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
// Delete button
})
}
}
).onTapGesture {
self.isEditing = true
}
if isEditing{
Button(action: {
self.isEditing = false
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
// Hide delete button when search bar is not selected
}){
}
}
}
}
}
struct ContentView: View {
#State var searchText = ""
var body: some View {
SearchBar(text: $searchText)
.frame(width: 222, height: 55).padding(.horizontal, 20)
.border(.red)
}
}
EDIT:
Your new code works for me, when you remove
.shadow(radius: 6)
and
.ignoresSafeArea()

SwiftUI - Move and rotate an Image when a button is pressed

I have an Image, and I want it to rotate on the y axis, and move towards the bottom of the View when I press a Button. I tried using the .onChange, but I get the error "Result of call to 'animation' is unused", of which I understand the meaning, but I don't understand neither why it comes up nor how can I fix it.
Here's my code:
import SwiftUI
struct ContentView : View {
#State var animateCoin = false
#Environment(\.colorScheme) var colorScheme
var body: some View {
Rectangle()
.foregroundColor(colorScheme == .dark ? .white : .black)
.frame(width: 150, height: 150, alignment: .center)
.offset(y: -60)
.mask(Image("Coin") //That's the name of the Image I have in the assets
.resizable()
.onChange(of: animateCoin, perform: { value in
self.animation(.easeIn) //I put .easeIn just as an example, because the .rotation3DEffect gives me a red warning
}))
Button(action: { animateCoin = true } ) {
ZStack {
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.green)
.frame(width: 100, height: 40, alignment: .center)
.shadow(radius: 10)
Text("Animate")
.foregroundColor(.white)
.shadow(radius: 20)
}
}
}}
The Image is set as a mask so that I can easily control its color depending on the light or dark mode.
Thank to everyone who will help me!
How about doing it like this:
#State var animateCoin = false
#Environment(\.colorScheme) var colorScheme
var body: some View {
VStack {
Rectangle()
.foregroundColor(colorScheme == .dark ? .white : .black)
.frame(width: 150, height: 150, alignment: .center)
.offset(y: -60)
.mask(Image(systemName: "car.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.rotation3DEffect(
Angle(degrees: self.animateCoin ? 360 : 0),
axis: (x: 0, y: self.animateCoin ? 360 : 0, z: 0)
)
)
.offset(y: self.animateCoin ? 600 : 0)
.animation(.linear(duration: 1))
ZStack {
Button(action: { self.animateCoin.toggle() } ) {
ZStack {
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.green)
.frame(width: 100, height: 40, alignment: .center)
.shadow(radius: 10)
Text("Animate")
.foregroundColor(.white)
.shadow(radius: 20)
}
}
}
}
}
As you asked:
Rotate on Y axis.
Move the image to the buttom.

Adding Selectable ScrollView Brakes The View

I am working on a task manager app. Recently trying to edit an item inside the scroll view. While trying to do so my views just jammed and I can not see my scroll view on the view. Instead of scroll view my add NewTaskView appears.
You may see the whole project in https://github.com/m3rtkoksal/TaskManager
struct TaskListView: View {
#State private(set) var data = ""
#State var isSettings: Bool = false
#State var isSaved: Bool = false
#State var shown: Bool = false
#State var selectedTask = TaskElement(dateFrom: "", dateTo: "", title: "", text: "")
var body: some View {
NavigationView {
ZStack {
Color(#colorLiteral(red: 0.9333333333, green: 0.9450980392, blue: 0.9882352941, alpha: 1)).edgesIgnoringSafeArea(.all)
VStack {
TopBar()
HStack {
CustomTextField(data: $data, tFtext: "Find task", tFImage: "magnifyingglass")
Button(action: {
self.isSettings.toggle()
}, label: {
ZStack {
RoundedRectangle(cornerRadius: 15)
.frame(width: 50, height: 50, alignment: .center)
.foregroundColor(Color(#colorLiteral(red: 0.4274509804, green: 0.2196078431, blue: 1, alpha: 1)))
Image("buttonImage")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
}
.padding(.horizontal, 15)
})
}
CustomSegmentedView()
ZStack {
TaskFrameView()
VStack {
Spacer()
HStack {
Spacer()
Button( action: {
self.isSaved.toggle()
}, label: {
ZStack {
RoundedRectangle(cornerRadius: 25)
.foregroundColor(Color(#colorLiteral(red: 1, green: 0.7137254902, blue: 0.2196078431, alpha: 1)))
Text("+")
.foregroundColor(.white)
.font(.title)
.fontWeight(.bold)
}
.frame(width: 50, height: 50)
})
}
}
NavigationLink(
destination: NewTaskView(isShown: $shown, task: selectedTask),
isActive: $shown,
label: {
Text("")
})
}
}
}
.navigationBarHidden(true)
Spacer()
}
.navigationBarHidden(true)
}
}
The first image is my mixed-up view
Second is NewTaskView and the last one is proper TaskListView
While this code works like a charm without editable scroll view
struct TaskListView: View {
#State private(set) var data = ""
#State var isSettings: Bool = false
#State var isSaved: Bool = false
var body: some View {
NavigationView {
ZStack {
Color(#colorLiteral(red: 0.9333333333, green: 0.9450980392, blue: 0.9882352941, alpha: 1)).edgesIgnoringSafeArea(.all)
VStack {
TopBar()
HStack {
CustomTextField(data: $data, tFtext: "Find task", tFImage: "magnifyingglass")
Button(action: {
self.isSettings.toggle()
}, label: {
ZStack {
RoundedRectangle(cornerRadius: 15)
.frame(width: 50, height: 50, alignment: .center)
.foregroundColor(Color(#colorLiteral(red: 0.4274509804, green: 0.2196078431, blue: 1, alpha: 1)))
Image("buttonImage")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
}
.padding(.horizontal, 15)
})
}
CustomSegmentedView()
ZStack {
TaskFrameView()
VStack {
Spacer()
HStack {
Spacer()
Button( action: {
self.isSaved.toggle()
}, label: {
ZStack {
RoundedRectangle(cornerRadius: 25)
.foregroundColor(Color(#colorLiteral(red: 1, green: 0.7137254902, blue: 0.2196078431, alpha: 1)))
Text("+")
.foregroundColor(.white)
.font(.title)
.fontWeight(.bold)
}
.frame(width: 50, height: 50)
})
}
}
NavigationLink(
destination: NewTaskView(),
isActive: $isSaved,
label: {
Text("")
})
}
}
}
.navigationBarHidden(true)
Spacer()
}
.navigationBarHidden(true)
}
}
Because that is what you told it to show in your struct ScrollViewTask. You have a ZStack that contains a ScrollView that contains a VStack with a ForEach that is supposed to display your TaskElementViews(while not part of the answer, why not just use a List) as well as your NewTaskView. In essence, you would always have a NewTaskView displayed on top of any TaskElements you have. I suspect that your code is simply not actually displaying TaskElements, either due to a lack of data, or other incorrect coding. Regardless, your NewTaskView would always overlay it.
Below is a folded version of your code that makes it clear:
struct ScrollViewTask: View {
#ObservedObject private var obser = observer()
#State var selectedTask = TaskElement(dateFrom: "", dateTo: "", title: "", text: "")
#State var shown: Bool = false
var body: some View {
ZStack {
ScrollView(.vertical) {...}
.onAppear {...}
NewTaskView(isShown: $shown, task: selectedTask)
}
}
struct ScrollViewTask: View {
#ObservedObject private var obser = observer()
#State var selectedTask = TaskElement(dateFrom: "", dateTo: "", title: "", text: "")
#State var shown: Bool = false
var body: some View {
ScrollView(.vertical) {
VStack {
ForEach(self.obser.tasks) { task in
TaskElementView(task:task)
.onTapGesture {
self.selectedTask = task
self.shown.toggle()
}
}
}
}
.onAppear {
self.obser.fetchData()
}
.sheet(isPresented: $shown, content: {
NewTaskView(isShown: $shown, task: selectedTask)
})
}
}

"Type '()' cannot conform to 'View'; only struct/enum/class types can conform to protocols"

EDIT: Explanation to the problem
This code is producing an error where the poster doesn't know how to solve it.
This is a new edit of the previous post.
I received the error on >Geometry Reader. This post includes all of the code. This new post includes the Sign-Up and Login code as requested. I hope that it is in a readable format. I made some corrections that I hope will help. The code is listed below:
import SwiftUI
struct ContentView: View {
var body: some View {
Home()
// for light status bar...
.preferredColorScheme(.dark)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Home : View {
#State var index = 0
var body: some View{
GeometryReader{ _ in // ( ERROR MESSAGE OCCURS HERE)--> ("Type '()' cannot conform to'View'; only struct/enum/class types can conform to protocols" and "Required by generic struct 'GeometryReader' where 'Content' = '()'")
VStack{
Image("logo")
.resizable()
.frame(width:60, height: 60)
ZStack{
SignUp(index: self.$index)
*// changing view order...*
.zIndex(Double(self.index))
Login(index: self.$index)
}
HStack(spacing: 15){
Rectangle()
.fill(Color("Blue"))
.frame(height: 1)
Text("OR")
Rectangle()
.fill(Color("Blue"))
.frame(height: 1)
}
.padding(.horizontal, 20)
.padding(.top, 50)
*// because login button is moved 25 in y axis and 25 padding = 50*
.background(Color("Orange").edgesIgnoringSafeArea(.all))
//Curve...
HStack(spacing: 25){
Button(action: {
}) {
Image("Unknown")
.resizable()
.renderingMode(.original)
.frame(width: 50, height: 50)
.clipShape(Circle())
}
Button(action: {
}) {
Image("fb")
.resizable()
.renderingMode(.original)
.frame(width: 50, height: 50)
.clipShape(Circle())
}
Button(action: {
}) {
Image("instagram")
.resizable()
.renderingMode(.original)
.frame(width: 50, height: 50)
.clipShape(Circle())
}
}
.padding(.top, 30)
}
.padding(.vertical)
struct CShape: Shape {
func path(in rect: CGRect) -> Path {
return Path {path in
*//right side curve...*
path.move(to: CGPoint(x: rect.width, y: 100))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: 0, y: rect.height))
path.addLine(to: CGPoint(x: 0, y: 0))
}
}
}
struct CShape1: Shape {
func path(in rect: CGRect) -> Path {
return Path {path in
*//left side curve...*
path.move(to: CGPoint(x: 0, y: 100))
path.addLine(to: CGPoint(x: 0, y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: 0))
}
}
}
struct Login : View {
#State var email = ""
#State var pass = ""
#Binding var index : Int
var body : some View {
ZStack(alignment: .bottom) {
VStack{
HStack{
VStack(spacing:10){
Text("Login")
.foregroundColor(self.index == 0 ? .white : .gray)
.font(.title)
.fontWeight(.bold)
Capsule()
.fill(self.index == 0 ? Color.blue : Color.clear)
.frame(width:100, height: 5)
}
Spacer(minLength:0)
}
.padding(.top, 30)// for top curve...
VStack{
HStack(spacing:15){
Image(systemName: "envelope")
.foregroundColor(Color("Blue"))
TextField("Email Adress", text: self.$email)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 40)
VStack{
HStack(spacing:15){
Image(systemName: "eye")
.foregroundColor(Color("Orange"))
SecureField("Password", text: self.$pass)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 30)
HStack{
Spacer(minLength: 0)
Button(action: {
}) {
Text("Forget Password?")
.foregroundColor(Color.white.opacity(0.6))
}
}
.padding(.horizontal)
.padding(.top, 30)
}
.padding()
// bottom padding...
.padding(.bottom, 65)
.background(Color("LightBlue"))
.clipShape(CShape())
.contentShape(CShape())
.shadow(color: Color.black.opacity(0.3), radius: 5, x: 0, y: -5)
.onTapGesture{
self.index = 0
}
.cornerRadius(35)
.padding(.horizontal,20)
// Button...
Button(action: {
}) {
Text("LOGIN")
.foregroundColor(.white)
.fontWeight(.bold)
.padding(.vertical)
.padding(.horizontal, 50)
.background(Color("LightBlue"))
.clipShape(Capsule())
// shadow ...
.shadow(color: Color.white.opacity(0.1), radius: 5, x: 0, y: 5)
}
// moving view down...
.offset(y: 25)
.opacity(self.index == 0 ? 1 : 0)
}
}
}
// SignUp Page...
struct SignUp : View {
#State var email = ""
#State var pass = ""
#State var Repass = ""
#Binding var index: Int
var body : some View {
ZStack(alignment: .bottom) {
VStack{
HStack{
Spacer(minLength:0)
VStack(spacing: 10){
Text("SignUp")
.foregroundColor(self.index == 1 ? .white : .gray)
.font(.title)
.fontWeight(.bold)
Capsule()
.fill(self.index == 1 ? Color.blue : Color.clear)
.frame(width:100, height: 5)
}
}
.padding(.top, 30)// for top curve...
VStack{
HStack(spacing:15){
Image(systemName: "envelope")
.foregroundColor(Color("Orange"))
TextField("Email Adress", text: self.$email)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 40)
VStack{
HStack(spacing:15){
Image(systemName: "eye")
.foregroundColor(Color("Orange"))
SecureField("Password", text: self.$pass)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 30)
// replacing forget password with reenter password...
// so same height will be maintained...
VStack{
HStack(spacing:15){
Image(systemName: "eye")
.foregroundColor(Color("Orange"))
SecureField("Password", text: self.$Repass)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 30)
}
.padding()
// bottom padding...
.padding(.bottom, 65)
.background(Color("Blue"))
.clipShape(CShape1())
//clipping the content shape also for tap gesture...
.contentShape(CShape1())
// shadow...
.shadow(color: Color.black.opacity(0.3), radius: 5, x: 0, y: -5)
.onTapGesture {
self.index = 1
}
.cornerRadius(35)
.padding(.horizontal,20)
*// Button...*
Button(action: {
}) {
Text("SIGNUP")
.foregroundColor(.white)
.fontWeight(.bold)
.padding(.vertical)
.padding(.horizontal, 50)
.background(Color("Blue"))
.clipShape(Capsule())
*// shadow ...*
.shadow(color: Color.white.opacity(0.1), radius: 5, x: 0, y: 5)
}
*// moving view down...*
.offset(y: 25)
*// hiding view when its in background...*
*// only button...*
.opacity(self.index == 1 ? 1 : 0)
}
}
}
}
}
}
So the problem in your code is that you are defining views inside a GeomtryReader and that's a big no no. So a fix would be to move the Login and Singup outside the GeomtryReader or even better and better practice is just create a new file for each view and add it's code in that file. For example one file for Login.swift and another for Register.swift and maybe another called Shapes which includes multiple shapes and exports them.
What you were doing is something similar to this
struct ContentView: View {
var body: some View {
GeomtryReader { _ in
Text("test")
// Here is where the bug would happen
struct NewView: View {
var body: some View {
Text("Second View")
}
}
//////////////////////////////////////
}
}
}
You can see if you copy and paste the above code it will generate the same error. What you should do is move NewView outside of GeomtryReader
Something like this
struct ContentView: View {
var body: some View {
return GeomtryReader { _ in
Text("test")
}
// This will fix the error
struct NewView: View {
var body: some View {
Text("Second View")
}
}
//////////////////////////////////////
}
}
Notice where I have moved the code. Also pay attention I have added Return to the GeomtryReader and that's because body is a computed property that expects to have a value of View but in this case we are confusing the compiler as to which View we want it to be the returned value so we have to manually specify it. If you don't want to include return then you would have to move NewView outside body or even better outside ContentView all together.
In any case here is your code working 100%, you can copy and paste it.
import SwiftUI
struct ContentView: View {
var body: some View {
Home()
// for light status bar...
.preferredColorScheme(.dark)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Home : View {
#State var index = 0
var body: some View{
return GeometryReader{ _ in // ( ERROR MESSAGE OCCURS HERE)--> ("Type '()' cannot conform to'View'; only struct/enum/class types can conform to protocols" and "Required by generic struct 'GeometryReader' where 'Content' = '()'")
VStack{
Image("logo")
.resizable()
.frame(width:60, height: 60)
ZStack{
SignUp(index: self.$index)
// changing view order...*
.zIndex(Double(self.index))
Login(index: self.$index)
}
HStack(spacing: 15){
Rectangle()
.fill(Color("Blue"))
.frame(height: 1)
Text("OR")
Rectangle()
.fill(Color("Blue"))
.frame(height: 1)
}
.padding(.horizontal, 20)
.padding(.top, 50)
// because login button is moved 25 in y axis and 25 padding = 50*
.background(Color("Orange").edgesIgnoringSafeArea(.all))
// Curve...
HStack(spacing: 25){
Button(action: {
}) {
Image("Unknown")
.resizable()
.renderingMode(.original)
.frame(width: 50, height: 50)
.clipShape(Circle())
}
Button(action: {
}) {
Image("fb")
.resizable()
.renderingMode(.original)
.frame(width: 50, height: 50)
.clipShape(Circle())
}
Button(action: {
}) {
Image("instagram")
.resizable()
.renderingMode(.original)
.frame(width: 50, height: 50)
.clipShape(Circle())
}
}
.padding(.top, 30)
}
.padding(.vertical)
}
struct Login : View {
#State var email = ""
#State var pass = ""
#Binding var index : Int
var body : some View {
ZStack(alignment: .bottom) {
VStack{
HStack{
VStack(spacing:10){
Text("Login")
.foregroundColor(self.index == 0 ? .white : .gray)
.font(.title)
.fontWeight(.bold)
Capsule()
.fill(self.index == 0 ? Color.blue : Color.clear)
.frame(width:100, height: 5)
}
Spacer(minLength:0)
}
.padding(.top, 30)// for top curve...
VStack{
HStack(spacing:15){
Image(systemName: "envelope")
.foregroundColor(Color("Blue"))
TextField("Email Adress", text: self.$email)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 40)
VStack{
HStack(spacing:15){
Image(systemName: "eye")
.foregroundColor(Color("Orange"))
SecureField("Password", text: self.$pass)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 30)
HStack{
Spacer(minLength: 0)
Button(action: {
}) {
Text("Forget Password?")
.foregroundColor(Color.white.opacity(0.6))
}
}
.padding(.horizontal)
.padding(.top, 30)
}
.padding()
// bottom padding...
.padding(.bottom, 65)
.background(Color("LightBlue"))
.clipShape(CShape())
.contentShape(CShape())
.shadow(color: Color.black.opacity(0.3), radius: 5, x: 0, y: -5)
.onTapGesture{
self.index = 0
}
.cornerRadius(35)
.padding(.horizontal,20)
// Button...
Button(action: {
}) {
Text("LOGIN")
.foregroundColor(.white)
.fontWeight(.bold)
.padding(.vertical)
.padding(.horizontal, 50)
.background(Color("LightBlue"))
.clipShape(Capsule())
// shadow ...
.shadow(color: Color.white.opacity(0.1), radius: 5, x: 0, y: 5)
}
// moving view down...
.offset(y: 25)
.opacity(self.index == 0 ? 1 : 0)
}
}
}
//SignUp Page...
struct SignUp : View {
#State var email = ""
#State var pass = ""
#State var Repass = ""
#Binding var index: Int
var body : some View {
ZStack(alignment: .bottom) {
VStack{
HStack{
Spacer(minLength:0)
VStack(spacing: 10){
Text("SignUp")
.foregroundColor(self.index == 1 ? .white : .gray)
.font(.title)
.fontWeight(.bold)
Capsule()
.fill(self.index == 1 ? Color.blue : Color.clear)
.frame(width:100, height: 5)
}
}
.padding(.top, 30)// for top curve...
VStack{
HStack(spacing:15){
Image(systemName: "envelope")
.foregroundColor(Color("Orange"))
TextField("Email Adress", text: self.$email)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 40)
VStack{
HStack(spacing:15){
Image(systemName: "eye")
.foregroundColor(Color("Orange"))
SecureField("Password", text: self.$pass)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 30)
// replacing forget password with reenter password...
// so same height will be maintained...
VStack{
HStack(spacing:15){
Image(systemName: "eye")
.foregroundColor(Color("Orange"))
SecureField("Password", text: self.$Repass)
}
Divider().background(Color.white.opacity(0.5))
}
.padding(.horizontal)
.padding(.top, 30)
}
.padding()
// bottom padding...
.padding(.bottom, 65)
.background(Color("Blue"))
.clipShape(CShape1())
//clipping the content shape also for tap gesture...
.contentShape(CShape1())
// shadow...
.shadow(color: Color.black.opacity(0.3), radius: 5, x: 0, y: -5)
.onTapGesture {
self.index = 1
}
.cornerRadius(35)
.padding(.horizontal,20)
// Button...*
Button(action: {
}) {
Text("SIGNUP")
.foregroundColor(.white)
.fontWeight(.bold)
.padding(.vertical)
.padding(.horizontal, 50)
.background(Color("Blue"))
.clipShape(Capsule())
// shadow ...*
.shadow(color: Color.white.opacity(0.1), radius: 5, x: 0, y: 5)
}
// moving view down...*
.offset(y: 25)
// hiding view when its in background...*
// only button...*
.opacity(self.index == 1 ? 1 : 0)
}
}
}
struct CShape: Shape {
func path(in rect: CGRect) -> Path {
return Path {path in
//right side curve...*
path.move(to: CGPoint(x: rect.width, y: 100))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: 0, y: rect.height))
path.addLine(to: CGPoint(x: 0, y: 0))
}
}
}
struct CShape1: Shape {
func path(in rect: CGRect) -> Path {
return Path {path in
//left side curve...*
path.move(to: CGPoint(x: 0, y: 100))
path.addLine(to: CGPoint(x: 0, y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: rect.width, y: 0))
}
}
}
}
}

SwiftUI animations of elements in a scrollview doesn't work ? Xcode GM update

I just switched to the GM version of xcode and since then I have a problem that I did not have before it seems to me.
I created a simplified version of the problem:
I have a scrollview with several elements inside.
I add animations states on the blue square but I have the impression the elements have no animations and changes state brutally.
I tried with an element outside the scrollview (purple square) and it works
I don't see why animations do not work someone has an idea?
#State var Enter = false
var body: some View {
VStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
Rectangle()
.foregroundColor(Color.red)
.frame(width: 80, height: 80, alignment: .center)
Button(action: {
withAnimation(.easeInOut(duration: 1.12)) {
self.Enter = true
}
}) {
Rectangle()
.foregroundColor(Color.blue)
.frame(width: 80, height: 80, alignment: .center)
.opacity(self.Enter ? 0 : 1)
}
//.padding(.horizontal, self.Enter ? 50 : 10)
Rectangle()
.foregroundColor(Color.green)
.frame(width: 80, height: 80, alignment: .center)
.offset(x: self.Enter ? 30 : 0 , y: 0)
Rectangle()
.foregroundColor(Color.red)
.frame(width: 80, height: 80, alignment: .center)
}
.padding(.leading, 67 )
.padding(.trailing, 110)
// .padding(.top, (screen.height)/81.2)
.padding(.bottom, 10)
}
HStack {
Rectangle()
.foregroundColor(Color.purple)
.frame(width: 80, height: 80, alignment: .center)
.offset(x: self.Enter ? 80 : 0 , y: 0)
}
}
}
Using implicit vice explicit animation often works for me in these situations. This should accomplish what you were looking for: (works in the Xcode 11 GM seed)
Update: GM seed is apparently not passing the animation inside the scroll view. Edited to apply animation to both the HStack and the lone purple box
struct Square: View {
let color: Color
var body: some View {
Rectangle()
.fill(color)
.frame(width: 80, height: 80)
}
}
struct SquareAnimation: View {
#State private var enter = false
var body: some View {
VStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
Square(color: .red)
Square(color: .blue)
.opacity(self.enter ? 0.25 : 1)
.onTapGesture {
self.enter.toggle()
}
Square(color: .green)
.offset(x: self.enter ? 30 : 0)
Square(color: .red)
}
.animation(.easeInOut)
}
Square(color: .purple)
.offset(x: self.enter ? 80 : 0)
.animation(.easeInOut)
}
}
}
I am stuck with same problem. Solution by smr has helped. However, I was not able to get show/hide view animation. Following is an example:
struct Test: View {
#State var showView = false
var body: some View {
ScrollView {
Button(action: {
self.showView.toggle()
}) {
Text("Toggle View")
}
if showView {
Text("Some View")
}
}
.animation(.easeInOut)
}
}

Resources