UIScrollView with dynamic content

Question

I'm trying to implement a UIScrollView, but every tutorial out there deals with a preset number of items.

What I have are multiple UITextField's, but the number of textfields vary. Basically, as soon as one textField contains text, another empty one appears below it, allowing the user to fill in an unlimited number of textfields.

My code creates a new textfield as soon as the user types something into a previous one. The x-coordinatesof this is the same as the previous one, but the y-coordinatesto the new one equals the height of the previous + 5px.

I'm using storyboards, and I have placed my original textField within a UIScrollView. I have connected this scrollView to my code, and I add a new textfield this way: [self.scrollView addSubview:newTextField];

However, when the amount of textFields exceeds the scrollView, I cannot scroll to reveal the new one that's been added.

How would I go about doing this? I don't think I completely get the setContentSize thing, so it might have something to do with that. Here are some pictures and code to explain my problem:

Code to add new textfield:

UITextField *newTextField = [[UITextField alloc]initWithFrame:CGRectMake(textField.frame.origin.x, textField.frame.origin.y + textField.frame.size.height+5, textField.frame.size.width, textField.frame.size.height)];
newTextField.placeholder = @"Add more text";
newTextField.borderStyle = UITextBorderStyleNone;
newTextField.font = [UIFont systemFontOfSize:14];
newTextField.autocorrectionType = UITextAutocorrectionTypeYes;
newTextField.clearButtonMode = UITextFieldViewModeWhileEditing;
newTextField.autocapitalizationType = UITextAutocapitalizationTypeSentences;
newTextField.returnKeyType = UIReturnKeyDone;
[newTextField setTag:textFieldTag];
newTextField.delegate = self;
[self.scrollView addSubview:newTextField];

Storyboard:

Here you can see how I have placed the original textfield within my scrollview

How it looks in the simulator:

When you enter text in the textfield, this happens:

An empty textfield appears below the previous one.

However, when you exceed the ScrollView, this happens

You can no longer see the new textField because it is below the scrollView's boundaries. You can not scroll to reveal it either.

---

Does anyone know how to solve this? And if you have time, how would you make it so the scrollview automatically scrolls down to reveal the new textfield that's been added?

Any help is greatly appreciated! Thanks!

Answer 1

The contentSize needs to be the size of content contained within the scroll view.

If the contentSize is wider than the bounds.size, then you can scroll left and right. If the contentSize is taller than the bounds.size, then you can scroll up and down.

You need to set the contentSize to be the entire area you wish to contain within your scroll view.

UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(textField.frame.origin.x, textField.frame.origin.y + textField.frame.size.height+5, textField.frame.size.width, textField.frame.size.height)];
textField.placeholder = @"Add more text";
textField.borderStyle = UITextBorderStyleNone;
textField.font = [UIFont systemFontOfSize:14];
textField.autocorrectionType = UITextAutocorrectionTypeYes;
textField.clearButtonMode = UITextFieldViewModeWhileEditing;
textField.autocapitalizationType = UITextAutocapitalizationTypeSentences;
textField.returnKeyType = UIReturnKeyDone;
textField.tag = textFieldTag;
textField.delegate = self;

[self.scrollView addSubview:textField];

// Update the contentSize to include the new text field.
CGFloat width = self.scrollView.bounds.size.width;
CGFloat height = CGRectGetMaxY(textField.frame);
self.scrollView.contentSize = CGSizeMake(width, height);

NOTES:

• Don't start variables or methods with new. It has special meaning and you will confuse other Objective-C developers and/or the compiler.
• textField.tag = … is the same as [textfield setTag:…]; You seem to like the dot syntax in other places, so I switched to that.
• I'm assuming you don't want the scroll view to pan left and right, so I pinned the content width to the scroll view's width.