fb login button not displaying properly in view

Question

I have the following code:

override func viewDidLoad() {
    super.viewDidLoad()

    let fbLoginButton = FBSDKLoginButton()
    fbLoginView.contentMode = UIViewContentMode.scaleAspectFit
    fbLoginView.addSubview(fbLoginButton)
    fbLoginButton.frame.origin = fbLoginView.frame.origin

    fbLoginButton.frame = CGRect(x: fbLoginView.frame.origin.x, y: fbLoginView.frame.origin.y, width: fbLoginView.frame.width, height: fbLoginView.frame.height)

    print("INFO width: \(fbLoginView.frame.width) height: \(fbLoginView.frame.height)")
    print("INFO width: \(fbLoginButton.frame.width) height: \(fbLoginButton.frame.height)")
   // fbLoginButton.delegate = self
}

I am trying to add the facebook login button within a small subview that I have in my main view. For some reason when I print out the width/height of the UIView, and facebook login button I see this:

INFO width: 1000.0 height: 1000.0 INFO width: 1000.0 height: 1000.0

BUT when I run the app on the simulator I see that the view isnt 1000.0 x 1000.0 (it would be overflowing off of the screen but it isn't. It looks like this:

You can se the blue of the button, and that its correctly WITHIN the smaller subview but, the button actually seems to be overflowing larger than the view. What I don't get why the view is the correct size in the simulator, but its saying that its size is so large. I've read posts here which tell me to resize the button to aspect fit, and I've played around with all of the other options but no luck.

I have the smaller uiview set up like this:

Answer 1

In viewDidLoad, the app hasn't yet completed its auto-layout pass so many views are 1000x1000pts.

So in your code when you set the loginButton's size to match the loginView's size, it copies the value of 1000 across.

Later on when your app applies its auto layout constraints, the containing loginView is resized to the correct size, but within it the loginButton has its old, larger size.

The correct solution would be to correctly constrain the loginButton using autolayout - the simplest change would be to add constraints to it within loginView so that it's resized at the same time:

NSLayoutConstraint(item: fbLoginButton, attribute: .Trailing, relatedBy: .Equal, toItem: fbLoginView, attribute: .Trailing, multiplier: 1.0, constant: 0.0).active = true
NSLayoutConstraint(item: fbLoginButton, attribute: .Leading, relatedBy: .Equal, toItem: fbLoginView, attribute: .Leading, multiplier: 1.0, constant: 0.0).active = true
NSLayoutConstraint(item: fbLoginButton, attribute: .Top, relatedBy: .Equal, toItem: fbLoginView, attribute: .Top, multiplier: 1.0, constant: 0.0).active = true
NSLayoutConstraint(item: fbLoginButton, attribute: .Bottom, relatedBy: .Equal, toItem: fbLoginView, attribute: .Bottom, multiplier: 1.0, constant: 0.0).active = true

Or it would probably be cleaner to add the Facebook Button within your storyboard directly (add an empty view and set its class to FBSDKLoginButton).

Answer 2

The problem with frames in viewDidLoad() is that they are not layouted. They do not have their final size yet. You could use viewDidLayoutSubviews() for that.

I would suggest to use NSLayoutConstraints, though. Looking at what you were trying to do with your frame, you can simply create the constraints and add them to your view.

let topConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .top, relatedBy: .equal, toItem: fbLoginView, attribute: .top, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .bottom, relatedBy: .equal, toItem: fbLoginView, attribute: .bottom, multiplier: 1, constant: 0)
let leadingConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .leading, relatedBy: .equal, toItem: fbLoginView, attribute: .leading, multiplier: 1, constant: 0)
let trailingConstraint = NSLayoutConstraint(item: fbLoginButton, attribute: .trailing, relatedBy: .equal, toItem: fbLoginView, attribute: .trailing, multiplier: 1, constant: 0)

self.view.addConstraints([topConstraint, bottomConstraint, leadingConstraint, trailingConstraint])