Drawer
helps you create a draggable View Controller.
What does Draggable
mean in this context?.
Draggable
: The presented view will have ability to be vertically dragged across the screen. You will be able to use the pan gestures to move the presented view through different draggable states.
The presented View is going to have three draggable or sticky states
- open
- mid
- collapsed
This sort of UI is specially useful when you would like to create a reactive app where changes in a modally presented view are reflected in the presenting view.
Open | Mid | Collapsed |
---|---|---|
Open | Mid | Collapsed |
---|---|---|
Setup
In the initializer of the view controller add the following
init() {
super.init(nibName: .none, bundle: .none)
transitioningDelegate = self
modalPresentationStyle = .custom
}
Make your view controller conform to UIViewControllerTransitioningDelegate
extension SelectCurrencyViewController: UIViewControllerTransitioningDelegate {
func presentationController(
forPresented presented: UIViewController,
presenting: UIViewController?, source: UIViewController
) -> UIPresentationController? {
DraggablePresentationController(
presentedViewController: presented,
presenting: source
)
}
}
Make sure your view controller conforms to KeyboardDismissableDraggableView
extension YourViewController: KeyboardDismissableDraggableView {
var scrollView: UIScrollView {
tableView
}
func handleInteraction(enabled: Bool) {
tableView.isUserInteractionEnabled = enabled
}
func dismissKeyboard() {
// It gives you a opportunity to dismiss the keyboard
// if the keyboard is presented on the screen
// When the view is dragged down from `open` state to `mid`
// state, we would like to dismiss the keyboard
// Eg ⬇️
guard searchBar.isFirstResponder else { return }
searchBar.resignFirstResponder()
}
}
Note: handleInteraction(enabled: Bool)
is called everytime the the drawer changes it state changes from
open
to mid
mid
to open
mid
to collapsed
collapsed
to mid
It's important that you disable your scroll view when enable
has false
value
You can simply acheive this simply doing
yourScrollView.isUserInteractionEnabled
= enabled
Look at the example above or reach out for help 🙂