3

I am iOS beginner and trying to learn by doing a project. I need to add a Google + Sign in button in the middle of the screen. Here is how my autolayout constraints look like

enter image description here
and

enter image description here
and when I run this, I see the following

enter image description here
and
enter image description here

Question
How can I make sure the my view comes in middle as I add constraints? What settings I am missing and need to learn?

Thanks

UPDATE 01
As per @Dean's suggestion, I made the change as

enter image description here

But when I run this, I still see it as

enter image description here

Could it be because of image size? How do I know about it?

UPDATE 02
After resolving all the autolayout issues, I see the following
enter image description here

3
  • 1
    Your Google + image is bigger in length then the specified length of given button. Jul 7, 2014 at 12:37
  • Remove the right constraint and add a constraint for the middle of the button to the middle of the superview.
    – dasdom
    Jul 7, 2014 at 12:38
  • @dasdom, can you please explain "add a constraint for the middle of the button to the middle of the superview"?
    – daydreamer
    Jul 7, 2014 at 12:43

2 Answers 2

2

You'll want to select the button and delete all the restraints that you have.

Go to the Editor menu. Select Align and then Horizontal Center In Container and Vertical Center in Container. That is all the constraints you want on the button.

XCode Editor Menu Image

Given that we have established your constraints are now correct. It would appear that your button, coming from Google, is initially reporting its maximum width as its width property. Once you set the style and the image is loaded, the actual width is determined by the resulting localized message string.

I would place [self.view setNeedsLayout] and [self.view layoutIfNeeded] somewhere after all processing is complete. This will likely obtain the correct width and adjust layout centered as desired.

If you are programmatically adding the button in your view class implementation, as in the example you followed to manually set the frame, and still want to use autolayout try this code in place of the code you copied from photohunt:

      GPPSignInButton *signInButton = [[GPPSignInButton alloc] init];
      [signInButton setTranslatesAutoresizingMaskIntoConstraints:NO];
      [signInButton setStyle:kGPPSignInButtonStyleWide];
      [signInButton setColorScheme:kGPPSignInButtonColorSchemeLight];
       NSLayoutConstraint *vConstraint = [NSLayoutConstraint constraintWithItem:signInButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
       NSLayoutConstraint *hConstraint = [NSLayoutConstraint constraintWithItem:signInButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
       [self.view addConstraint:vConstraint];
       [self.view addConstraint:hConstraint];

       [self.view addSubview:signInButton];

I cannot test it, but as the constraints are now added after the button is initialized I am betting it gets the layout correct.

12
  • Thanks @Dean, I just updated my question based on your answer
    – daydreamer
    Jul 7, 2014 at 12:58
  • To start with, you should go back to that Editor menu, select Resolve Auto Layout Issues --> Update All Frames In View. The dotted frames are showing that you have some kind of conflict. This will update your IB window to reflect the true result. Look at all the constraints and make sure the centering constraints are the only existing. Jul 7, 2014 at 13:12
  • Thanks, I just updated my answer, may be I am missing something again
    – daydreamer
    Jul 7, 2014 at 13:15
  • Click on the horizontal restraint and check the constant setting in the inspector. Is it zero? Jul 7, 2014 at 13:19
  • I see the constraints now working properly in preview. It has to have something to do with the button and/or the image. It would seem that the image is wider than it looks. Is there some white or clear space to the left of the red rectangle? Check the image itself as it sets the button width. Jul 7, 2014 at 13:22
-2

I found the issue, the following fixed it

CGFloat x = roundf((320.0 - signInButton.frame.size.width) / 2.0);
  CGFloat y = roundf((80.0 - signInButton.frame.size.height) / 2.0);
  [signInButton setFrame:CGRectMake(x,
                                    y,
                                    signInButton.frame.size.width,
                                    signInButton.frame.size.height)];
  [self addSubview:signInButton];

After much googling around I found a sample iOS application by google developers and it is mentioned https://developers.google.com/+/photohunt/ios#displaying_the_sign-in_button

As per them

Also, the button can stretch across almost the whole width, so the wide button style is used

After this, I saw that the button was centered

enter image description here

The problem now is that it is located at the top of the page, but that's a separate issue to deal with :)

UPDATE
Thanks @Fogmeister and @Dean. As per @Dean's suggestion, I made the change for x and y as

CGFloat x = roundf((float) ((self.view.bounds.size.width - signInButton.frame.size.width) / 2.0));
CGFloat y = roundf((float) ((self.view.bounds.size.height - signInButton.frame.size.height) / 2.0));   

and it landed up perfectly in portrait mode
enter image description here
However, in landscape mode, this still doesn't line up very well
enter image description here

Any ideas? (Now I am not hardcoding values that should break Autolayout)

13
  • This will absolutely break AutoLayout. You cannot use setFrame, setBounds or setCenter when using AutoLayout. What you have done here is just calculate the centre rect and set it. This isn't using AutoLayotu at all.
    – Fogmeister
    Jul 8, 2014 at 10:07
  • I'd suggest taking a look at the Ray Wenderlich - Beginning Auto Layout tutorial. It will introduce you to the basics of AutoLayout. The problem in this question is a very basic thing that AutoLayout is perfect for fixing.
    – Fogmeister
    Jul 8, 2014 at 10:08
  • That would be fine if you were not using Autolayout. You can easily adjust your calculations to center the button (exchange 320 for self.view.bounds.size.width and the 80 for bounds.height), however, arguably this is not the best solution. If you are mixing autolayout with these methods, you are bound for trouble. Jul 8, 2014 at 11:08
  • Just tried and updated with what you guys suggested, works well in Portrait mode but not in landscape
    – daydreamer
    Jul 8, 2014 at 12:38
  • That is exactly what autolayout is built for. If you are manually setting the frame, you will have to do it every time the layout changes. In that case you would have to reset the frame when the device is rotated. Try the alternate method that I added to my answer. Using that method of creating the button should result in correct layout automatically on all changes, all devices and all orientations. Jul 8, 2014 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.