Control Center-like sliding view implementation in Swift - swift

Question

I'm trying to create an interactive sliding transition on App.
The goal is to present a uiview when view controller that will be dragged from the bottom(not from the bottom edge so it won't conflict with the control center) and will partially cover the main view controller (just like the iOS control center). The transition should be interactive, i.e according to the dragging of the user.
Would be happy to hear ideas regarding available APIs.

Answer 1

Following code will do the simple slideView animation code tested in Xcode 8 and worked..
import UIKit
class ViewController: UIViewController,UIGestureRecognizerDelegate {
// I am using VisualView as a slideView
#IBOutlet weak var slideView: UIVisualEffectView!
//Button to open slideView
#IBOutlet weak var button: UIBarButtonItem!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// setting background for sideView
slideView.backgroundColor = UIColor(patternImage: UIImage(named: "original.jpg")!)
//Initial hide so it won't show.when the mainView loads...
slideView.isHidden = true
// DownSwipe to hide slideView
let downSwipe = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.handleSwipes(_:)))
downSwipe.direction = .down
view.addGestureRecognizer(downSwipe)
}
// set UIButton to open slideVie...(I am using UIBarButton)
#IBAction func sdrawButton(_ sender: AnyObject) {
self.slideView.isHidden = false
slideView.center.y += view.frame.height
UIView.animate(withDuration: 0.7, delay: 0, options: UIViewAnimationOptions.curveEaseIn, animations:{
self.slideView.center.y -= self.view.frame.height
self.button.isEnabled = false
}, completion: nil)
}
func handleSwipes(_ sender:UISwipeGestureRecognizer) {
if (sender.direction == .down) {
print("Swipe Down")
self.slideView.isHidden = true
self.slideView.center.y -= self.view.frame.height
UIView.animate(withDuration: 0.7, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations:{
self.slideView.center.y += self.view.frame.height
self.button.isEnabled = true
}, completion: nil)
}
}
}
Let me know the code works for you...

Answer 2

Sorry if this question is a bit old.
You can subclass a UIView and override touchesBegan(_ , with) to save the original touch location
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else { print("No touch"); return }
startPoint = touch.location(in: self)
startHeight = heightConstraint.constant
slideDirection = .none
super.touchesBegan(touches, with: event)
}
}
and touchesMoved(_,with) to update the Height constraint while a finger is sliding the view.
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else { print("touchesMovedno touches"); return }
let endPoint = touch.location(in: self)
let diff = endPoint.y - startPoint.y
// This causes the view to move along the drag
switch anchorLocation {
case .top :
heightConstraint.constant = startHeight + diff
case .bottom :
heightConstraint.constant = startHeight - diff
}
self.layoutIfNeeded()
// Update direction
if diff == 0.0 {
self.slideDirection = .none
} else {
self.slideDirection = (diff > 0) ? .down : .up
}
super.touchesMoved(touches, with: event)
}
Override touchesEnded(_, with) to add animation if you wish
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
self.modifyHeightConstraints()
self.animateViewTransition(duration: animDuration, delay: animDelay, clearance: animClearance, springDampingRatio: animSpringDampingRatio, initialSpringVelocity: animInitialSpringVelocity, complete: {
self.slideDirection = .none
})
super.touchesEnded(touches, with: event)
}
I have created a component that might have the exact feature you wanted. The component includes adjustable animated bouncing. You can layout and design subviews on the view in storyboard.
Check out the link in GitHub
https://github.com/narumolp/NMPAnchorOverlayView