Thank you, this is so helpful, but the problem is that once I implement this feature I will never be able to interact with any components that are located at the Main View Controller (The Pumpkins View Controller)
For fixing inaccessible problem with main view : 1- Hide visualEffectView after adding it as a subview to view (inside setupCardView method) 2- Show it in "animateTransitionIfNeeded -> frameAnimator -> case .expanded:" 3- Add this method below of "runningAnimations.append(blurAnimator)" blurAnimator.addCompletion { (_) in if state == .collapsed { self.visualEffectView.isHidden = true } } And that's it, your main view has been accessible. Happy coding..
Thank you. Holy fucking shit, I wasted two days figuring out how to implement the other code from another comment (which wasn't working) until I saw your comment. Holy, wow. just wow. Thank you.
@Brian Advent You missed the case that, in collapsed state, i pull up and pull down at the pan end. Then the cardViewController should remain collapsed.
Thanks Brian, I have a question, How can I interact with first ViewController? , where you have the background of the pumpkins if I want to add a button this doesn't work.
@@enochjohnson in viewdidappear write this line. self.visualEffectView.isUserInteractionEnabled = true when collapsed call self.uibutton.isUserInteractionEnabled = true
Hi Brian, I love your videos, thank you for your clarity. Just wondering if you could show some more features of the Charts framework? Also, I'm not sure if you've done this already, but would you be able to explain how to take content from an image view (or Chart view) and export to pdf and/or attach to email? Thank you!
thanks for this great tutorial, do you already have a course that is doing animation like App Store, tap an app image, the app go smoothly take up full screen with some sprint animation ? thanks
This is the best way to add scrollable content to the "card view": th-cam.com/video/9cEMh19P-R4/w-d-xo.html Make sure to offset the y-position of the scrollable content by adding this code to the setupScrollView function (otherwise the animations won't work): scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true
Bryan, How do you know that much? I don't wanna sound rude but I have been learning day in day out from one year now and this seems to be endlessly, do you follow any special books or any straightforward documentation? I really would like to know it, because I notice it's better to know how the system works instead of making learning tutorials forever and ever.
Great video but What about safe area support ? can you do something with it. One more thing suppose next state is collapse and User move his finger to up (he wants keep it expanded) in this case can we reverse the animation with velocity Hope you are getting my point
Here How I achieved it in Pan gesture continueAnimation(finalVelocity: recognizer.velocity(in: self.cardViewController.handlerArea)) func continueAnimation (finalVelocity:CGPoint) { print(cardVisible == (finalVelocity.y < 0))
if cardVisible == (finalVelocity.y < 0) { var completedFraction:CGFloat = 0 for animation in animations { completedFraction = animation.fractionComplete animation.stopAnimation(false) } animations.removeAll() self.cardVisible = !self.cardVisible self.createAnimation(state: nextState, duration: TimeInterval(completedFraction * 0.9)) } else { for animation in animations { animation.continueAnimation(withTimingParameters: nil, durationFactor: 0) } } }
User interaction gets disabled on the parent view controller, how to fix that? Solution: self.visualEffectView.removeFromSuperview() self.cardViewController.view.removeFromSuperview() self.cardViewController.removeFromParent()
Why did you use a ternary operator for cardVisible return? And why did you put . infront of collapsed and expanded? I'm new to Swift so I'm learning. Thanks
⭐️⭐️⭐️⭐️⭐️ What a great video and material, thank you very much for this video, I want to ask you what should be modified so that the "CardViewController.xib" does not occupy the full width of the screen.?
Hello Brian, i just watched your tutorial now and applied it on a mapView and after that the mapView became inactive, u can seem to do anything on it, i guess its blc theres a new view added on it, can you help me solve this issue please.
I thing that using fractionComplete is a pretty bad way to make card view. I have a better way, with pan gesture recognizer you can change y position of card view and depending on that position trigger animation when pan gesture ended. For example, when card view is expanded its y position is 100 and when it’s retracted it’s y position is 10 and depending on current y position trigger animation, is y pos is lower than 60 then the card view animate to retracted state and if it is greater than 60 it will animate to expanded state. Also pan recognizer have a velocity property so you can also change state depending on that.
little suggestion for "handlePan" case .ended: let translation = recognizer.translation(in: self.viewHandler) var fractionComplete = translation.y / self.viewCard.frame.height fractionComplete = cardVisible ? fractionComplete : -fractionComplete if fractionComplete < 0.3{ cardVisible = false for animator in runningAnimations{ animator.stopAnimation(false) } self.runningAnimations.removeAll() animateTransitionIfNeeded(state: nextState, duration: 0.5) }else{ continueInteractiveTransition() } by this the card view will get back to .expanded state if user dont want to .collapsed state each time
Hi Brian, thanks for this video. I wanted to ask how to go about getting the three states instead of just two. (collapsed & expanded). Say I want the card to go from 0 to 150. Then a further swipe up should expand it fully else a swipe down should collapse it. You can see something in Shortcuts app on iOS. Any idea or help will be appreciated. Thanks!
Hello, I have followed step by step your explanations, and the func cornerRadiusAnimator doesn't work and I get an Optional error that appears with the func blurAnimator, because on case .expanded I receive first a nil. how can i fix that? many thanks for the help.
I am trying to implement a search bar in the view. However, I am having trouble when the keyboard appears and disappears. I am thinking the best approach would be to create a "third" state to handle a semi-collapsed view?
You don't need to remove it just follow my steps below 1- Hide visualEffectView after adding it as a subview to view 2- Show it in "animateTransitionIfNeeded -> frameAnimator -> case .expanded:" 3- Add this method below of "runningAnimations.append(blurAnimator)" blurAnimator.addCompletion { (_) in if state == .collapsed { self.visualEffectView.isHidden = true } } And that's it, your main view has been accessible. Happy coding.. @@andrew7675
@@coderacjhp9282 Thank you! But I can only access the main view after I have dragged the card view up and down once. Is there a way of solving this? Thanks in advance!
Great tutorial! Thank you, just in time! I bought all your courses in Udemy. Please, when you will update your CoreData course - add some instructions how to use iCloud container to sync data between devices or at list how to save it on iCloud Drive.
"Just had to copy and paste my comment" Good luck lol....I've been trying to get the Udemy instructors to update their content for months on the Courses I purchased for "iOS 12 and Xcode 10" and it seems like only thing that got updated was the TITLE!!
Good luck lol....I've been trying to get the Udemy instructors to update their content for months on the Courses I purchased for "iOS 12 and Xcode 10" and it seems like only thing that got updated was the TITLE!!
Hi Brian, I followed this tutorial and added some additional frame animation of a UILabel to it. It doesn't seem to work on tap gesture though, even if it's working correctly on a pan gesture. I'd be happy to share you the source code. Can you help me with this, please?
switch nextState { case .expanded: self.cardVC.view.frame.origin.y = 0 self.cardVC.enterNumberLabel.frame.origin.y = self.cardVC.handleView.frame.minY + 24 // this doesn't work on tap, but working on pan gesture case .collapsed: self.cardVC.view.frame.origin.y = self.view.frame.height - self.cardHeightWhenCollapsed self.cardVC.enterNumberLabel.frame.origin.y = self.cardVC.handleView.frame.minY - 24 // this doesn't work on tap, but working on pan gesture }
i try to change label inside Card View when is .expanded and i get a BUG, hes automaticly collapsed.... i think animation stoped when a changed label how fix it?.
I have a map view on the background and a floating window but when I add the floating window it completely replaces the background (a white screen comes where the map should be displayed) any idea how I can fix this ?
I've dropped a text field & I covered the main storyboard with map view, it worked but I can't use then in the simulator, Its like the Card view blocking the the screen. Please help
Thanks Brian, I'm an iOS developer here in Brazil and I'm learning a lot from your videos.
Thanks for sharing and please continue with animations!
kitna Sara Coding karta hai bhai tu...boht talented hai tu....
Amazing work Brian , thank you
yeah , this is a really awesome video
Thank you, this is so helpful, but the problem is that once I implement this feature I will never be able to interact with any components that are located at the Main View Controller (The Pumpkins View Controller)
Brian, it is a really awesome tutorial, thank you so much! Please, do more about property animator!)
For fixing inaccessible problem with main view :
1- Hide visualEffectView after adding it as a subview to view (inside setupCardView method)
2- Show it in "animateTransitionIfNeeded -> frameAnimator -> case .expanded:"
3- Add this method below of "runningAnimations.append(blurAnimator)"
blurAnimator.addCompletion { (_) in
if state == .collapsed {
self.visualEffectView.isHidden = true
}
}
And that's it, your main view has been accessible.
Happy coding..
Thank you. Holy fucking shit, I wasted two days figuring out how to implement the other code from another comment (which wasn't working) until I saw your comment. Holy, wow. just wow. Thank you.
Thanks
It would be great to update this tutorial to show how this works in SwiftUI - any plans to do a video on this?
awesome tutorial, thanks a lot!
What an amazing tutorial, thanks! 👍
@Brian Advent You missed the case that, in collapsed state, i pull up and pull down at the pan end. Then the cardViewController should remain collapsed.
I just found this bug, do you know how to fix this ?
Thanks Brian, I have a question, How can I interact with first ViewController? , where you have the background of the pumpkins if I want to add a button this doesn't work.
Were you able to figure it out? I have the same problem.
it's too late for reply but visualEffectView.isUserInteractionEnabled false and true work for me
@@bitsnbytes398 How would you do that?
@@enochjohnson in viewdidappear write this line. self.visualEffectView.isUserInteractionEnabled = true
when collapsed call self.uibutton.isUserInteractionEnabled = true
SyedMUmer Sajjad thanks
You are the best. Many thanks!
great tutorial
Hi Brian, I love your videos, thank you for your clarity. Just wondering if you could show some more features of the Charts framework?
Also, I'm not sure if you've done this already, but would you be able to explain how to take content from an image view (or Chart view) and export to pdf and/or attach to email? Thank you!
thanks for this great tutorial, do you already have a course that is doing animation like App Store, tap an app image, the app go smoothly take up full screen with some sprint animation ? thanks
Excellent tutorial. Thank you.
how would you go about adding scrollable content inside of the "card view". is it possible to move the y position of the card as the content scrolls?
I would love to know that as well!
just add this to your card controller
extension CardViewController: UIGestureRecognizerDelegate {
func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
let offest = scrollView.contentOffset
let v = (gestureRecognizer as! UIPanGestureRecognizer).velocity(in: nil)
return v.y > abs(v.x) && offest.y Bool {
return true
}
}
@@666MrGamer Add a `UITableView`
This is the best way to add scrollable content to the "card view": th-cam.com/video/9cEMh19P-R4/w-d-xo.html
Make sure to offset the y-position of the scrollable content by adding this code to the setupScrollView function (otherwise the animations won't work):
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true
They added this API 2 years ago and I'm just now learning about this!? 🤯
Bryan, How do you know that much? I don't wanna sound rude but I have been learning day in day out from one year now and this seems to be endlessly, do you follow any special books or any straightforward documentation? I really would like to know it, because I notice it's better to know how the system works instead of making learning tutorials forever and ever.
It's worked really well but as soon as we add it into tab bar controller it broke, how do we fix it?
Great video but What about safe area support ? can you do something with it. One more thing suppose next state is collapse and User move his finger to up (he wants keep it expanded) in this case can we reverse the animation with velocity
Hope you are getting my point
Here How I achieved it
in Pan gesture
continueAnimation(finalVelocity: recognizer.velocity(in: self.cardViewController.handlerArea))
func continueAnimation (finalVelocity:CGPoint) {
print(cardVisible == (finalVelocity.y < 0))
if cardVisible == (finalVelocity.y < 0) {
var completedFraction:CGFloat = 0
for animation in animations {
completedFraction = animation.fractionComplete
animation.stopAnimation(false)
}
animations.removeAll()
self.cardVisible = !self.cardVisible
self.createAnimation(state: nextState, duration: TimeInterval(completedFraction * 0.9))
} else {
for animation in animations {
animation.continueAnimation(withTimingParameters: nil, durationFactor: 0)
}
}
}
Please help, how can we open this card by tap on Cell in CollectionView ?
User interaction gets disabled on the parent view controller, how to fix that?
Solution:
self.visualEffectView.removeFromSuperview()
self.cardViewController.view.removeFromSuperview()
self.cardViewController.removeFromParent()
Where we have to place this code?
@@mujtubaamin360 where you need that to be removed or just simply disable and enable user interaction on the FX Layer.
you saved my day bro really thank you
@@mohamedosama6697 you can play with user interactivity property too.
@@vrushabhrupala8663 I am so late, but heres the solution to that
visualEffectView.isUserInteractionEnabled = false
Why did you use a ternary operator for cardVisible return? And why did you put . infront of collapsed and expanded? I'm new to Swift so I'm learning. Thanks
⭐️⭐️⭐️⭐️⭐️ What a great video and material, thank you very much for this video, I want to ask you what should be modified so that the "CardViewController.xib" does not occupy the full width of the screen.?
Great video! Thanks! Please read the Swift Style Guide though to improve your formatting. It will greatly help my OCD while watching you code lol.
Thank you for your video, helps me a lot
Hello Brian, i just watched your tutorial now and applied it on a mapView and after that the mapView became inactive, u can seem to do anything on it, i guess its blc theres a new view added on it, can you help me solve this issue please.
Awesome : ) Brain . Thanks for sharing your knowlege :) Appreciate your work :) Well Done :)
How to preset to start with Expand？
If i want to add 3 stages 1st fullexpand or halfexpand and Collapsed.
Are the horisontal gray lines by default or are they manually added?
thanx a lot!! it's REEAALLYY awesome!! thousands likes
WooooooW 😍 Awesome
How would you do to swipe down from collapsed state to dismiss the view?
wooow wow woooow thank you very much that was amazing
Really Helpfull 👍🏻
One question. I have lost interactivity with the back VC. Any Idea how can I regain it ?
self.visualEffectView.removeFromSuperview()
self.cardViewController.view.removeFromSuperview()
self.cardViewController.removeFromParent() *wink*
I thing that using fractionComplete is a pretty bad way to make card view. I have a better way, with pan gesture recognizer you can change y position of card view and depending on that position trigger animation when pan gesture ended. For example, when card view is expanded its y position is 100 and when it’s retracted it’s y position is 10 and depending on current y position trigger animation, is y pos is lower than 60 then the card view animate to retracted state and if it is greater than 60 it will animate to expanded state. Also pan recognizer have a velocity property so you can also change state depending on that.
Very helpful and learning video
Hi Brian,
I think animationProgressWhenInterrumpted is not needed, property framtionComplete of animator will set automatically when pauseAnimation().
little suggestion for "handlePan"
case .ended:
let translation = recognizer.translation(in: self.viewHandler)
var fractionComplete = translation.y / self.viewCard.frame.height
fractionComplete = cardVisible ? fractionComplete : -fractionComplete
if fractionComplete < 0.3{
cardVisible = false
for animator in runningAnimations{
animator.stopAnimation(false)
}
self.runningAnimations.removeAll()
animateTransitionIfNeeded(state: nextState, duration: 0.5)
}else{
continueInteractiveTransition()
}
by this the card view will get back to .expanded state if user dont want to .collapsed state each time
Brian damn you are Swifty Gangster
Hi Brian, thanks for this video. I wanted to ask how to go about getting the three states instead of just two. (collapsed & expanded). Say I want the card to go from 0 to 150. Then a further swipe up should expand it fully else a swipe down should collapse it. You can see something in Shortcuts app on iOS. Any idea or help will be appreciated. Thanks!
Main View Controller is not working after adding cardviewcontroller
Hello, I have followed step by step your explanations, and the func cornerRadiusAnimator doesn't work and I get an Optional error that appears with the func blurAnimator, because on case .expanded I receive first a nil. how can i fix that? many thanks for the help.
@brian Kindly let me know how sms verification use in Swift
This is Awesome, thanks
@BrianAvent When this card is added over a tableview, it breaks the tableview's ability to scroll. Any idea how to resolve that issue?
It's because of the visual effect added as a sub view
Somebody resolved this bug with tableView?
how to add card in all screen (hole project)???
Thanks for sharing 😍
I am trying to implement a search bar in the view. However, I am having trouble when the keyboard appears and disappears. I am thinking the best approach would be to create a "third" state to handle a semi-collapsed view?
I have this card running over another view, but I can’t press a button on the bottom view, please help
Nevermind just removed blur view
You don't need to remove it just follow my steps below
1- Hide visualEffectView after adding it as a subview to view
2- Show it in "animateTransitionIfNeeded -> frameAnimator -> case .expanded:"
3- Add this method below of "runningAnimations.append(blurAnimator)"
blurAnimator.addCompletion { (_) in
if state == .collapsed {
self.visualEffectView.isHidden = true
}
}
And that's it, your main view has been accessible.
Happy coding..
@@andrew7675
@@coderacjhp9282 Could you please elaborate on the first and second steps, its being troublesome to get it working :(
@@coderacjhp9282 You're awesome! I banged my head against the keyboard for way too long trying to solve this one!
@@coderacjhp9282 Thank you! But I can only access the main view after I have dragged the card view up and down once. Is there a way of solving this?
Thanks in advance!
Great tutorial! Thank you, just in time!
I bought all your courses in Udemy. Please, when you will update your CoreData course - add some instructions how to use iCloud container to sync data between devices or at list how to save it on iCloud Drive.
"Just had to copy and paste my comment" Good luck lol....I've been trying to get the Udemy instructors to update their content for months on the Courses I purchased for "iOS 12 and Xcode 10" and it seems like only thing that got updated was the TITLE!!
Evgenii Turchaninov CoreData is kinda slow , take a look as Realm
Are you sure the SpriteKit course on udemy is up to date?
Good luck lol....I've been trying to get the Udemy instructors to update their content for months on the Courses I purchased for "iOS 12 and Xcode 10" and it seems like only thing that got updated was the TITLE!!
how can we put as a button action please reply
thanks a lot man!
How to achieve navbar button click to wakeup also landscape not working properly.
Hi Brian, I followed this tutorial and added some additional frame animation of a UILabel to it. It doesn't seem to work on tap gesture though, even if it's working correctly on a pan gesture. I'd be happy to share you the source code. Can you help me with this, please?
switch nextState {
case .expanded:
self.cardVC.view.frame.origin.y = 0
self.cardVC.enterNumberLabel.frame.origin.y = self.cardVC.handleView.frame.minY + 24 // this doesn't work on tap, but working on pan gesture
case .collapsed:
self.cardVC.view.frame.origin.y = self.view.frame.height - self.cardHeightWhenCollapsed
self.cardVC.enterNumberLabel.frame.origin.y = self.cardVC.handleView.frame.minY - 24 // this doesn't work on tap, but working on pan gesture
}
Hi Brian, what if I want the image to scale down to 1/3 of the screen and the card to occupy 2/3? How can I do the scaling instead of blur?
I’d love to see a tutorial on how to add a character selection menu and the ability to change characters in games. 📱👾👽🤖
i try to change label inside Card View when is .expanded and i get a BUG, hes automaticly collapsed.... i think animation stoped when a changed label how fix it?.
Thanks briant
Thanks!
I have a map view on the background and a floating window but when I add the floating window it completely replaces the background (a white screen comes where the map should be displayed) any idea how I can fix this ?
Did you find a solution? I have the same issue :D
@@dmitrygrin6930 Yes I added the floating window at position 2 and it worked for me
@@TheFirzoknadeem1 can you interact with the map view that you have in the background?
@@rodrigobuendiaramos3076 yes
you are amazing
very nice
I've dropped a text field & I covered the main storyboard with map view, it worked but I can't use then in the simulator, Its like the Card view blocking the the screen. Please help
yes thats happen because UIVisualEffectView() layer is covering the whole view
@@kleon790 Any solution?
Why dont you start really from scratch ? I'm a beginner and I have no idea CardViewController xib file, and not just that the other files too..
Anyone please guide me how can i implement above with TabBarViewController which also have navigation bar.Please
Not at all an effective way of doing this. You shouldn't couple the cardViewController to any other viewController.
The purpose of this video is not clean architecture.
Alique, what do you mean? What is a better way of doing this then?
@@shingetzu88 Did you ever find an answer to this?
@@supersquare no. :(
2 likes! but it impossible )
1st
And kindly give me grocery store Making tutorial
How to attach view to Referencing Outlets?
why you create a cardViewController and left it empty ?