I implemented Sign in with Apple but in all cases the button is always black. I would like to show it in light/ dark mode depending on the phone settings.
This is my code:
class MyAuthorizationAppleIDButton: UIButton {
private var authorizationButton: ASAuthorizationAppleIDButton!
@IBInspectable
var cornerRadius: CGFloat = 3.0
@IBInspectable
var authButtonType: Int = ASAuthorizationAppleIDButton.ButtonType.default.rawValue
@IBInspectable
var authButtonStyle: Int = ASAuthorizationAppleIDButton.Style.black.rawValue
override public init(frame: CGRect) {
super.init(frame: frame)
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override public func draw(_ rect: CGRect) {
super.draw(rect)
// Create ASAuthorizationAppleIDButton
authorizationButton = ASAuthorizationAppleIDButton(authorizationButtonType: .signIn, authorizationButtonStyle: .black)
let type = ASAuthorizationAppleIDButton.ButtonType.init(rawValue: authButtonType) ?? .default
let style = ASAuthorizationAppleIDButton.Style.init(rawValue: authButtonStyle) ?? .black
authorizationButton = ASAuthorizationAppleIDButton(authorizationButtonType: type, authorizationButtonStyle: style)
authorizationButton.cornerRadius = cornerRadius
// Show authorizationButton
addSubview(authorizationButton)
// Use auto layout to make authorizationButton follow the MyAuthorizationAppleIDButton's dimension
authorizationButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
authorizationButton.topAnchor.constraint(equalTo: self.topAnchor, constant: 0.0),
authorizationButton.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),
authorizationButton.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0.0),
authorizationButton.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0.0),
])
}
}
So basically with the code above, I can set on Storyboard the style of the button but it seems that even if I change the value at my code, the result is based on what I chose on Storyboard's variable.
Is there any solution where I would be able to show the button in light/ dark mode depending on the phone settings ?
I found the solution.
First of all, I had to remove the @IBInspectable from my code to avoid setting those values in Storyboard.
Then, I found a way to dynamically change the style when the user switches dark mode on or off.
So, the update code following the Apple Human Interface Guidelines is:
class MyAuthorizationAppleIDButton: UIButton {
private var authorizationButton: ASAuthorizationAppleIDButton!
var cornerRadius: CGFloat = 3.0
var authButtonType: Int = ASAuthorizationAppleIDButton.ButtonType.default.rawValue
var authButtonStyle: Int = UITraitCollection.current.userInterfaceStyle == .dark ? 0 : 2
override public init(frame: CGRect) {
super.init(frame: frame)
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override public func draw(_ rect: CGRect) {
super.draw(rect)
// Create ASAuthorizationAppleIDButton
authorizationButton = ASAuthorizationAppleIDButton(authorizationButtonType: .signIn, authorizationButtonStyle: .black)
let type = ASAuthorizationAppleIDButton.ButtonType.init(rawValue: authButtonType) ?? .default
let style = ASAuthorizationAppleIDButton.Style.init(rawValue: authButtonStyle) ?? .black
authorizationButton = ASAuthorizationAppleIDButton(authorizationButtonType: type, authorizationButtonStyle: style)
authorizationButton.cornerRadius = cornerRadius
// Show authorizationButton
addSubview(authorizationButton)
// Use auto layout to make authorizationButton follow the MyAuthorizationAppleIDButton's dimension
authorizationButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
authorizationButton.topAnchor.constraint(equalTo: self.topAnchor, constant: 0.0),
authorizationButton.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),
authorizationButton.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0.0),
authorizationButton.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0.0),
])
}
}