2

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..

enter image description here

I look forward to you responses.

Kind regards

LondonGuy
  • 9,643
  • 9
  • 68
  • 143
  • It's not clear what are you asking exactly? Did you try something and got stuck with specific issue? – sha Apr 10 '14 at 00:37
  • I'm asking how it's done. I'm hoping I can see some brief examples, gather some resources such as links to blogs, videos and go off and try and do this then post updates if I become stuck. – LondonGuy Apr 10 '14 at 01:20
  • @LondonGuy : Hey, I have updated the right Video. Kindly check updates to my answer. – Balram Tiwari Apr 10 '14 at 08:43

3 Answers3

1

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.

rounak
  • 8,669
  • 3
  • 38
  • 58
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.

Community
  • 1
  • 1
Balram Tiwari
  • 5,537
  • 2
  • 21
  • 40
  • This is working for me but seems to scroll with the collection view. Is there a way to make it float? Then all I would need to do is have it detect when I scroll up and down and the distance scrolled and use that as to trigger the toggleMenu method. I could probably combine with with the gesture recognizer mentioned above. – LondonGuy Apr 10 '14 at 14:03
  • @LondonGuy What if, if you show/hide the UINagivation bar same as the Facebook iOS App..? Think on it. If that solves your purpose, you already got a ready-made solution (which I will tell) where you can club the logic of my answer for drop-down.? – Balram Tiwari Apr 10 '14 at 14:28
  • I added it as a subview to the collectionView and that's why it was scrolling with the view. Facebooks solution would work for me too. Initially I could have the toolbar permanently show but the whole navigation bar and toolbar being hidden would make up for that. – LondonGuy Apr 10 '14 at 14:40
  • @LondonGuy Please look at the section `UPDATED : 1` in my answer. – Balram Tiwari Apr 10 '14 at 15:01
  • All working, now I just need to add tool bar or some kind of custom view to the navigation bar and hope that slides up with the navbar. Obviously it won't slide the way up but I'm sure achieving this won't be difficult. It's just a matter of changing the offsets? – LondonGuy Apr 10 '14 at 19:15
  • All sorted. I have a view that sits underneath the nav bar and slides up with the navbar but stays in view. Now it's just a matter of adding subviews to the new filterbar view I've created. Really wish I could link this up in IB and do it there as it's much easier than doing it in code. – LondonGuy Apr 10 '14 at 21:57
0

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

Community
  • 1
  • 1
Lewen
  • 1,693
  • 2
  • 14
  • 16
  • Sorry current code was viewcontroller and not a tableviewcontroller. I've edited my description to reflect that. I'll try this out and report back. – LondonGuy Apr 10 '14 at 02:53