Customize FBLoginButton layout programmatically

76 views Asked by At

I am trying to customize the layout of FBLoginButton so that it matches the other log in buttons I have.

enter image description here

I created a custom class subclassing FBLoginButton and added my own label and image.

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
        ... 
        ...

    }
}

With this custom class button, I get this.

enter image description here

The UILabel and UIImage I added overlap with the default UI elements of FBLoginButton. Now I guess I need to either remove the default UI elements of FBLoginButton or remove my own UI elements and adjust the default UI elements.

How can I approach this? Can I access the UI elements of FBLoginButton and override with auto layout?

0

There are 0 answers