Cannot change the height of Login Button in FBSDKL

问题:

I am using FBSDKLoginKit in iOS with Swift.

Up until recently it has been working perfectly, however I now cannot override the height of my button in the Storyboard?

The height of the button is now much smaller for some reason. I have tried setting height constraints for the button, putting the button in a stack view and set to fill proportionally and even override the button height in the SDK with no luck.

If I change the button to a normal UIButton the layout constraints work perfectly.

This is what the button looks like when I run the app.

This is how I would like the button to look - size wise.

回答1:

I've also run into this problem. The reason for this is explained in the 4.18.0 to 4.19.0 upgrade guide:

The FBSDKLoginButton UI has changed in 4.19.0. Instead of "Log in with Facebook", the button now displays "Continue with Facebook". The button color is changed to #4267B2 from #3B5998. The button height is now fixed at 28 due to use of smaller font size and paddings around a larger Facebook logo.

The only workaround I found so far is to downgrade the SDK version to 4.18.0 (it did the job for me).

It is possible that FB will address this issue (...that they've created for many people) in one of the future updates to the SDK.

---

Towards a more permanent solution, we can see the specific changes that caused this, on GitHub. The change I find most suspicious starts on line 194:

[self addConstraint:[NSLayoutConstraint constraintWithItem:self
                                                 attribute:NSLayoutAttributeHeight
                                                 relatedBy:NSLayoutRelationEqual
                                                    toItem:nil
                                                 attribute:NSLayoutAttributeNotAnAttribute
                                                multiplier:1
                                                  constant:28]];

If the above constraint is removed/disabled, it could help reverse the situation. It should look approximately like this (I don't have an IDE at hand at the time of writing):

// Obtain all constraints for the button:
let layoutConstraintsArr = fbLoginButton.constraints
// Iterate over array and test constraints until we find the correct one:
for lc in layoutConstraintsArr { // or attribute is NSLayoutAttributeHeight etc.
   if ( lc.constant == 28 ){
     // Then disable it...
     lc.active = false
     break
   }
}

When I get a chance to test the above or if I find a better solution, I'll update the answer.

回答2:

You can conveniently achieve this with a simple override of the facebook button.

Swift:

class FacebookButton: FBSDKLoginButton {

    override func updateConstraints() {
        // deactivate height constraints added by the facebook sdk (we'll force our own instrinsic height)
        for contraint in constraints {
            if contraint.firstAttribute == .height, contraint.constant < standardButtonHeight {
                // deactivate this constraint
                contraint.isActive = false
            }
        }
        super.updateConstraints()
    }

    override var intrinsicContentSize: CGSize {
        return CGSize(width: UIViewNoIntrinsicMetric, height: standardButtonHeight)
    }

    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
        let logoSize: CGFloat = 24.0
        let centerY = contentRect.midY
        let y: CGFloat = centerY - (logoSize / 2.0)
        return CGRect(x: y, y: y, width: logoSize, height: logoSize)
    }

    override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
        if isHidden || bounds.isEmpty {
            return .zero
        }

        let imageRect = self.imageRect(forContentRect: contentRect)
        let titleX = imageRect.maxX
        let titleRect = CGRect(x: titleX, y: 0, width: contentRect.width - titleX - titleX, height: contentRect.height)
        return titleRect
    }

}

In this code sample standardButtonHeight is a defined constant with the desired button height.

Also note that the logo size of 24.0 is the same size used in version 4.18 of the SDK.

回答3:

So I took @Dev-iL's solution and tweaked it to something a bit more future proof. I'm very new to this so it took me a few hours to figure it out, but I thought I'd share since it specifically deactivates the height constraint based on being a height constraint instead of based on the constant value.

I've used a subview classed as the Facebook button in my storyboard and have set the new constraint there.

I prefer this method and feel its a cleaner approach.

Note: I believe for a height constraint it will always be the first value however please correct me if I'm wrong and I'll update with an edit. As I mentioned I'm new to this

Edit: I decided to include the constant value of 28 to allow for my storyboard height constraint to be skipped during the removal. This isn't needed if you add the constraint programmatically after the removal

for const in fbLoginButton.constraints{
  if const.firstAttribute == NSLayoutAttribute.height && const.constant == 28{
    fbLoginButton.removeConstraint(const)
  }
}

回答4:

As for now the Facebook button has only one constraint which is the height constraint and you can just remove all constraints of the button and add yours.

facebookSignInButton.removeConstraints(facebookSignInButton.constraints)

But of course this can change in the future and you might remove a constraint that you don't want to. Maybe a better solution would be if you remove only that problematic constraint.

if let facebookButtonHeightConstraint = facebookSignInButton.constraints.first(where: { $0.firstAttribute == .height }) {
    facebookSignInButton.removeConstraint(facebookButtonHeightConstraint)
}

回答5:

This little autoclosure in Swift 4.0 also works perfectly if you have no reason to remove the constraint, just override it.

let facebookLoginButton = FBSDKLoginButton()
if let constraint = facebookLoginButton.constraints.first(where: { (constraint) -> Bool in
    return constraint.firstAttribute == .height
}) {
    constraint.constant = 40.0
}

Or if you hate let statements:

let facebookLoginButton = FBSDKLoginButton()
facebookLoginButton.constraints.first(where: { (constraint) -> Bool in
    return constraint.firstAttribute == .height
})?.constant = 40.0

回答6:

If you are after just changing the height of your button, you can simply adjust the constant of the already present height constraint on the button, after adding the button in your Storyboard:

for constraint in facebookButton.constraints where constraint.firstAttribute == .height {
    constraint.constant = YOUR_Height
}

This code can be placed in viewDidLoad().

回答7:

As a last resort, try implementing your own custom button to act as a Facebook Login button. They might be preventing the customization of the button from the SDK. https://developers.facebook.com/docs/swift/login -- There is a section here with example code - "Custom Login Button". It doesn't seem complicated.

回答8:

We had the same problem. We solve this problem by creating the button in code with initWithFrame method.

from documentation

FBSDKLoginButton has a fixed height of @c 30 pixels, but you may change the width. initWithFrame:CGRectZero will size the button to its minimum frame.

this solution is working for us

let facebookButton = FBSDKLoginButton(frame:facebookButtonPlaceholder.bounds)
facebookButton.readPermissions = ["email"]
facebookButton.backgroundColor = UIColor.clear
facebookButtonPlaceholder.addSubview(facebookButton)
facebookButtonPlaceholder.backgroundColor = UIColor.clear

回答9:

I could manage to change the height of the button this way:

• I added a view facebookButtonView to the storyboard with the size that i want, and then in the viewDidLoad i simple do this:

  let loginButton = LoginButton(frame: self.facebookButtonView.frame, readPermissions: [ .publicProfile ])
  self.view.addSubview(loginButton)
  

The Facebook button take the same size as the facebookButtonView. I tested with height 50 and it's working.

回答10:

Realising this is an old question, I've found a solution and am posting it as an answer for future reference.

After you have installed the FBSDKLoginKit via a Pod, look in your directory on the left in XCODE and open your PODS -- not your Podfile. Open FBSDKLoginKit, and open FBSDKLoginButton.m file.

You will now see an alert indicating that you are editing. Ignore the alert, that is take notice of the message and make sure that you don't change anything other than your target info. Change the two fields that dictate Facebook button height in the file as seen below:

Pictures to help you through the guide above:

• project structure files to open
• first field to change
• second field to change

EASIEST SOLUTION, no need to deal with programmatic rects, just do it in storyboard

回答11:

Autolayout does not work on Facebook button(FBSDKButton) anymore. I changed its height using buttons frame.

    let fbLoginbutton = FBSDKLoginButton()

    view.addSubview(fbLoginbutton)

    fbLoginbutton.frame = CGRect(x: 38, y: 397, width: 300, height: 38)

You can set it according to your requirement. Although I'm still not able to change its font & Logo size.

回答12:

Xamarin.iOS example using Linq.

I created the button in the storyboard file, and assigned a height there. However, I could not just remove all height constraints because the one I set in the storyboard was getting removed as well. I had to check to see if there is an existing height constraint of size 28 - and remove that one

var contraint = this.FacebookLoginButton?.Constraints?.Where(x => x.FirstAttribute.Equals(NSLayoutAttribute.Height) && x.Constant == 28f)?.FirstOrDefault() ?? null;
if (contraint != null)
{
  this.FacebookLoginButton.RemoveConstraint(contraint);
}