Overlay a UIV view on UITableView and paste it under the navigation bar on the scroll

advertisements

I am trying to implement something similar as in this mockup: http://share.framerjs.com/16hwz94ezflt/ (scroll down)

If you scroll down the "week" view will stick beneath the navigation bar. I have a similar UITableView with a header (above the "week" view).

It is not clear to me if this "week" view is part of the table view or not. It doesn't really matter but I'm really curious how one can implement something like this.


Here's what I would do using autolayout constraints

  1. Keep everything but the WeekView inside a UIScrollView/UITableView
  2. Set up all of the items inside the scroll view
  3. Create the WeekView as a UIView (Or something of the sort) and give it the following constraints:

    • A: Leading/trailing space set to container margin (could be the master view or the scroll view)
    • B: Specify a static height constraint
    • C: Add a constraint relating the top of the WeekView to the view above it (in this case the total SalesView), with the space set to 0. This constraint should make the week view follow the SaleView's position.
    • D: Add a constraint relating the top of the WeekView to the top of the grandparent view in the View Controller. This constraint will keep the WeekView at the top of the screen

Now obviously, the last 2 constraints conflict each other. What you do now is modify constraint D so that the relation is not = 0, but >= 0. Then, set constraint C's priority to less than 1000 (default), say 900. So constraint C can essentially break if another constraint (constraint D in this case) needs it to break.

What this will do is tell autolayout "okay, as long as WeekView is below the top it's cool. It can't go above the top. I also want it to be right below the position of SalesView, but if constraint D is like "Hey, back off", I'll back off"

Does that make sense?