Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Custom UICollectionViewLayout

erikdude27erikdude27 NorwayPosts: 31New Users @
edited December 2015 in iOS SDK Development
Hi!

I'm changing my app design, and would like to create an animation quite similar to the one seen in the built-in iOS weather app.

What happens is that you have some form of top content, like a plain UIView or a label or similar (like the weather app), and you have what looks like a tableView that you can swipe to pull into view, and have it stop and only scroll after you've reached a certain point.

There's a couple of ways I thought of to make this:

- UIPageViewController
- UIScrollView
- UICollectionView and perhaps a custom layout for it.

I'm thinking the latter would be the best approach, and I've looked into it but I cannot grasp exactly what I need to be looking at and do it code. I'm fairly experienced with UITableViews on the other hand.

Could someone help me with this?

Thanks in advance!

Erik

Replies

  • BrianSlickBrianSlick Treadmill Desk Ninja Posts: 10,676Tutorial Authors, Registered Users @ @ @ @ @ @ @ @
    Just a guess on my part:

    1) The city and current temp is a plain view like you said, and likely not part of the table view.
    2) Below that, everything is probably in a table view.
    3) The hourly forecast could be a section header view.
    4) There might also be a table header view with the day of week, and high/low temps.

    The behavior of the hourly forecast looks exactly like a section header to me. Although, I'm able to see the weather graphics underneath the hourly, but the 10-day forecast does not appear underneath it when it scrolls, so the hourly might be a separate view that sits above the table view.

    Either way, mostly what they are doing is paying attention to the scroll view offset, and then adjusting things accordingly. So they are likely adjusting the height of the top view. They are possibly adjusting the position of the top of the table view. And they might be leaving the hourly forecast out of the table view hierarchy and repositioning it manually. That might explain how the background cloud graphics can be seen underneath it, but not the rest of the table contents.

    So, it looks primarily like a table view to me, possibly with 2 extra views. I'd start there before trying to figure out a custom collection view layout. Check out some of the WWDC videos over the last few years for scroll views, I think you'll find most of what you need.
    Professional iOS App Development. Available for hire.
    BriTer Ideas LLC - WWW | Facebook | Twitter | LinkedIn

    BTIKit | BTICoreDataKit | SlickShopper 2 | Leave a PayPal donation
  • erikdude27erikdude27 NorwayPosts: 31New Users @
    edited December 2015
    BrianSlick wrote: »
    Just a guess on my part:

    1) The city and current temp is a plain view like you said, and likely not part of the table view.
    2) Below that, everything is probably in a table view.
    3) The hourly forecast could be a section header view.
    4) There might also be a table header view with the day of week, and high/low temps.

    The behavior of the hourly forecast looks exactly like a section header to me. Although, I'm able to see the weather graphics underneath the hourly, but the 10-day forecast does not appear underneath it when it scrolls, so the hourly might be a separate view that sits above the table view.

    Either way, mostly what they are doing is paying attention to the scroll view offset, and then adjusting things accordingly. So they are likely adjusting the height of the top view. They are possibly adjusting the position of the top of the table view. And they might be leaving the hourly forecast out of the table view hierarchy and repositioning it manually. That might explain how the background cloud graphics can be seen underneath it, but not the rest of the table contents.

    So, it looks primarily like a table view to me, possibly with 2 extra views. I'd start there before trying to figure out a custom collection view layout. Check out some of the WWDC videos over the last few years for scroll views, I think you'll find most of what you need.

    Yeah, that's what I thought at first. Have a scrollView and manually set positions. Take a look at my sketch here: http://imgur.com/T2arysi

    Agree with that sketch? Then you could place any other view inside the top UIView with constraints and such, and just alter the alpha, etc of the top UIView to fade out everything inside - like a group. Do you think there's an additional UIScrollView hosting both of these views? - or should I rely on the UITableView's UIScrollView entirely?
  • BrianSlickBrianSlick Treadmill Desk Ninja Posts: 10,676Tutorial Authors, Registered Users @ @ @ @ @ @ @ @
    That sketch is a reasonable starting point. I still can't decide if the hourly forecast is more likely to be a section header or an independent floating view. For expediency, I'd suggest starting with a section header and see how far you can get with that.

    A UITableView doesn't HAVE a scroll view, it IS a scroll view. And no, at this point, I don't think you'll need anything more than the table view. I don't see any indication that the top view moves at all.
    Professional iOS App Development. Available for hire.
    BriTer Ideas LLC - WWW | Facebook | Twitter | LinkedIn

    BTIKit | BTICoreDataKit | SlickShopper 2 | Leave a PayPal donation
  • erikdude27erikdude27 NorwayPosts: 31New Users @
    BrianSlick wrote: »
    That sketch is a reasonable starting point. I still can't decide if the hourly forecast is more likely to be a section header or an independent floating view. For expediency, I'd suggest starting with a section header and see how far you can get with that.

    A UITableView doesn't HAVE a scroll view, it IS a scroll view. And no, at this point, I don't think you'll need anything more than the table view. I don't see any indication that the top view moves at all.

    Hmm, not quite sure what you mean. So what you're saying is that I won't need anything else than a UITableViewController? - How exactly would the top UIView and the other cells be placed? Keep in mind that my tableView will show normal cells with 44 as height.

    As I'm pulling the real cells into the view from the bottom, wouldn't that make me place them outside the screen in IB? I'd also like to have like a fast, slide animation if the view made it past 50% of it's "journey" or with a great enough velocity.
  • BrianSlickBrianSlick Treadmill Desk Ninja Posts: 10,676Tutorial Authors, Registered Users @ @ @ @ @ @ @ @
    Meh, anytime that you need anything more than a table view alone, then it's most likely time to stop using UITableViewController, which should probably be only used rarely to begin with.

    So, plain view controller, drop your appropriate views in. Cells can be defined in other classes/xibs.
    Professional iOS App Development. Available for hire.
    BriTer Ideas LLC - WWW | Facebook | Twitter | LinkedIn

    BTIKit | BTICoreDataKit | SlickShopper 2 | Leave a PayPal donation
  • erikdude27erikdude27 NorwayPosts: 31New Users @
    edited December 2015
    BrianSlick wrote: »
    Meh, anytime that you need anything more than a table view alone, then it's most likely time to stop using UITableViewController, which should probably be only used rarely to begin with.

    So, plain view controller, drop your appropriate views in. Cells can be defined in other classes/xibs.

    Yeah, I see. Here's a quick sketch of how the animation will work very basic: http://imgur.com/a/GvTwQ

    What I'm a little un-sure of is the hierarchy of the views, where the possible tableView should be placed etc. Could you please lay out a quick hierarchy something like this:

    - ViewController
    - TableView
    - Cells
  • BrianSlickBrianSlick Treadmill Desk Ninja Posts: 10,676Tutorial Authors, Registered Users @ @ @ @ @ @ @ @
    Oh, so you want to pull the entire table view up? Yeah, you're definitely out of UITableViewController territory. Probably just need a vertical constraint to the top of the table view. Set a big constant so that it is offscreen to start, then mess with the constant in response to the gesture to pull it up.
    Professional iOS App Development. Available for hire.
    BriTer Ideas LLC - WWW | Facebook | Twitter | LinkedIn

    BTIKit | BTICoreDataKit | SlickShopper 2 | Leave a PayPal donation
  • erikdude27erikdude27 NorwayPosts: 31New Users @
    BrianSlick wrote: »
    Oh, so you want to pull the entire table view up? Yeah, you're definitely out of UITableViewController territory. Probably just need a vertical constraint to the top of the table view. Set a big constant so that it is offscreen to start, then mess with the constant in response to the gesture to pull it up.

    Yeah, so I'd have a UIView with height constraints, etc connected with an IBOutlet. Then I'd have a tableView with a vertical constraint from the top of the table and to the top of the ViewController, have the UserInteractionEnabled set to NO and once it reaches a certain point, the touchesMoved method (for instance) will stop and the tableView scroll will take over?
  • BrianSlickBrianSlick Treadmill Desk Ninja Posts: 10,676Tutorial Authors, Registered Users @ @ @ @ @ @ @ @
    Well, what you specifically want will determine how hard this is going to be.

    If you want:
    User swipes up, the table view animates into position, user then does whatever

    Use:
    Swipe gesture recognizer. Change the constraint constant to bring the table up. Done. Then kill the gesture recognizer.

    If you want:
    User drags up, table exactly follows finger, upon reaching max height the table view "locks" in place, and then the user can immediately drag down to bounce the table

    Use:
    Mostly the same approach, except probably a pan gesture recognizer instead. I do think you're going to have a problem if you want the user to be able to start interacting with the table without letting go of their drag. I'm pretty sure that in order to scroll the table, you're going to have to wait until they let go after pulling up, kill the gesture recognizer, then the table view can take care of itself. I'm not sure that it will be necessary to mess with userInteractionEnabled.
    Professional iOS App Development. Available for hire.
    BriTer Ideas LLC - WWW | Facebook | Twitter | LinkedIn

    BTIKit | BTICoreDataKit | SlickShopper 2 | Leave a PayPal donation
  • erikdude27erikdude27 NorwayPosts: 31New Users @
    edited December 2015
    BrianSlick wrote: »
    Well, what you specifically want will determine how hard this is going to be.

    If you want:
    User swipes up, the table view animates into position, user then does whatever

    Use:
    Swipe gesture recognizer. Change the constraint constant to bring the table up. Done. Then kill the gesture recognizer.

    If you want:
    User drags up, table exactly follows finger, upon reaching max height the table view "locks" in place, and then the user can immediately drag down to bounce the table

    Use:
    Mostly the same approach, except probably a pan gesture recognizer instead. I do think you're going to have a problem if you want the user to be able to start interacting with the table without letting go of their drag. I'm pretty sure that in order to scroll the table, you're going to have to wait until they let go after pulling up, kill the gesture recognizer, then the table view can take care of itself. I'm not sure that it will be necessary to mess with userInteractionEnabled.

    The best would be kind of somewhere in the middle between the two you mentioned. I don't want it to snap into place right away, I want it to follow the finger's movement, though not update the y-coordinate exactly as the finger moves because I want it to move slightly faster. So you won't have to move your finger from bottom to top, but just a smooth flick.

    Stumbled upon this: https://facebook.github.io/origami/

    Ever seen it before or used it?
  • BrianSlickBrianSlick Treadmill Desk Ninja Posts: 10,676Tutorial Authors, Registered Users @ @ @ @ @ @ @ @
    Not familiar with it.
    Professional iOS App Development. Available for hire.
    BriTer Ideas LLC - WWW | Facebook | Twitter | LinkedIn

    BTIKit | BTICoreDataKit | SlickShopper 2 | Leave a PayPal donation
Sign In or Register to comment.