如何编程自定义FBLoginButton布局 解决UI元素重叠问题

问题场景 #

尝试自定义FBLoginButton样式以匹配项目内其他登录按钮的设计，目标样式如下：

最初通过继承FBLoginButton新增自定义UILabel、UIImageView的方式实现布局，代码如下：

class CustomFBLoginButton: FBLoginButton {
    
    private let myTitleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 1
        label.textAlignment = .center
        return label
    }()
        
    private let myIconImage: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()
    

    public func setupLayout() {
        
        addSubview(myTitleLabel)
        addSubview(myIconImage)
        
        myIconImage.translatesAutoresizingMaskIntoConstraints = false
        myTitleLabel.translatesAutoresizingMaskIntoConstraints = false
        

        //auto layout
        ... 
        ...

    }
}

实际运行出现自定义控件和按钮原生UI重叠的问题：

可选解决思路有两种：

• 移除FBLoginButton默认自带的UI元素，使用自定义控件
• 移除自己新增的自定义UI元素，直接调整原生默认元素的布局样式

推荐方案 #

优先选择第二种方案：移除自定义新增的控件，直接调整FBLoginButton原生元素的样式与布局，不建议直接删除/隐藏原生UI元素，原因如下：

• FBLoginButton的原生标签、图标和内置登录逻辑强绑定：包括登录状态自动切换文案、点击事件响应、权限授权流程触发、登录后用户信息展示等逻辑都和原生控件关联，强行隐藏/移除原生控件很容易出现点击失效、状态不同步的问题，且Facebook SDK升级时内部结构变动会直接导致自定义逻辑失效，维护成本极高。
• FBLoginButton本身开放了足够的样式自定义接口，绝大多数设计需求不需要新增自定义控件即可实现。

具体实现方法 #

1. 基础样式调整（SDK官方支持，无兼容风险） #

直接调用SDK开放的属性即可匹配大部分设计规范：

let fbLoginButton = FBLoginButton()
// 按钮基础外观
fbLoginButton.layer.cornerRadius = 8 // 匹配项目圆角
fbLoginButton.backgroundColor = UIColor(red: 24/255, green: 119/255, blue: 242/255, alpha: 1) // 可替换为项目指定按钮色
// 文字样式调整
fbLoginButton.setTitle("Facebook 登录", for: .normal)
fbLoginButton.titleLabel?.font = .systemFont(ofSize: 16, weight: .medium) // 匹配项目字体
fbLoginButton.setTitleColor(.white, for: .normal)
// 图标与文字位置调整
fbLoginButton.imageEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 0)
fbLoginButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 24, bottom: 0, right: 16)
fbLoginButton.contentHorizontalAlignment = .left // 可根据设计需求调整对齐方式

2. 精细布局调整（兼容绝大多数版本，注意大版本SDK校验） #

如果官方属性无法满足布局需求，可以遍历子视图拿到原生的标签、图标控件，通过自动布局或frame调整位置，不需要自己新增控件：

class CustomFBLoginButton: FBLoginButton {
    override func layoutSubviews() {
        super.layoutSubviews()
        // 遍历内部子视图调整样式
        subviews.forEach { subview in
            // 调整原生图标
            if let iconView = subview as? UIImageView {
                iconView.contentMode = .scaleAspectFit
                // 自定义图标约束或frame
                iconView.frame = CGRect(x: 16, y: (bounds.height - 20)/2, width: 20, height: 20)
            }
            // 调整原生文本标签
            if let titleLabel = subview as? UILabel {
                titleLabel.font = .systemFont(ofSize: 16, weight: .medium)
                titleLabel.textAlignment = .center
                // 自定义标签约束或frame
                titleLabel.frame = CGRect(x: 44, y: 0, width: bounds.width - 60, height: bounds.height)
            }
        }
    }
}

注意：遍历子视图调整的方式依赖SDK内部的视图层级，Facebook SDK跨大版本升级时（比如从16.x升级到17.x）需要校验布局是否正常，避免内部结构变动导致样式错乱。

不推荐新增自定义控件的原因 #

自行新增UILabel、UIImageView叠加在按钮上的方式，除了会出现视图重叠问题，还可能挡住原生控件的点击响应区域，就算手动把原生控件隐藏，后续SDK更新时如果调整内部事件绑定逻辑，很容易出现登录功能失效的问题，稳定性远低于直接调整原生控件的方案。

内容的提问来源于stack exchange，提问作者Megool