I have implemented a bottom sheet using a tutorial that someone else provided here. Everything is going well, however I want to implement a bottom sheet that goes above that bottom sheet and perhaps multiple other bottom sheets that go above the previous bottom sheet. I would like to implement this similar to how iOS 10 maps has their bottom sheets. i.e. if one bottom sheet goes on top of another you can simply dismiss it with pressing the 'x' at the top left.
Here is my current code:
In my map view controller I've added:
func addBottomSheetView() {
// 1- Init bottomSheetVC
let bottomSheetVC = BottomSheetViewController()
// 2- Add bottomSheetVC as a child view
self.addChildViewController(bottomSheetVC)
self.view.addSubview(bottomSheetVC.view)
bottomSheetVC.didMoveToParentViewController(self)
// 3- Adjust bottomSheet frame and initial position.
let height = view.frame.height
let width = view.frame.width
bottomSheetVC.view.frame = CGRectMake(0, self.view.frame.maxY, width, height)
}
And call it in viewDidAppear method:
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
addBottomSheetView()
}
In my bottom sheet controller I've added:
override func viewDidLoad() {
super.viewDidLoad()
let gesture = UIPanGestureRecognizer.init(target: self, action: #selector(BottomSheetViewController.panGesture))
view.addGestureRecognizer(gesture)
}
func panGesture(recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translationInView(self.view)
let y = self.view.frame.minY
self.view.frame = CGRectMake(0, y + translation.y, view.frame.width, view.frame.height)
recognizer.setTranslation(CGPointZero, inView: self.view)
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
UIView.animateWithDuration(0.3) { [weak self] in
let frame = self?.view.frame
let yComponent = UIScreen.mainScreen().bounds.height - 200
self?.view.frame = CGRectMake(0, yComponent, frame!.width, frame!.height)
}
}
Originally I was thinking of addSubview in the new bottom sheet, however that didn't work. Should I addSubview to the original map view controller? the button that adds the new bottom sheet is in the existing bottom sheet. Would love you advice. Thanks!
Related
Please refer to this Answer.
I am trying to do the same thing, however I want to do this in a Tab Bar App where the Now Playing bar is above the Tab Bar in all the scenes of the app.
Update:
I want to have a view at the bottom of the screen (above the tab bar) and under the content views of the different tabs (not above them). In addition, I want to have the ability to remove this view at a certain point making the main view take the whole screen.
I can do this using the mentioned Answer by changing the constraints of the nowPlaying view programmatically.
Using UITabBarViewController subclass it is possible:
Ex:
class DashBoardViewController: UITabBarController {
let nowPlayingBar:UIView = {
let view = UIView(frame: .zero)
view.backgroundColor = .blue
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
initView()
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
nowPlayingBar.frame = tabBar.frame
}
override func viewDidAppear(_ animated: Bool) {
var newSafeArea = UIEdgeInsets()
// Adjust the safe area to accommodate
// the height of the bottom views.
newSafeArea.bottom += nowPlayingBar.bounds.size.height
// Adjust the safe area insets of the
// embedded child view controller.
self.childViewControllers.forEach({$0.additionalSafeAreaInsets = newSafeArea})
}
private func initView() {
nowPlayingBar.frame = tabBar.frame
view.addSubview(nowPlayingBar)
}
}
You'll add your view/container to your app window, you'd do something like
guard let window = (UIApplication.shared.delegate as? AppDelegate)?.window
else { return } // check if there's a window
let containerHeight: CGFloat = 50 // height for the view where you wish to add the music player
let containerFrame = CGRect(x:0, y: window.frame.maxY - (tabBar.frame.height + containerHeight), width: window.frame.width, height: containerHeight)
// most important part here is the y axis in some sense, you will add the height of the tabBar and the container, then subtract it from window.frame.maxY
let container = UIView(frame: containerFrame)
// now you have the container do whatever you want with it
window.addSubView(container) // finally add the container to window as a subview
How do I get the frame of a navigationItem's titleView in the coordinate system of the viewcontroller's view?
if let navBarHeight = navigationController?.navigationBar.frame.height,
let navBarWidth = navigationController?.navigationBar.frame.width {
myCustomTitleView.frame = CGRect(x: 0, y: 0, width: navBarWidth, height: navBarHeight)
navigationItem.titleView = myCustomTitleView
}
However, when I check myCustomTitleView's frame origin, I get (0, 0).
I then tried to translate this origin to the viewcontroller's view. what I got was (0,-44), which accounts for the navigation bar height but not for the x-offset.
let originInVCView = view.convert(myCustomTitleView.frame.origin, from: myCustomTitleView)
This can't be right as the titleView obviously has an offset (space for the back button).
How do I correctly extract the translated titleView origin?
You want to make sure you have set the navigation item in viewDidLoad() first. Otherwise it will be nil.
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView(image: UIImage(named: "MY_IMAGE"))
navigationItem.titleView = imageView
When done you can get the frame in the VC's viewDidAppear where the view has been laid out:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let nItemFrame = navigationItem.titleView?.frame //<<<---
}
On Facebook Messenger for iOS, it has it so if the keyboard is hidden, if you swipe up, the keyboard will show. It does this exactly in reverse to the interactive keyboard dismissal mode: the keyboard reveals itself as you swipe up at the speed in which you swipe up.
Does anybody have any pointers on how to do this?
Edit: thanks for the answers! I was mostly looking into whether there was a built-in way to do this, since I saw it being done in Facebook Messenger. However, I just read a blog post where they said they had to screenshot the system keyboard to get the effect—so I’ll assume there’s no built-in way to do this! As mentioned in the comments, I’m using a custom keyboard, so this should be a lot easier, since I have control over the frame!
Basically you'll need UIPanGestureRecognizer.
Set UIScreenEdgePanGestureRecognizer for bottom edge, UIPanGestureRecognizer for hiding the keyboard in Storyboard and drag #IBAction outlets to the code.
Set you keyboard view container with your keyboard in the bottom of the controller in Storyboard, so that user doesn't see it. Drag an #IBOutlet to your code so that you'll be able to modify it's frame.
In gesture actions when dragging your animate the view movement.
When stopped dragging you need to check the view's position and animate it to the destination if it's not there yet.
Also you'll need to add a check for the dragging area so that user cannot drag it further.
It's simple, you'll just need to check all cases and test it properly.
This is a basic setup you can build from this:
class ViewController: UIViewController {
#IBOutlet weak var keyboardContainerView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
}
#IBAction func onEdgePanGestureDrag(_ sender: UIScreenEdgePanGestureRecognizer) {
let point = sender.location(in: view)
view.layoutIfNeeded()
UIView.animate(withDuration: 0.33) {
// Animate your custom keyboard view's position
self.keyboardContainerView.frame = CGRect(x: self.keyboardContainerView.bounds.origin.x,
y: point.y,
width: self.keyboardContainerView.bounds.width,
height: self.keyboardContainerView.bounds.height)
}
view.layoutIfNeeded()
}
#IBAction func onPanGestureDrag(_ sender: UIPanGestureRecognizer) {
let point = sender.location(in: view)
view.layoutIfNeeded()
UIView.animate(withDuration: 0.33) {
// Animate your custom keyboard view's position
self.keyboardContainerView.frame = CGRect(x: self.keyboardContainerView.bounds.origin.x,
y: point.y,
width: self.keyboardContainerView.bounds.width,
height: self.keyboardContainerView.bounds.height)
}
view.layoutIfNeeded()
}
}
Here is an implementation that worked for me. It's not perfect but it works fairly well and is simple to implement.You will need a collection view or a table view.
For the sake of simplicity I will only show code that is necessary for this feature. so please handle everything else that is necessary for the views' initialization.
class ViewController: UIViewController {
var collectionView: UICollectionView!
var textView: UITextView!
override func viewDidLoad() {
super.viewDidLoad()
collectionView.panGestureRecognizer.addTarget(self, action: #selector(handlePan(_:)))
collectionView.keyboardDismissMode = .interactive
// Only necessary for empty collectionView
collectionView.alwaysBounceVertical = true
}
func handlePan(_ sender: UIPanGestureRecognizer) {
if sender.state == .changed {
let translation = sender.translation(in: view)
if translation.y < 0 && collectionView.isAtBottom && !self.textView.isFirstResponder() {
self.textView.becomeFirstResponder()
}
}
}
}
extension UIScrollView {
var isAtBottom: Bool {
return contentOffset.y >= verticalOffsetForBottom
}
var verticalOffsetForBottom: CGFloat {
let scrollViewHeight = bounds.height
let scrollContentSizeHeight = contentSize.height
let bottomInset = contentInset.bottom
let scrollViewBottomOffset = scrollContentSizeHeight + bottomInset - scrollViewHeight
return scrollViewBottomOffset
}
}
I have implemented a bottom sheet using a tutorial that someone else provided here. Everything is going well, however I want to implement a bottom sheet that goes above that bottom sheet and perhaps multiple other bottom sheets that go above the previous bottom sheet. I would like to implement this similar to how iOS 10 maps has their bottom sheets. i.e. if one bottom sheet goes on top of another you can simply dismiss it with pressing the 'x' at the top left.
Here is my current code:
In my map view controller I've added:
func addBottomSheetView() {
// 1- Init bottomSheetVC
let bottomSheetVC = BottomSheetViewController()
// 2- Add bottomSheetVC as a child view
self.addChildViewController(bottomSheetVC)
self.view.addSubview(bottomSheetVC.view)
bottomSheetVC.didMoveToParentViewController(self)
// 3- Adjust bottomSheet frame and initial position.
let height = view.frame.height
let width = view.frame.width
bottomSheetVC.view.frame = CGRectMake(0, self.view.frame.maxY, width, height)
}
And call it in viewDidAppear method:
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
addBottomSheetView()
}
In my bottom sheet controller I've added:
override func viewDidLoad() {
super.viewDidLoad()
let gesture = UIPanGestureRecognizer.init(target: self, action: #selector(BottomSheetViewController.panGesture))
view.addGestureRecognizer(gesture)
}
func panGesture(recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translationInView(self.view)
let y = self.view.frame.minY
self.view.frame = CGRectMake(0, y + translation.y, view.frame.width, view.frame.height)
recognizer.setTranslation(CGPointZero, inView: self.view)
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
UIView.animateWithDuration(0.3) { [weak self] in
let frame = self?.view.frame
let yComponent = UIScreen.mainScreen().bounds.height - 200
self?.view.frame = CGRectMake(0, yComponent, frame!.width, frame!.height)
}
}
Originally I was thinking of addSubview in the new bottom sheet, however that didn't work. Should I addSubview to the original map view controller? the button that adds the new bottom sheet is in the existing bottom sheet. Would love you advice. Thanks!
I have a UIView that is will slide down on button tap and then slide back up on another button tap. It slides down perfectly, but when I try to hit the contract button, I can't click it, but it does click a collection view cell that is underneath the view. I can't figure out why it slides down properly but it doesn't function how I expect. Thanks a lot!
#IBAction func onExpandButtonPressed(sender: UIButton) {
let xPosition = expandingView.frame.origin.x
//View will slide to 40 px higher bottom of the screen
let yPosition = expandingView.frame.maxY - 40
let height = expandingView.frame.size.height
let width = expandingView.frame.size.width
UIView.animateWithDuration(0.5, animations: {
self.expandingView.frame = CGRectMake(xPosition, yPosition, height, width)
self.expandButton.hidden = true
self.contractButton.hidden = false
})
}
#IBAction func onContractButtonPressed(sender: UIButton) {
let xPosition = expandingView.frame.origin.x
let yPosition = expandingView.frame.origin.y
let height = expandingView.frame.size.height
let width = expandingView.frame.size.width
UIView.animateWithDuration(1.0, animations: {
self.expandingView.frame = CGRectMake(xPosition, yPosition, height, width)
self.expandButton.hidden = false
self.contractButton.hidden = true
})
}
Perhaps it's because the view has slid over the button. So try to use the following inside the button action that will slide over the non-working button:
self.view.bringSubViewToFront(buttonName)
If you put an NSLog inside your button Action, it can help determine if the function is being called.