How do I create a custom UIView that slides down or up from behind a UINavBar depending on scroll direction in objective-c?

Question

Currently building a store app. I have a collection view that displays clothing images with their prices and title. I'd like users to be able to filter and refine results and change the layout of the page using a special bar that will slide down and plot itself just underneath the UINavBar.

This is what I want to do:

• User starts to scroll down.
• Slide down nav bar sized custom view at desired speed from behind UINavBar.
• User starts to scroll back up
• Slide up nav bar sized custom view at desired speed from behind UINavBar.
• Custom view should be opaque
• Custom view shouldn't effect the controller view and sit on top of it when visible.

Part of my hierarchy:

UINavigationController -> UIViewController -> UICollectionViewController

All above will be taking place in my UICollectionViewController.

Futher info:

Since this is something I'd be doing often I'd like to learn and understand how to do this properly, however I don't mind using ready made solutions.

Image below may help..

I look forward to you responses.

Kind regards

Answer 1

Adding a basic pull down here is very easy steps. I have used here in this example a UIToolbar to slide in & out

UPDATED

The video mentioned here is updated today with added colours to the slideIn toolbar.

UPDATED : 1

kindly try the GTScrollNavigationBar as described here in this post of stackOverflow.

Answer 2

Another option could be to add a UIPanGestureRecognizer on the scroll view. You could use the translationInView method to know how much distance to move your view.

Answer 3

First, it would be better that you change your view hierarchy to

UINavigationController -> UIViewController-> UICollectionView & custom view 

In your current code, have you added the collection view as a cell in the tableview? Well, since the collection view is inherently scrollable, this is not necessary.

besides, if you add your custom view to the tableview or the collection view, the custom view will scroll alongside with the scrollable view, which, i bet, is not what you want.

so what you may do is to:

1. add the `custom view` to the view of the `UIViewController`
2. add also the `collection view` to the `UIViewController`
3. implement `UICollectionViewDelegate`, `UICollectionViewDataSource` for the `UIViewController`
4. implement 'scrollViewDidScroll' in 'UIScrollViewDelegate' for the `UIViewController` to detect scroll action
5. get scroll direction as indicated here:

Finding the direction of scrolling in a UIScrollView?

6. when a scroll is detected, set the desired frame of your custom view in [UIView animateWithDuration:animations:], and adjust speed by adjusting the duration of the animation.
7. Done!

well, just in case.... you can set the origin of the frame as negative to move the custom view outside the view of the UIViewController