Custom Facebook button inside Stack View

Question

I'm creating a login page where I want to have a Facebook login button. I have a stack view where it I want the button to be. How do I insert the button into the stack view and customize the button to setUpElements()? I currently have a normal UIButton where I want the facebook button to be, designed as how I want the FBButton to be designed. It’s just a placeholder for the FBButton right now. Pretty much, I just want to customize the facebook button to the specs of setUpElements() and place it inside of the stack view (under the “Sign Up Apple Button”. I've attached a screenshot of how the stackview is designed, thanks for any help!

import UIKit
import FirebaseAuth
import FBSDKLoginKit

class WelcomeViewController: UIViewController {
    @IBOutlet weak var stackView: UIStackView! 
    @IBOutlet weak var signInAppleButton: UIButton!
    @IBOutlet weak var signInFacebookButton: UIButton!
    
    let facebookLoginButton = FBLoginButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        setUpElements()
    }

    
    func setUpElements() {
        let button = signInFacebookButton
        button?.layer.borderWidth = 2
        button?.layer.borderColor = UIColor.init(red: 93/255, green: 129/255, blue: 140/255, alpha: 1).cgColor
        button?.layer.cornerRadius = 20.0
        button?.tintColor = UIColor.black
    }
}

View Controller Screenshot

Initially you can set an empty UIView on the stackView from Storyboard after the you can set Custom FacebookLoginButton on that view by programatically. — Faysal Ahmed, Dec 26 '20 at 17:48
Does this mean that I have to delete all of the buttons on the storyboard and input them all again via code? I honestly just want to keep the “Use email or username” and “Create an account” buttons on the storyboard, but I can replace the rest via code if needed. Can you show me what you mean as an answer to show the code you’re referring to? — Bri, Dec 26 '20 at 19:24
Not like that. You can keep all other option on storyboard. Only for FacebookLoginButton you just put a View on the facebook button position. Later you just add fbButton to that view. — Faysal Ahmed, Dec 26 '20 at 19:53

Ayoub Nouri · Accepted Answer · 2020-12-26T20:59:50.230

If you want to add a button or view to UIStackView programmatically you need to use this function stackView.insertArrangedSubview(button, at: 3)

Edit

you can create a function where you want to have facebook login implementation something like this:

@objc func facebookLoginButtonAction() {
    let loginManager = LoginManager()
    loginManager.logIn(permissions: [], from: self) { (result, error) in
        
        // Check for error
        guard error == nil else {
            // Error occurred
            print(error!.localizedDescription)
            return
        }
        
        // Check for cancel
        guard let result = result, !result.isCancelled else {
            print("User cancelled login")
            return
        }
        
        // Successfully logged in
        // do your business logic code here...
        
        // in case if you would like to load user facebook profile
        Profile.loadCurrentProfile { (profile, error) in
            // update UI ...
        }
    }
}

then you add this function as target action to your custom button let's suppose that you want to use signInFacebookbutton you could place the following code inside viewDidLoad or inside setUpElements():

signInFacebookbutton.addTarget(self, action: #selector(facebookLoginButtonAction), for: .touchUpInside)

I’ll try it out! Will it replace the current Facebook button or will it just insert right above it? Also, how can i customize the FBbutton? — Bri, Dec 26 '20 at 19:26
this function is basically adds the provided view to the array of arranged subviews at the specified index. about the custom Facebook button you can keep that button you created on Storyboard and link it to @IBAction function where you can add your Facebook login implementation — Ayoub Nouri, Dec 26 '20 at 19:55
i think i get what you mean. can you maybe show me in code what you mean by “link it to @IBAction function”? — Bri, Dec 26 '20 at 20:35

Custom Facebook button inside Stack View

1 Answers1