UIScrollView doesn't work with Autolayout (iOS 6)

Question

I made a few UIScrollView's in different views, they all worked without Autolayout. I turned Autolayout on, because it was better for my app. But since then, there's a big problem with my UIScrollView's: No one is scrolling, they don't work.

Here's my code for a UIScrollView:

.m:

  -(viewDidLoad) {
        scrollerHome.contentSize = CGSizeMake(320, 1000);
        scrollerHome.scrollEnabled = YES;
        [self.view addSubview:scrollerHome];
        scrollerHome.showsHorizontalScrollIndicator = false;
        scrollerHome.showsVerticalScrollIndicator = false;

        [super viewDidLoad];

}

.h:

@interface ViewController : UIViewController{


    IBOutlet UIScrollView *scrollerHome;
}

Do I have to add some code because I turned on Autolayout?

Answer 1

在执行任何操作之前，您应该调用[super viewDidLoad]！

Answer 2

In autolayout, you do not set the contentSize manually. Autolayout works slightly differently with scrollviews, whereby the contentSize of the scroll view is dictated by the constraints of the scrollview's subviews.

If you're trying to force the contentSize to some large size (for example, you're implementing some infinite scroller), you can just add a subview of the appropriate size, eg:

UIView *containerView = [[UIView alloc] init];
containerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.scrollView addSubview:containerView];
NSDictionary *views = NSDictionaryOfVariableBindings(containerView);
[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[containerView]|"       options:0 metrics:nil views:views]];
[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[containerView(1000)]|" options:0 metrics:nil views:views]];

But if you were trying to set the contentSize in anticipation of adding subviews, you generally don't have to do anything, such as the above snippet. Just add your subviews, provide their constraints, and autolayout will adjust the scroll view's contentSize automatically.

---

As mentioned above, with autolayout, you can just add the subviews to your scrollview (with their constraints), and the contentSize will be calculated automatically for you.

There is a trick here, though. You sometimes you want to size a subview based upon the dimensions of the screen. But the usual technique of using the | symbols won't work. For example, for an imageview1 inside a scrollview, the usual @"H:|[imageview1]|" won't set the imageview1 to be the width of the screen, but rather it will define the scroll view's contentSize to match the width of imageview1 , but it says nothing about what the width of that image view should be!

So, it's useful to capture a reference to the scroll view's superview . That way, you can use something like @"H:|[imageview1(==superview)]|" , which not only says "make the scroll view's contentSize equal to the width of imageview1 ", but also "define the width of imageview1 to be equal to the width of the scroll view's superview ."

Thus, for example, to add three images in a paging scroll view, you might do something like:

UIImageView *imageview1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"_DSC0004.jpg"]];
imageview1.contentMode = UIViewContentModeScaleAspectFit;
imageview1.translatesAutoresizingMaskIntoConstraints = NO;
[self.scrollView addSubview:imageview1];

UIImageView *imageview2 = ... // configured similar to imageview1

UIImageView *imageview3 = ... // configured similar to imageview1

UIView *superview = self.scrollView.superview;

NSDictionary *views = NSDictionaryOfVariableBindings(imageview1, imageview2, imageview3, superview);

// not only define the image view's relation with their immediate scroll view,
// but also explicitly set the size in relation to the superview, too!

[superview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[imageview1(==superview)][imageview2(==superview)][imageview3(==superview)]|" options:0 metrics:nil views:views]];
[superview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageview1(==superview)]|" options:0 metrics:nil views:views]];
[superview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageview2(==superview)]|" options:0 metrics:nil views:views]];
[superview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageview3(==superview)]|" options:0 metrics:nil views:views]];

self.scrollView.pagingEnabled = YES;

Answer 3

From the Apple iOS 6.0 release notes:

"In general, Auto Layout considers the top, left, bottom, and right edges of a view to be the visible edges. That is, if you pin a view to the left edge of its superview, you're really pinning it to the minimum x-value of the superview's bounds. Changing the bounds origin of the superview does not change the position of the view.

The UIScrollView class scrolls its content by changing the origin of its bounds. To make this work with Auto Layout, the top, left, bottom, and right edges within a scroll view now mean the edges of its content view."

You can find the full notes here and find the answer to your question in the section that I quoted from. They give code examples on how to use UIScrollView in a mixed Auto Layout environment.