Developer

Pro tip: Connect scrollview to an image in your iOS app in the blink of an eye

"How do I connect the scrollview to my view?" is one of the most often asked questions by iOS app developers. The good news is you don't have to be a math whiz to employ the simple solution.

apple_cacho_620x465.png

In order to create a scrollview project where you can scroll through an image, iOS app developers usually create a Single View Application project. Next, they throw a UIScrollView object in the scene and then an image (usually a 1024x1024 image) to the scroll view. It seems logical.

uiscrollviewsfiga040714.png

You would think this is basically saying, "Let's make this image scrollable by placing it inside a scroll view," but when you run the project, it doesn't scroll. When you start looking for tutorials, you'll find mathematically dense tutorials that calculate a lot of positioning for you. Most iOS developers end up disillusioned and simply move on to something else — don't! It's just a couple of clicks and a line of code away from working.

It turns out that a scrollview object requires something called a content size that basically tells it exactly how much of that image it's actually going to scroll around. You have to set the scrollview's content size property to some value:

[self.myScroller setContentSize:CGSizeMake(300, 915)];

In order to do this, you need to get a reference to the scrollview, which you do by creating a property for it, like so:

@interface ViewController ()

@property (strong, nonatomic) IBOutlet UIScrollView *myScroller;

@end

After you create the IBOutlet for it and drag the actual scrollview onto the scene, you must connect the outlet in the ViewController's class Connections Inspector (Figure A).

Figure A

uiscrollviewsfigb040714.png

Now you can set the contentSize value in the view controller's viewDidLoad. This line is telling the scrollview that its contentSize (i.e., the size it will display at any given moment) is 300w x 915h in pixels:

[self.myScroller setContentSize:CGSizeMake(300, 915)];

The difference between the size of the image and the contentSize is hidden from view in the invisible space around the actual scrollview and only comes into view when "scrolled." If you run your project now, it should scroll nicely.

That is, until Xcode 5 came in and Auto Layout added one small wrinkle: Auto Layout adds constraints that will fix your imageview inside the scrollview and will prevent it from scrolling. So now you have to also select the view controller in storyboard (make sure to select the entire scene to highlight its border in blue), and then go to the File Inspector and uncheck Use Autolayout (Figure B).

Figure B

uiscrollviewsfigc040714.png

You finally get what you wanted from the start. Happy scrolling!

Also read

About

My name is Marcio Valenzuela and I am from Honduras. I have been coding in iOS for 5 years and I previously worked on web applications in ASP and PHP/mySQL. I have a few apps up in the app store and am currently working on a couple of Cocos2d games...

Editor's Picks