4

I have a UIScrollView that I place inside of a view (interface builder document .xib/.m/.h), however the lower portion of the UIScrollView is getting clipped and not showing the lower half of itself because of a UITabBarController I have.

I implemented the UITabBarController in the appdelegate file, so there is no UITabBarController that is seen in the XIB, however if I place another UITabBarController in the XIB to simulate the one i've already created, I will get two when I test the application.

Here is a snapshot of the UIScrollView outside of the view. This shows you the lower half of the UIScrollView...


(source: img-up.net)

Here is a snapshot of the application running. Notice how the bottom half of the picture and notes are being cut off (Just barely though!)


(source: img-up.net)

Basically--> How am I able to display the rest of the bottom of the scroll view? (picture/notes section) without it being cut off by the UITabBarController?

Community
  • 1
  • 1
Eric Forbes
  • 511
  • 4
  • 8

3 Answers3

2

Keep in mind that the view from the nib is being automatically resized as it is placed inside the tab bar interface, so you want the scroll view to go along for the ride, and not stick out off the bottom of the resized view as it is doing now. Thus, you should either place the scroll view higher up in the view, or else use autolayout constraints (iOS 6) or autoresizing springs and struts (iOS 5) so that the bottom of the scroll view sticks to the bottom of the view, so that as the bottom moves up (the view gets shorter), the scroll view moves up with it.

(In the nib editor, you can ask the editor to simulate the presence of a tab bar [Simulated Metrics > Bottom Bar > Tab Bar], just to give yourself an idea of what the final size will be; but the right approach is to use appropriate constraints/autoresizing so that the view can be resized and its contents will still be visible. For one thing, that allows you adapt to both the iPhone 4 screen and the iPhone 5 screen.)

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • I am not too familiar with auto layout, however I do have it checked along with resizing all my subviews. When I uncheck auto layout, my scrollview is frozen. I don't want to place it higher up and risk the top getting cut off -- but I do wish to use auto layout to help with iPhone 4/5. Any more help? I will reference the auto layout section in some of my books.. – Eric Forbes Apr 28 '13 at 18:46
  • If auto layout is checked, it is still up to you to edit the constraints (pin the height and width, pin the bottom, center horizontally, and remove all other constraints). If auto layout is *not* checked, then you must use the springs and struts to do the same thing: pin the bottom, give a fixed width and height, and do NOT pin the top, so the scroll view can slide up as the view shrinks. – matt Apr 28 '13 at 18:50
  • Any other resources? I am still very confused on auto layout. I pinned the bottom to it's superview but am still unable to see results? I want the bottom of the scroll view to be hidden, then when I scroll I need the bottom to be all seen. This is over my head – Eric Forbes Apr 28 '13 at 19:50
  • Well, I can give you more specific help, but I'd need to be clearer on what you are trying to accomplish. Scroll views are a lot easier to manage if you turn Autolayout *off*. If Autolayout is on, getting the scroll view to work as a scroll view becomes rather tricky, as I explain here: http://stackoverflow.com/questions/13499467/uiscrollview-doesnt-use-autolayout-constraints/13548039#13548039 – matt Apr 28 '13 at 21:41
  • When I scroll all the way to the bottom this is what I get --> [http://c57.img-up.net/stuf6b36.png](http://c57.img-up.net/stuf6b36.png) This is what I want to achieve when I scroll to the bottom --> [http://b81.img-up.net/stuff73dc.png](http://b81.img-up.net/stuff73dc.png) Notice how in the first image the UITabBarController cuts the UIScrollView off. I will read the Q/A link you sent.. – Eric Forbes Apr 28 '13 at 22:45
  • Thanks for the pictures. We are definitely on the same wavelength; what I'm trying to get you do is what should get you the second picture. – matt Apr 28 '13 at 22:56
  • Are you setting the contentSize of your UIScrollView correctly???? That is what it allows it to scroll. It would help if you showed the code you are using to manage the UIScrollView. – matt Apr 28 '13 at 23:01
  • There is no code for the UIScrollView, I am implementing it with interface building. However, I did try to pro grammatically alter the content size but I did not see any changes. – Eric Forbes May 01 '13 at 00:31
  • If you don't do something about a UIScrollView's `contentSize` it will not be scrollable. What makes it scrollable is that its `contentSize` is bigger than the scroll view itself. – matt May 01 '13 at 00:37
  • Regardless the scroll is fine -- I'm assuming the contentSize is set when I choose the height of the UIScrollView. I still feel the answer lies with the constraints and setting the bottom of the scrollView to the tabbar.. but am still unable to get it working properly – Eric Forbes May 01 '13 at 03:06
  • I don't know why you assume anything about how the `contentSize` is set. And, as I've already said, working with a UIScrollView under autolayout is very complex, because not only its size and position but also its `contentSize` are determined through constraints. – matt May 01 '13 at 03:09
  • At the moment I'm not even clear on whether the problem is that the scroll view's bottom is hidden under the tab bar or that the scroll view can't scroll enough to show the bottom of its content. Are you? – matt May 01 '13 at 03:09
  • You are right, I was not setting the content size correctly. I set the height to 1000 and I am now able to see the bottom. Now by setting the contentSize height, how do I make the end of the my scroll content not scroll above the tabbar? – Eric Forbes May 01 '13 at 03:25
  • You set the height of the scroll view or the height of the contentSize? – matt May 01 '13 at 03:30
  • scrollView.contentSize.height was 794, I then set it to 1000 and was able to scroll down to see the rest of the content however the end of the scroll is not really at the top of the tab bar – Eric Forbes May 01 '13 at 03:39
2

Look at the ScrollView Docs. If you look at the section about configuring size it explains that you should set up conent insets so that controller's don't cut off the content.

Seems like you would need to set the bottom contentInset with something like:

scrollView.contentSize=CGSizeMake(320,758); // Or whatever your content size is
scrollView.contentInset=UIEdgeInsetsMake(64.0,0.0,44.0,0.0);
// 64.0 being the top inset, and 44.0 being the bottom inset
// Set the bottom inset to the height of your tab bar or more

This will make sure your tab bar doesn't get obscured from your view.

cherbear
  • 253
  • 2
  • 3
  • 11
1

the quickest way is re-sizing your view in your xib to the content size of the UITabBarController, although the more efficient way is already answered. In the properties on the right you can set your main view to be "free form" and make it 320 by 392 or how ever big your section is.

If you want to view the app in both 4 inch and 3.5 inch, the littlest work is doing the answer above with the autoresizing mask

A'sa Dickens
  • 2,045
  • 1
  • 16
  • 21