iphone - Autolayout confusion: Constraints for ScrollView with WebView and Header/Footer Views -

to illustrate problem, created following graphic:

the black border around red square supposed iphone screen. inside, have in red uiscrollview, taller screen. is, in fact, tall uiwebview, displayed above in yellow. uiwebview subview of uiscrollview, scrolling disabled. further more, have 2 blue views, call header , footer views. subviews of uiscrollview, outside of scrollable bounds.

my problem is: how configure auto layout constraints this?

i have managed retrieved uiwebview height using code answer , update uiscrollview's contentsize accordingly. however, not solution, because uiwebview's width not react width changes of uiscrollview.

i managed setup header view's layout constraints (using masonary):

[headerview makeconstraints:^(masconstraintmaker *make) {     make.top.equalto(@-100);     make.left.equalto(@0);     make.width.equalto(scrollview.width);     make.height.equalto(@100); }]; 

however, setting footer view's layout didn't work:

[changeview makeconstraints:^(masconstraintmaker *make) {     make.top.equalto(scrollview.bottom)     make.left.equalto(@0);     make.width.equalto(scrollview.width);     make.height.equalto(@100); }]; 

i feel can't difficult , appreciate bit more familiar auto layout. thanks!

in visual format language (vfl), constraints be:

[scrollview addconstraints:[nslayoutconstraint constraintswithvisualformat:@"v:|-(-100)-[headerview(100)]" options:0 metrics:nil views:views]]; [scrollview addconstraints:[nslayoutconstraint constraintswithvisualformat:@"v:[footerview(100)]-(-100)-|" options:0 metrics:nil views:views]]; [scrollview addconstraints:[nslayoutconstraint constraintswithvisualformat:@"h:|[headerview]|" options:0 metrics:nil views:views]]; [scrollview addconstraints:[nslayoutconstraint constraintswithvisualformat:@"h:|[footerview]|" options:0 metrics:nil views:views]]; 

or if going replace @"v:[footerview(100)]-(-100)-|" vfl constraintwithitem calls, be:

[footerview addconstraint:[nslayoutconstraint constraintwithitem:footerview                                                        attribute:nslayoutattributeheight                                                        relatedby:nslayoutrelationequal                                                           toitem:nil                                                        attribute:nslayoutattributenotanattribute                                                       multiplier:1.0                                                         constant:100.0]];  [scrollview addconstraint:[nslayoutconstraint constraintwithitem:footerview                                                        attribute:nslayoutattributebottom                                                        relatedby:nslayoutrelationequal                                                           toitem:scrollview                                                        attribute:nslayoutattributebottom                                                       multiplier:1.0                                                         constant:100.0]]; 

i can't why masonary implementation not working, i'm not familiar it. i'd try 1 of above , make sure.

frankly, describe setting height of web view, , wonder if set height constraint of web view (good) or whether adjusted frame.size.height value (bad). haven't shared details of how set web view's height, cannot comment further.

regardless, if have constraint-based problems, there 2 useful diagnostic techniques. if it's still not working, i'd run app on simulator, pause it, , @ (lldb) prompt enter:

po [[uiwindow keywindow] _autolayouttrace] 

you should see like:

(lldb) po [[uiwindow keywindow] _autolayouttrace] $0 = 0x0715d6e0  *<uiwindow:0x758aae0> |   *<uiview:0x71630f0> |   |   *<uiscrollview:0x716a370> |   |   |   *<headerview:0x716b860> |   |   |   *<footerview:0x716bbb0> |   |   |   *<uiwebview:0x716c2b0> |   |   |   |   <_uiwebviewscrollview:0x7176a30> |   |   |   |   |   ... |   |   |   |   |   <uiwebbrowserview:0x797fe00> |   |   |   <uiimageview:0x75e1360> |   |   |   <uiimageview:0x75e2a60> 

make sure don't have warnings there. if looks ok there, i'd use following command @ (lldb) prompt:

po [[uiwindow keywindow] recursivedescription] 

you should see like:

(lldb) po [[uiwindow keywindow] recursivedescription] $1 = 0x071c0ea0 <uiwindow: 0x758aae0; frame = (0 0; 320 568); autoresize = w+h; layer = <uiwindowlayer: 0x758b770>>    | <uiview: 0x71630f0; frame = (0 20; 320 548); autoresize = rm+bm; layer = <calayer: 0x7163180>>    |    | <uiscrollview: 0x716a370; frame = (0 0; 320 548); clipstobounds = yes; gesturerecognizers = <nsarray: 0x716b1d0>; layer = <calayer: 0x716ad20>; contentoffset: {0, 16}>    |    |    | <headerview: 0x716b860; frame = (0 -100; 320 100); layer = <calayer: 0x716b910>>    |    |    | <footerview: 0x716bbb0; frame = (0 564; 320 100); layer = <calayer: 0x716bee0>>    |    |    | <uiwebview: 0x716c2b0; frame = (0 8; 320 548); layer = <calayer: 0x716c360>>    |    |    |    | <_uiwebviewscrollview: 0x7176a30; frame = (0 0; 320 548); clipstobounds = yes; autoresize = h; gesturerecognizers = <nsarray: 0x7177000>; layer = <calayer: 0x7176c80>; contentoffset: {0, 0}>    |    |    |    |    | ...    |    |    |    |    | <uiwebbrowserview: 0x797fe00; frame = (0 0; 1024 1754); gesturerecognizers = <nsarray: 0x7173260>; layer = <uiweblayer: 0x716d7f0>>    |    |    |    |    |    | ...    |    |    | <uiimageview: 0x75e1360; frame = (1 540; 318 7); alpha = 0; opaque = no; autoresize = tm; userinteractionenabled = no; layer = <calayer: 0x75e2980>>    |    |    | <uiimageview: 0x75e2a60; frame = (312 32.5; 7 530.5); alpha = 0; opaque = no; autoresize = lm; userinteractionenabled = no; layer = <calayer: 0x75e2b00>> 

take @ various resulting frame values , see what's going on. can diagnose solution. don't provide enough information diagnose problem (you tell footer didn't work, don't tell constraints ended placing it). if above commands, can determine precisely constraint ended placing footer, , figure out how remedy problem there.

note, you'll see headerview , footerview showing in these 2 listings headerview , footerview classes instead of uiview. when diagnosing constraint problems, it's useful if key views have own class, defined uiview subclasses no implementation, if use unique subclasses header , footer view, makes easier interpret results of above (lldb) commands.

@interface headerview : uiview @end @implementation headerview @end  @interface footerview : uiview @end @implementation footerview @end