Search code examples
iosuitableviewautolayoutparallax

iOS 7 Storyboard Autolayout uitableviewcontroller tableviewheader parallax

I've got trapped in some weird problem.

I want to use Autolayout with UITableViewController along with tableHeaderView to stick to TOP and stretch it (the table header ) just like parallax effect found in other apps.

I know there are other solutions on the github but i am not able to find anything to this specific issue.

What I have done is :

  1. Create Single View App new project (Used Version 5.1.1 (5B1008))

  2. replaced default view controller scene with uitableviewcontroller

  3. Made the table view to have 2 or 3 static cells

  4. Added a UIView (with UIImage view in left align vertical center constrains) as a table header view

  5. added the following code to viewcontroller.m (inherited from UITableviewController)

Code:

- (void)viewDidLoad
{
    [super viewDidLoad];
    headerOriginalFrame = self.myHeaderView.frame;
}


-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat offsetY = -(scrollView.contentOffset.y + scrollView.contentInset.top);
    offsetY = MAX( 0.0, offsetY );
    CGRect rect = headerOriginalFrame;
    rect.origin.y = -offsetY;
    rect.size.height = headerOriginalFrame.size.height + offsetY;
    self.myHeaderView.frame = rect;
}

This does creates a parallax effect along with header view constraints.

But the problem is that the origin point of the header view doesn't stick to tableview origin.

It does come down as we pull the downward side.

Also not able to see any way to add constraints to the UITableViewController.

I want to do it all in the UITableViewController without adding other library.

I hope there is some way to stick header to the top and get this job done.

Solution

  • change your frame of content view (I guess imageView ) not header view itself.

    1. create IBOutlet* myHeaderContentView and connect your content what you wanna effect in headerView.

    2. replace all myHeaderView with myHeaderContentView in above code.

    3. don't forget this. self.myHeaderView.clipsToBounds = NO;

    done. I tested it.