FB登录按钮与Google登录按钮尺寸不一致问题咨询

我之前也踩过这个坑！核心问题在于FBSDKLoginButton和GIDSignInButton的默认布局逻辑不一样：Google的登录按钮会乖乖遵循你设置的frame或约束，而Facebook的按钮自带了品牌化的内边距和自动布局规则，直接设置frame往往会被它的内部逻辑覆盖，导致尺寸不匹配。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：用AutoLayout统一约束（最稳定适配） #

这种方式能保证在所有设备上两个按钮的尺寸完全一致，适配性拉满：

// Google登录按钮配置
GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID
GIDSignIn.sharedInstance().uiDelegate = self as GIDSignInUIDelegate
GIDSignIn.sharedInstance().delegate = self

let GoogleLoginButton = GIDSignInButton()
view.addSubview(GoogleLoginButton)
GoogleLoginButton.translatesAutoresizingMaskIntoConstraints = false

// Facebook登录按钮配置
let FBLoginButton = FBSDKLoginButton()
view.addSubview(FBLoginButton)
FBLoginButton.translatesAutoresizingMaskIntoConstraints = false
// 移除FB按钮的默认内边距，让内容填满按钮区域
FBLoginButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

// 添加统一的约束
NSLayoutConstraint.activate([
    // Google按钮约束
    GoogleLoginButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
    GoogleLoginButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
    GoogleLoginButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 350),
    GoogleLoginButton.heightAnchor.constraint(equalToConstant: 46),
    
    // Facebook按钮约束（和Google按钮同宽同高，间距14）
    FBLoginButton.leadingAnchor.constraint(equalTo: GoogleLoginButton.leadingAnchor),
    FBLoginButton.trailingAnchor.constraint(equalTo: GoogleLoginButton.trailingAnchor),
    FBLoginButton.topAnchor.constraint(equalTo: GoogleLoginButton.bottomAnchor, constant: 14),
    FBLoginButton.heightAnchor.constraint(equalTo: GoogleLoginButton.heightAnchor)
])

方案2：强制FB按钮使用自定义Frame #

如果你习惯用frame布局，可以关闭FB按钮的自动布局转换，同时清除它的默认内边距：

// Google登录按钮（保留你的原有代码）
let GoogleLoginButton = GIDSignInButton()
view.addSubview(GoogleLoginButton)
GoogleLoginButton.frame = CGRect(x: 16, y: 350, width: view.frame.width - 32, height: 46)

// Facebook登录按钮修改
let FBLoginButton = FBSDKLoginButton()
view.addSubview(FBLoginButton)
// 允许手动设置frame，关闭自动约束的自动应用
FBLoginButton.translatesAutoresizingMaskIntoConstraints = true
// 设置和Google按钮完全一致的frame
FBLoginButton.frame = CGRect(x: 16, y: 410, width: view.frame.width - 32, height: 46)
// 清除默认内边距，让按钮内容填满整个frame
FBLoginButton.contentEdgeInsets = UIEdgeInsets.zero

方案3：让Google按钮匹配FB的默认尺寸 #

如果你想保留FB按钮的原生品牌样式，也可以反过来调整Google按钮的尺寸：

// 先初始化FB按钮并获取它的默认尺寸
let FBLoginButton = FBSDKLoginButton()
view.addSubview(FBLoginButton)
FBLoginButton.sizeToFit()

// 然后设置Google按钮的尺寸和FB一致
let GoogleLoginButton = GIDSignInButton()
view.addSubview(GoogleLoginButton)
let buttonWidth = FBLoginButton.frame.width
let buttonHeight = FBLoginButton.frame.height
// 居中对齐两个按钮
GoogleLoginButton.frame = CGRect(x: view.frame.width/2 - buttonWidth/2, y: 350, width: buttonWidth, height: buttonHeight)
FBLoginButton.frame = CGRect(x: view.frame.width/2 - buttonWidth/2, y: 410, width: buttonWidth, height: buttonHeight)

问题根源小科普 #

• GIDSignInButton是一个比较“灵活”的按钮，它会优先遵循开发者设置的布局规则，没有强制的内部尺寸限制。
• FBSDKLoginButton自带了Facebook的品牌样式，默认有固定的内边距和内容大小，而且内部启用了自动布局，会优先使用自身的intrinsicContentSize，导致你设置的frame被忽略。

内容的提问来源于stack exchange，提问作者DU.DE