堆栈视图中的自定义 Facebook 按钮

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

Answer 1

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)