CODEWITHSUNDEEP
iosobjective-cxcodeuiscrollviewautolayout
bpiec
bpiec

Reputation: 1631

Scrollview with navigation bar + auto layout

I have a ViewController embedded in NavigationController. I placed ScrollView inside it, then content view covering the full area (to set ScrollView's content size) and some labels. I tried to set constraints for all of the controls but I failed.

This is how it looks in Xcode:

Xcode view

And this is in Simulator:

Simulator view

Red color is scroll view, green – content view. Of course I can scroll the view to get the bottom label on screen.

What I did wrong? What are the proper constraints? I want of course the ScrollView to cover the entire usable area of window (from bottom of navigation bar to bottom of screen).

For full reference you can download the project.

Upvotes: 8

Views: 12905

Answers (4)

Jules
Jules

Reputation: 1

The swift 3 code works but the interface builder is trying to compensate for the navigation bar so when adding view ignore the bar and place the view over it. The IB will compensate.

Upvotes: 0

Roshan lamichhane
Roshan lamichhane

Reputation: 91

Swift 3:

self.automaticallyAdjustsScrollViewInsets = false

Upvotes: 6

Nike Kov
Nike Kov

Reputation: 13698

Here's nice tutorial about scrollView and Auto Layout. I spend a lot of time with same kind of problem until found this tutorial. http://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/ .

The way is to drag scrollview and content view to all of the area like if there wouldn't present a navigation bar. Also make right constraints.

Upvotes: 3

Teja Nandamuri
Teja Nandamuri

Reputation: 11201

I think the gap you see is caused by the navigation bar. The gap is off size 64 which is the size of the navigation bar + status bar (44+20). You need to constraint the scroll bar to the top layout guide.By pushing this 64 negatively. So your scrollview top constriant will be -64.

This can also be done in one click, by clicking on the position view button in size inspector in xcode.

Click on the position view and select fill container vertically.This will constraint the scrollview to top layout guide. Now select the scrollview and click on the update constraints in the storyboard.

enter image description here

As you can see, the contentView is not constrianed to cover the view just like scrollview , there is space at the button of the content view, when the view loads, the navigation bar will occupy the additional space, and the contentview will be exactly at where you need.

Upvotes: 3

Related Questions