iOS Programmatically Center Objects

Question

I am updating an app for iPhone 6 Plus support. On one of the views that is set up programmatically, running on 5S or below has all views centered the way they should be. However, on the 6 Plus, it is scooted over slightly to the left. How can I adjust this code to keep it centered horizontally in all versions?

[self.logInView.usernameField setFrame:CGRectMake(35.0f, 125.0f, 250.0f, 50.0f)];
[self.logInView.passwordField setFrame:CGRectMake(35.0f, 175.0f, 250.0f, 50.0f)];
[self.fieldsBackground setFrame:CGRectMake(35.0f, 125.0f, 250.0f, 100.0f)];
[self.logInView.logInButton setFrame:CGRectMake(35.0f, 235.0f, 250.0f, 40.0f)];

Base your frame coordinates (x and y) off of the parent view's frame instead of hardcoding values. — rmaddy, Jan 11 '15 at 04:22
You'll probably want to set the center in viewDidLayoutSubviews. At this point you will know the parent's true frame. — Brian Nickel, Jan 11 '15 at 07:02

score 3 · Accepted Answer · answered Jan 11 '15 at 07:47

[self.logInView.usernameField setFrame:CGRectMake(self.view.center.x - 125, 0, 250.0f, 50.0f);];
[self.logInView.passwordField setFrame:CGRectMake(self.view.center.x - 125, 175.0f, 250.0f, 50.0f)];
[self.fieldsBackground setFrame:CGRectMake(self.view.center.x - 125, 125.0f, 250.0f, 100.0f)];
[self.logInView.logInButton setFrame:CGRectMake(self.view.center.x - 125, 235.0f, 250.0f, 40.0f)];

you can use this code to get laid down UI horizontal well on all iOS devices.

score 0 · Answer 2 · answered Jan 11 '15 at 04:53

The answer is simple... Use autolayout. But if you don't know how to use it, try this:

At first, create some defines:

#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_IPADDEVICE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE_4 (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 480.0)
#define IS_IPHONE_5 (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 667.0)
#define IS_IPHONE_6_PLUS (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 736.0)
#define IS_IPAD (IS_IPADDEVICE && [[UIScreen mainScreen] bounds].size.height == 1024.0)

Then create a simple if statement:

   if (IS_IPHONE_4) {
        // iPhone 4
    } else if (IS_IPHONE_5) {
        // iPhone 5
    } else if (IS_IPHONE_6) {
        // iPhone 6
    } else if (IS_IPHONE_6_PLUS) {
        // iPhone 6 plus
    } else if (IS_IPAD) {
        // iPad
    } else {
        // other device
    }

If I want to center an object I use the frame method:

theobject.frame = CGRectMake((theobject.frame.size.width/2) - (theobject.image.size.width/2), 20, theobject.image.size.width, theobject.image.size.height);

I hope this answer will help you! ;)

I try that and I get many errors saying 'Undeclared use of IS_IPHONE_4', etc. — user717452, Jan 11 '15 at 05:03
Even without auto layout, there is no reason for all of the device macros. And the last line of code in your answer should be based on the parent view's frame. — rmaddy, Jan 11 '15 at 05:05
Did you create your defines underneath the imports: http://cl.ly/image/2L3B3I1b3s13 ??? — SDW, Jan 11 '15 at 05:07
I'm helping too. Please explain what benefit all the macros are for and what the big `if-else` block is for. The only part of your answer that is relevant is the last line but that code won't work as-is. — rmaddy, Jan 11 '15 at 05:14

score 0 · Answer 3 · answered Mar 03 '15 at 07:26

It appears you are updating your Parse loginView. I was having the same issues...it's a real pain to get the default loginView to fit all the screen device sizes. I will share some code that I hope will help. This should be on Parse's IOS Helper Page. Put this in your .m file

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

//Returns the screen dimensions (in points) of the user's current device
CGRect screenBounds = [[UIScreen mainScreen] bounds];


//Finds to see if the user has an iPhone 4s, and then set's the layout if they do
if(screenBounds.size.height==480)
{
    [self.logInView.logInButton setFrame:CGRectMake(self.view.center.x - 125, 300.0f, 250.0f, 50.0f)];
    [self.logInView.usernameField setFrame:CGRectMake(self.view.center.x - 125, 165.0f, 250.0f, 50.0f)];
    [self.logInView.passwordField setFrame:CGRectMake(self.view.center.x - 125, 215.0f, 250.0f, 50.0f)];
    [self.logInView.passwordForgottenButton setFrame:CGRectMake(self.view.center.x - 125, 265.0f, 250.0f, 40.0f)];    }


//Finds to see if the user has an iPhone 5/5s, and then set's the layout if they do
else if (screenBounds.size.height == 568)
{
    [self.logInView.logInButton setFrame:CGRectMake(self.view.center.x - 125,360.0f, 250.0f, 50.0f)];
    [self.logInView.usernameField setFrame:CGRectMake(self.view.center.x - 125, 245.0f, 250.0f, 50.0f)];
    [self.logInView.passwordField setFrame:CGRectMake(self.view.center.x - 125, 295.0f, 250.0f, 50.0f)];
    [self.logInView.passwordForgottenButton setFrame:CGRectMake(self.view.center.x - 125, 445.0f, 250.0f, 40.0f)];    }

//If the user doesn't have a 4S/5/5s, then they must be using an iPhone 6/6+
else {

        [self.logInView.logInButton setFrame:CGRectMake(self.view.center.x - 125, 420.0f, 250.0f, 50.0f)];
        [self.logInView.usernameField setFrame:CGRectMake(self.view.center.x - 125, 275.0f, 250.0f, 50.0f)];
        [self.logInView.passwordField setFrame:CGRectMake(self.view.center.x - 125, 325.0f, 250.0f, 50.0f)];
        [self.logInView.passwordForgottenButton setFrame:CGRectMake(self.view.center.x - 125, 485.0f, 250.0f, 40.0f)];

//Prints out the current device being used
    NSLog(@"Current device: %@", [[UIDevice currentDevice] model] );
}

score -3 · Answer 4 · answered Jan 11 '15 at 04:31

-3

you can use "bounds" and "center":

self.logInView.usernameField.bounds = CGRectMake(0,0,250,50);
self.logInView.usernameField.center = CGPointMake(160, 150);

answered Jan 11 '15 at 04:31

Thorsten

3,102
14
14

1

But how does this ensure the view is centered on difference devices? You can't just hardcode the coordinates. – rmaddy Jan 11 '15 at 04:37
Just use [UIScreen mainScreen] bounds].size.height / 2 and [UIScreen mainScreen] bounds].size.width / 2 to center it depending on the screen size. – Thorsten Jan 11 '15 at 07:26

iOS Programmatically Center Objects

4 Answers4