Animations with safeAreaLayoutGuide (Swift 5) - swift

I would like a smooth animation of this view whenever the search bar is selected and deselected. Right now it's choppy:
Heres my code below in the searchResultsUpdater. From what I understand, these functions should handle the animations, I'm not sure what's wrong here:
func updateSearchResults(for searchController: UISearchController) {
//MapView moves up when search bar is selected
if searchController.isActive == true{
UIView.animateKeyframes(withDuration: 0.25, delay: 0.0, options: UIView.KeyframeAnimationOptions(rawValue: 7), animations: {
self.mapView.frame.origin.y=self.view.safeAreaLayoutGuide.layoutFrame.origin.y
},completion: nil)
}
//MapView moves down when cancel button is selected
if searchController.isActive == false{
UIView.animateKeyframes(withDuration: 0.25, delay: 0.0, options: UIView.KeyframeAnimationOptions(rawValue: 7), animations: {
self.mapView.frame.origin.y=self.view.safeAreaLayoutGuide.layoutFrame.origin.y
},completion: nil)
}
}
Any help is appreciated, thank you!

I found the solution. Originally I had the CGRect for the mapView frame in viewDidLayoutSubviews():
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
//layout to fit frame of view
mapView.frame = CGRect(x: 0, y: view.safeAreaInsets.top, width:
view.frame.size.width, height: view.frame.size.height -
view.safeAreaInsets.top)
}
I moved it to viewDidLoad(), and now it works:
override func viewDidLoad() {
super.viewDidLoad()
//add gesture recognizer for mapView
mapView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(mapViewAnimation)))
//layout to fit frame of view
mapView.frame = CGRect(x: 0, y: view.safeAreaInsets.top, width:
view.frame.size.width, height: view.frame.size.height -
view.safeAreaInsets.top)
}
I also added a gesture recognizer instead so that the searchResultsUpdater wouldn't be so cluttered:
//handle the animation for mapview
#objc func mapViewAnimation(){
UIView.animateKeyframes(withDuration: 0.25, delay: 0.0, options:
UIView.KeyframeAnimationOptions(rawValue: 7), animations: {
self.mapView.frame.origin.y =
self.view.safeAreaLayoutGuide.layoutFrame.origin.y
},completion: nil)
}
If anyone knows why it didn't work when I had the CGRect in didLayoutSubViews() feel free to let me know. Thanks!

Related

How To Create Animation of Segue perform and unwind segue?

i am working on application where i am trying to call controllers with animations
second view controller with animations
like when i call second controller with segue
second controller come from right and first controller start moving to left
like android push pop animations
i make some code
class SegueFromRight: UIStoryboardSegue {
override func perform() {
let src = self.source
let dst = self.destination
src.view.superview?.insertSubview(dst.view, aboveSubview: src.view)
dst.view.transform = CGAffineTransform(translationX: src.view.frame.size.width*2, y: 0)
//Double the X-Axis
UIView.animate(withDuration: 0.25, delay: 0.0, options: UIView.AnimationOptions.curveEaseInOut, animations: {
dst.view.transform = CGAffineTransform(translationX: 0, y: 0)
}) { (finished) in
src.present(dst, animated: false, completion: nil)
}
}
}
but from this code new controller come from right i need to move current controller to move left too
if anyone can help
Try this code:
class CustomSegue: UIStoryboardSegue {
override func perform() {
let firstVCView: UIView = self.source.view
let secondVCView: UIView = self.destination.view
self.destination.modalPresentationStyle = .fullScreen
let screenWidth = UIScreen.main.bounds.size.width
let screenHeight = UIScreen.main.bounds.size.height
secondVCView.frame = CGRect(x: screenWidth, y: 0, width: screenWidth, height: screenHeight)
let window = UIApplication.shared.keyWindow
window?.insertSubview(secondVCView, aboveSubview: firstVCView)
UIView.animate(withDuration: 0.4, animations: { () -> Void in
firstVCView.frame = firstVCView.frame.offsetBy(dx: -screenWidth, dy: 0.0)
secondVCView.frame = secondVCView.frame.offsetBy(dx: -screenWidth, dy: 0.0)
}) { (Finished) -> Void in
self.source.present(self.destination as UIViewController,
animated: false,
completion: nil)
}
}
}
class CustomSegueUnwind: UIStoryboardSegue {
override func perform() {
let secondVCView: UIView = self.source.view
let firstVCView: UIView = self.destination.view
self.destination.modalPresentationStyle = .fullScreen
let screenWidth = UIScreen.main.bounds.size.width
let window = UIApplication.shared.keyWindow
window?.insertSubview(firstVCView, aboveSubview: secondVCView)
UIView.animate(withDuration: 0.4, animations: { () -> Void in
firstVCView.frame = firstVCView.frame.offsetBy(dx: screenWidth, dy: 0.0)
secondVCView.frame = secondVCView.frame.offsetBy(dx: screenWidth, dy: 0.0)
}) { (Finished) -> Void in
self.source.dismiss(animated: false, completion: nil)
}
}
}
Reference HERE for more details

Adding a search bar to ui table view on overlay

I have managed to create, a dark overlay once clicked a search icon and have managed to add a table uiview on the dark overlay but now want to add a search bar within that table view. I cant seem to figure it out as my code seems different to everyone else's examples. I am new to swift so my code probably isn't the cleanest. can i ask if someone can show me how to do this as i am out of ideas. I have posted my code below can someone please show me where i'm going wrong.
Many thanks
class SearchLauncher: NSObject {
let blackView = UIView()
let tableView = UITableView()
#objc func showSearch() {
if let window = UIApplication.shared.keyWindow {
blackView.backgroundColor = UIColor(white: 0, alpha: 0.5)
blackView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDismiss)))
window.addSubview(blackView)
window.addSubview(tableView)
let height: CGFloat = 600
let y = window.frame.height - height
tableView.frame = CGRect(x: 0, y: window.frame.height, width: window.frame.width, height: height)
blackView.frame = window.frame
blackView.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.blackView.alpha = 1
self.tableView.frame = CGRect(x: 0, y: y, width: self.tableView.frame.width, height: self.tableView.frame.height)
}, completion: nil)
}
}
#objc func handleDismiss() {
UIView.animate(withDuration: 0.5) {
self.blackView.alpha = 0
if let window = UIApplication.shared.keyWindow {
self.tableView.frame = CGRect(x: 0, y: window.frame.height, width: self.tableView.frame.width, height: self.tableView.frame.height)
}
}
}
override init() {
super.init()
//start doing something here maybe
}
}```
How did you try to add a search controller?
I would do it by adding an UISearchController as a tableHeaderView of your table view. First make sure to add UISearchResultsUpdating protocol to your class.
class SearchLauncher: NSObject, UISearchResultsUpdating
Then add the search bar to your table view
let searchController = UISearchController(searchResultsController: nil)
searchController.searchBar.sizeToFit()
searchController.searchResultsUpdater = self
//you probably don't need this
//searchController.dimsBackgroundDuringPresentation = false
tableView.tableHeaderView = searchController.searchBar
And then, implement the updateSearchResults(for:_) delegate method
func updateSearchResults(for searchController: UISearchController) {
filteredTableData.removeAll(keepingCapacity: false)
//filter the table data by using searchController.searchBar.text!
//filteredTableData = ...
self.tableView.reloadData()
}

Swift - Open UIViewController from within slide-in menu

I have a slide-in menu that presents itself when I press the menu button in my navigation bar. Dismissing it can be accomplished by either tapping the background or the menu itself. Within this view I have several items, one of which is an user profile button. When I press this button, I want the menu to dismiss itself and then instantly open the user profile view controller. That's why I call handleDismiss() first and then set the view that needs to be opened
However, it keeps telling me that the view is not in the window hierarchy. I know what the problem is (view stack), but I somehow can't get it to work properly. How should I tackle this problem?
RootViewController -> HomeController (tabBar index 0) -> Slide-In Menu -> UserProfileController
Button to open the controller
profileCell.profileButton.addTarget(self, action: #selector(handleUserProfile(sender:)), for: .touchUpInside)
Functions
func handleDismiss() {
UIView.animate(withDuration: 0.5) {
self.blackView.alpha = 0
if let window = UIApplication.shared.keyWindow {
self.collectionView.frame = CGRect(x: 0, y: window.frame.height, width: self.collectionView.frame.width, height: self.collectionView.frame.height)
}
}
}
func handleUserProfile(sender: UIButton) {
handleDismiss()
let userProfileController = UserProfileController()
openProfileController(userProfileController)
}
func openProfileController(_ controller: UIViewController) {
present(controller, animated: false, completion: nil)
}
I fixed the problem by setting a reference to the rootViewController in my menu.
HomeController
let menuLauncher = MenuLauncher()
func tappedMenu(sender: UIButton) {
menuLauncher.showMenu(self)
}
MenuController
func MenuLauncher() {
self.m_ParentViewController = nil
}
func showMenu(_ parentViewController: UIViewController) {
self.m_ParentViewController = parentViewController
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(MenuLauncherImageCell.self, forCellWithReuseIdentifier: cellIdImage)
collectionView.register(MenuLauncherInfoCell.self, forCellWithReuseIdentifier: cellIdInfo)
if let window = UIApplication.shared.keyWindow {
blackView.backgroundColor = UIColor(white: 0, alpha: 0.5)
blackView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDismiss)))
window.addSubview(blackView)
window.addSubview(collectionView)
collectionView.frame = CGRect(x: 0, y: window.frame.height, width: window.frame.width, height: 350)
blackView.frame = window.frame
blackView.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.blackView.alpha = 1
self.collectionView.frame = CGRect(x: 0, y: window.frame.height - 350, width: self.collectionView.frame.width, height: self.collectionView.frame.height)
}, completion: nil)
}
}
func handleDismiss() {
UIView.animate(withDuration: 0.5) {
self.blackView.alpha = 0
if let window = UIApplication.shared.keyWindow {
self.collectionView.frame = CGRect(x: 0, y: window.frame.height, width: self.collectionView.frame.width, height: self.collectionView.frame.height)
}
}
}
func handleUserProfile(sender: UIButton) {
handleDismiss()
let userProfileController = UserProfileController()
self.m_ParentViewController?.present(userProfileController, animated: true, completion: nil)
}

How to fix `prepareForSegue()` override `UIViewAnimation`

I have MainViewController which has stack view and its width is over screen's width. There is slide out menu at left side of storyboard. And there is Menu button on the screen which triggers an animation to changes UIStackView's from -260 to 0. But when I click some button at slide out menu, prepareForSegue() overrides the animation and content changes immediately. How can fix that?
You can find a gif below.
Here is the codes:
class MainViewController: UIViewController
{
var container: ContainerViewController?
#IBOutlet weak var superView: UIStackView!
#IBAction func menuButtonsChangeContent(sender: AnyObject) {
switch(sender.tag){
case 1:
container?.changeContent("first")
case 2:
container?.changeContent("second")
case 3:
container?.changeContent("third")
default:
break
}
}
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "Container"{
self.slideOutMenu("")
container = segue.destinationViewController as? ContainerViewController
}
}
#IBAction func slideOutMenu(sender: AnyObject) {
if self.superView.frame.origin.x != -260 {
UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0.5, options: .CurveEaseInOut, animations: ({
self.superView.frame = CGRect(x: -260, y: 20, width: self.superView.frame.width, height: self.superView.frame.height)
}), completion: nil)
}else{
UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0.5, options: .CurveEaseInOut, animations: ({
self.superView.frame = CGRect(x: 0, y: 20, width: self.superView.frame.width, height: self.superView.frame.height)
}), completion: nil)
}
}
}
//ContainerViewController.swift
class ContainerViewController: UIViewController
{
var sourceVC: UIViewController?
var destinationVC: UIViewController?
var segueIdentifier: String?
var counter = 0
func changeContent(segueIdentifier: String)
{
self.performSegueWithIdentifier(segueIdentifier, sender: self)
}
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0.5, options: .CurveEaseInOut, animations: ({
if self.sourceVC != nil {
self.sourceVC?.view.removeFromSuperview()
print("deleted")
}
self.destinationVC = segue.destinationViewController
self.addChildViewController(self.destinationVC!)
self.destinationVC?.view.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
self.view.addSubview((self.destinationVC?.view)!)
self.destinationVC?.didMoveToParentViewController(self)
self.sourceVC = self.destinationVC
}), completion: nil)
}
}
And Storyboard:
GIF:
I was using a UIStackView as super view in MainViewController but an issue about shadows came up and I changed UIStackView to UIView. Maybe it is weird but the problem is gone.

Search bar when swiping down in swift

I am developing a social media app for iOS
My ViewControllers are currently embedded in a NavigationController.
On my news feed screen, I need to display a search bar when the user swipes down (and hide it when he swipes up) in which if the user types something, the search results will be displayed on top of the news feed screen.
I have tried to tinker with this but I am pretty new to iOS and so far have not managed to get this to work.
Any help would grately be appreciated and keep in mind that I have only been programming iOS for a couple of weeks so some in-depth would be helpful.
Thank you !
First, you'll need to implement UISwipeGestureRecognizer
include the setup() function in viewDidAppear
func setup() {
let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(down))
swipeDown.direction = .down
let swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(up))
swipeUp.direction = .up
self.view.addGestureRecognizer(swipeDown)
self.view.addGestureRecognizer(swipeUp)
searchBar = UISearchBar(frame: CGRect(x: 0.0, y: 0.0, width: self.view.frame.size.width, height: 40.0))
if let searchBar = searchBar
{
searchBar.backgroundColor = UIColor.red
self.view.addSubview(searchBar)
}
}
Then your two functions up and down
func down(sender: UIGestureRecognizer) {
print("down")
//show bar
UIView.animate(withDuration: 1.0, animations: { () -> Void in
self.searchBar!.frame = CGRect(x: 0.0, y: 64.0, width: self.view.frame.width, height: 40.0)
}, completion: { (Bool) -> Void in
})
}
func up(sender: UIGestureRecognizer) {
print("up")
UIView.animate(withDuration: 1.0, animations: { () -> Void in
self.searchBar!.frame = CGRect(x: 0.0, y: 0.0, width: self.view.frame.width, height: 40.0)
}, completion: { (Bool) -> Void in
})
}
You can add Bool isShowing to avoid unnecessary animations. Then, implement the search bar delegate textDidChange to change the search results as the user types.
func searchBar(_ searchBar: UISearchBar,textDidChange searchText: String)`
All you need to do now is display your results in a UISearchController.
Note
Using swipe up/down motion might interfere with the scrolling of the UIScreachController