UIScrollView using pure auto layout not expanding right - ios

Question

I've read the official documentation from Apple on auto layout and UIScrollView:
RN-iOSSDK-6_0
I'm trying the "Pure Auto Layout approach".
I'm adding a UILabel and a UITextField. I want both to expand to the width of the interface:
RootViewController.h
#interface rootViewController : UIViewController
#property (nonatomic, strong) UIScrollView *scrollView;
#property (nonatomic, strong) UIView *contentView;
#property (nonatomic, strong) UILabel *bigLetters;
#property (nonatomic, strong) UITextField *aTextField;
#end
viewDidLoad
- (void)viewDidLoad {
[super viewDidLoad];
[self.view setTranslatesAutoresizingMaskIntoConstraints:NO];
self.view.backgroundColor = [UIColor lightGrayColor];
_scrollView = [[UIScrollView alloc] init];
[_scrollView setTranslatesAutoresizingMaskIntoConstraints:NO];
_contentView = [[UIView alloc] init];
[_contentView setTranslatesAutoresizingMaskIntoConstraints:NO];
_bigLetters = [[UILabel alloc] init];
[_bigLetters setTranslatesAutoresizingMaskIntoConstraints:NO];
_bigLetters.font = [UIFont systemFontOfSize:30];
_bigLetters.textColor = [UIColor blackColor];
_bigLetters.backgroundColor = [UIColor clearColor];
_bigLetters.text = #"Why so small?";
_bigLetters.textAlignment = NSTextAlignmentCenter;
_aTextField = [[UITextField alloc] init];
_aTextField.backgroundColor = [UIColor whiteColor];
_aTextField.placeholder = #"A Text Box";
[_aTextField setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:_scrollView];
[self.scrollView addSubview:_contentView];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_scrollView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_scrollView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_scrollView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_scrollView)]];
[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_contentView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_contentView)]];
[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_contentView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_contentView)]];
[self.contentView addSubview:_bigLetters];
[self.contentView addSubview:_aTextField];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[_bigLetters]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bigLetters)]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[_aTextField]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_aTextField)]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-[_bigLetters]-[_aTextField]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bigLetters, _aTextField)]];
// Do any additional setup after loading the view.
}
I get both elements squished against the top left corner like this:
If I switch _scrollView to a UIView, things look fine. What am I doing wrong?
Thanks!

Answer 1

UIScrollViews are a little bit complicated.
Firs of all:
[self.view setTranslatesAutoresizingMaskIntoConstraints:NO];
You should not be doing that. Your root view does not need to work with autolayout. Your subviews need it.
Also, the contentSize of the scrollview is defined by what you put inside of them. If you want to have a scrollView screen-sized fix one of it's subviews to screen width (or eight).
What you are seeing there, is your scrollview wrapping up it's content, and the width is probably the label intrinsic content size.
That's why it works with a View.
Hope it helps!!