Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set up my iOS storyboard to bounce like Instagram Stream?

I am building an app with a stream of social content and am trying to get the behavior of how instagram does it's stream in app. So basically a top header that scrolls off the screen but bounces between that and the content. I can make the top header scroll off the screen and I can make the view not bounce but I want to use Pull to refresh and that ends up going above the "faux" nav bar UIView. I know that a normal Navbar will produce this but this one that scrolls off is a different story.

Currently I have a UITableview that has a UIView above the UITableViewCell and everything works great except the bounce happens above the UIView. I figure I need to get the UIView above the UITableView however in the UITableViewController the storyboard won't allow me to place the UIView above the UITableView.

Any ideas???

Thanks

like image 444
Michael Bailey Avatar asked Jul 12 '12 11:07

Michael Bailey


1 Answers

Well I finally got this all to work so I thought I would post the Answer for everyone.

Basically I set a standard Navigation bar and then on scrollViewDidScroll I get the offset of the scrolling and change the frame based on that. This seems to work perfectly, see below for my scrollViewDidScroll method.

- (void)scrollViewDidScroll:(UIScrollView *)sender {

    //Initializing the views and the new frame sizes.
    UINavigationBar *navbar = self.navigationController.navigationBar;
    UIView *tableView = self.view;

    CGRect navBarFrame = self.navigationController.navigationBar.frame;
    CGRect tableFrame = self.view.frame;

    //changing the origin.y based on the current scroll view.
    //Adding +20 for the Status Bar since the offset is tied into that.
    navBarFrame.origin.y = MIN(0, (sender.contentOffset.y * -1)) +20;
    navbar.frame = navBarFrame;

    tableFrame.origin.y = MIN(0,MAX(-44,(sender.contentOffset.y * -1)));
    tableView.frame = tableFrame;

}

Also you will want to make your TableView 44px taller to compensate for the scrolling otherwise your frame will not be big enough. I just did this in viewWillAppear and made the frame bigger.

like image 151
Michael Bailey Avatar answered Nov 06 '22 13:11

Michael Bailey