22

So I'm trying to create a UIScrollView only in storyboard that allows me to add scrolling labels for more than the height of the VC. Here's what I did:

  1. Created UIScrollView that took up the size of the any width any height VC

  2. Made constraints 0 for spacing to nearest neighbor on top, bottom, left, and right

  3. Created a view that is a subView of the UIScrollView with the same width as the any width any height VC but height of 1500 (because I only want it to scroll vertically).

  4. Set constraints to nearest neighbor as 0 for ONLY left, top, and right and set the height constraint as 1500.

  5. I put a label at the top of the subView and at the bottom

When I run the app on an iPhone 6, does not scroll vertically as I want it to. Any ideas why this is not working? Thanks in advance.

Ashish Kakkad
  • 22,149
  • 11
  • 88
  • 130
Lucas
  • 703
  • 2
  • 8
  • 17

4 Answers4

45

To obtain the scroll you have to pin the sub view (the "content view") to the top, left, bottom and right of the scrollview. In addition you have to give it (to the "content view") an explicit (=not related to the scroll view) height and width because these are used by the scrollview to calculate its content size. In your case set the width equal to the VC main view width and the height to 1500. When width or height are bigger than the scrollview size, it will scroll.

Scroll view constraints (pinned to main view)

scroll view constraints

Content view (pinned to scrollview + height 1500, width=mainview width) + label constraints (as an example: 20 20 from content view top left)

content view + label constraints

valfer
  • 3,385
  • 2
  • 16
  • 22
  • Perfect! It now works as expected, thanks for the help; the images were great. – Lucas Nov 06 '14 at 22:40
  • This is a fantastic explanation! Thanks very much. I was also able to add a [contentView.width == scrollView.width] constraint within Interface builder instead of a explicit contentView width to easily get a vertically scrollable scrollview. – Des Dec 19 '14 at 12:04
  • 1
    This no longer works as of Xcode Version 6.1.1 (6A2008a). Has anyone else encountered this issue? Pinning the content view to the scrollview will result in nothing showing in my tests of a simple new project with just this in it. – kakubei Jan 30 '15 at 11:46
  • the suggested solution works for me in Xcode v 6.1.1 too – Janani M Feb 16 '15 at 10:16
  • 1
    As of Version 6.1.1 (6A2008a) it works cool, but I am ambiguous about how we choose 1500. It causes my view to over-scroll now :) – guness Mar 03 '15 at 21:40
  • The value (i.e. 1500) depends from the size of the content inside the scroll view. For example, if the scroll view contains an image of 600pt in height, that value is 600. In general it is a fixed value representing the size of the entire content to show in the scroll view. – valfer Mar 05 '15 at 18:29
  • Hi all, I am running into a similar situation, I am pretty sure I have set up the constraints correctly but for some reason my scrollview is too wide for an iPhone 5s screen so it scrolls horizontally, is there anyway to have it be the same for all 3 phone screens with no horizontal scrolling? Here is a link to my SO question: http://stackoverflow.com/questions/29928691/ios-uiscrollview-with-autolayout-not-centering-correctly/29929937#29929937 – Brandon Shega Apr 29 '15 at 13:11
  • 1
    @valfer: Here you have take height 1500 fixed but How can I achieve scrolling according to contensize of UIScrollview. – iPhone Jul 23 '15 at 10:01
  • 1
    Connect an outlet of that constraint to code and set its value (property constant of layout constraint) dynamically – valfer Jul 23 '15 at 10:17
  • @valfer:Thanks for your reply. I have set it as self.contentView.frame = CGRectMake(self.view.frame.origin.x, self.view.frame.origin.y + 20, self.view.frame.size.width, self.view.frame.size.height + 200); but I get scrolling as per height 1500 – iPhone Jul 23 '15 at 10:21
  • Thanks alot.. @valfer – Abha Mar 02 '16 at 09:24
8

For an easier visualisation, I created a video on how to do that.

Video on how to create a vertical-only scrollview in iOS

Marco Almeida
  • 1,149
  • 2
  • 14
  • 35
1

Have you set the contentsize bigger than the screen itself? In your case, just bigger in height.

As Apple Documentation says: "You must set the contentSize property to the size of the scrollable content. This specifies the size of the scrollable area."

pablogthuillier
  • 29
  • 2
0

The only solution is add constraints to the right and bottom of the bottom subview of scroll view's child view. Also check if all the views from top to bottom have got proper constraints along with height. For the scroll view ' s wrapper view add equal width and equal height constraint to its superview.

komall
  • 1
  • 1