iOS UI crumbling when app runs view controller of static cells

Question

Pardon the title, I'm not sure how to specify what exactly is happening to my UI in my user interface.

Currently in storyboard, my app displays like so:

I'll define what IBOutlets I'm using in after these pictures.But when I run the app--and this is for iPhone 6 and 6 Plus (haven't gone lower as two is enough to prove something is wrong)--I get this sort of view (which I supposedly populated in the TableViewController:

(bottom is cut off, no important to question)

Here's the code for the TableViewController:

#import "EditProfileTableViewController.h"

@interface EditProfileTableViewController ()

@end

@implementation EditProfileTableViewController

// Synthesizing cells
@synthesize proPicCell, usernameCell, displayNameCell, emailCell, bioCell;
// Synthesizing edit-fields [to the SO readers, these are all UITextView's except the editProPic which is a UIImageView]
@synthesize editProPic, editUsername, editDisplayName, editEmail, editBio;

- (void)viewDidLoad {
    [super viewDidLoad];
    editProPic.image = [UIImage imageNamed:@"NYT.png"];
    editUsername.text = @"Will";
    editDisplayName.text = @"Will C";
    editEmail.text = @"email@gmail.com";
    editBio.text = @"From usa";
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

All that data isn't populated via an array yet as I'm testing the user interface first.

Also, I am using auto-layout on this project (that being said, I only checked the box that says auto-layout and have not done anything else with it).

Answer 1

You need to use Auto Layout Constraints. Just turning Auto Layout on isn't enough. Constraints specify how different view elements look and are placed relative to other views. I'd recommend doing some quick reading on Auto Layout. Ray Wenderlich has some pretty good tutorials. http://www.raywenderlich.com/50319/beginning-auto-layout-tutorial-in-ios-7-part-2