More than 5 years have passed since last update.

【Swift】Sign in with AppleのボタンをStoryboardで設定する

Last updated at 2020-03-18Posted at 2020-03-17

そこで
今回はCustom Classを作成することで
StoryboardでもSign in with Appleのボタンを設定する方法について
整理してみました。

コードでの追加方法は以前↓に書かせていただきました。
https://qiita.com/shiz/items/5e094910f742c2ad72a4

実装方法

`UIButton`クラスのサブクラスを定義する

UIButtonクラスのサブクラスを定義します
(名前は任意です)


class SignInWithAppleIDButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
}

`ASAuthorizationAppleIDButton`をプロパティに保持する

実際にSign in with Appleを実行するための
ASAuthorizationAppleIDButtonをプロパティに保持します。


class SignInWithAppleIDButton: UIButton {

    private var appleIDButton: ASAuthorizationAppleIDButton!

    ...
}

暗黙的にOptionalをUnwrapしていますが
次に定義するdraw(_:)メソッドで必ず初期化をするため
問題はありません。

`draw(_:)`メソッドをoverrideする

draw(_:)メソッドの中で
ボタンを描画します。


class SignInWithAppleIDButton: UIButton {
    super.draw(rect)

    appleIDButton = ASAuthorizationAppleIDButton(authorizationButtonType: .default, authorizationButtonStyle: .black)

    addSubview(appleIDButton)

    appleIDButton.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        appleIDButton.topAnchor.constraint(equalTo: self.topAnchor),
        appleIDButton.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        appleIDButton.bottomAnchor.constraint(equalTo: self.bottomAnchor),
        appleIDButton.trailingAnchor.constraint(equalTo: self.trailingAnchor),
    ])
}

ここでは
authorizationButtonTypeと
authorizationButtonStyleに
固定値を設定していますが
後ほどカスタム可能にします。

Storyboardで設定可能にする

次にStoryboardで表示できるように
@IBDesignableをクラスに設定します。


@IBDesignable
class SignInWithAppleIDButton: UIButton {
    super.draw(rect)

    appleIDButton = ASAuthorizationAppleIDButton(authorizationButtonType: .default, authorizationButtonStyle: .black)

    addSubview(appleIDButton)

    appleIDButton.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        appleIDButton.topAnchor.constraint(equalTo: self.topAnchor),
        appleIDButton.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        appleIDButton.bottomAnchor.constraint(equalTo: self.bottomAnchor),
        appleIDButton.trailingAnchor.constraint(equalTo: self.trailingAnchor),
    ])
}

ここまででStoryboardにUIButtonを設置してCustom Classに
SignInWithAppleIDButtonを指定すると
下記のようにStoryboard上で表示させることができます。

※ 制約などについてはAppleのHuman Interface Guidelinesに沿っています。
こちらについては後ほど記載します。

ボタンをカスタマイズする

ここからはさらに
@IBInspectableを使って
Storyboard上でボタンをカスタマイズ可能にしたいと思います。

ASAuthorizationAppleIDButtonの定義を見てみると

ASAuthorizationAppleIDButton.ButtonType
ASAuthorizationAppleIDButton.Style
cornerRadius

の設定が可能です。


extension ASAuthorizationAppleIDButton {

    
    @available(iOS 13.0, *)
    public enum ButtonType : Int {

        
        case signIn = 0

        case `continue` = 1

        
        @available(iOS 13.2, *)
        case signUp = 2

        
        public static var `default`: ASAuthorizationAppleIDButton.ButtonType { get }
    }

    
    @available(iOS 13.0, *)
    public enum Style : Int {

        
        case white = 0

        case whiteOutline = 1

        case black = 2
    }
}

@available(iOS 13.0, *)
open class ASAuthorizationAppleIDButton : UIControl {

    
    public convenience init(type: ASAuthorizationAppleIDButton.ButtonType, style: ASAuthorizationAppleIDButton.Style)

    
    public init(authorizationButtonType type: ASAuthorizationAppleIDButton.ButtonType, authorizationButtonStyle style: ASAuthorizationAppleIDButton.Style)

    
    /** @abstract Set a custom corner radius to be used by this button.
     */
    open var cornerRadius: CGFloat
}

そこでこの3つのプロパティをカスタマイズできるようにします。


@IBDesignable
class SignInWithAppleIDButton: UIButton {

    ...

    @IBInspectable
    var cornerRadius: CGFloat = 6.0

    @IBInspectable
    var type: Int = ASAuthorizationAppleIDButton.ButtonType.default.rawValue

    @IBInspectable
    var style: Int = ASAuthorizationAppleIDButton.Style.black.rawValue

    ...

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        let type = ASAuthorizationAppleIDButton.ButtonType.init(rawValue: self.type) ?? .default
        let style = ASAuthorizationAppleIDButton.Style.init(rawValue: self.style) ?? .black
        appleIDButton = ASAuthorizationAppleIDButton(authorizationButtonType: type, authorizationButtonStyle: style)
        appleIDButton.cornerRadius = cornerRadius

        addSubview(appleIDButton)

        appleIDButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            appleIDButton.topAnchor.constraint(equalTo: self.topAnchor),
            appleIDButton.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            appleIDButton.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            appleIDButton.trailingAnchor.constraint(equalTo: self.trailingAnchor),
        ])
    }
}

こうするとStoryboard上で設定が変更可能になります。

IBInspectableではenumが指定できないため
RawValueのIntを設定し
enumのcaseに存在しない値に関してはデフォルトの値を設定しています。

cornerRadiusの値はAppleがデフォルトで提供している値のようです。

ボタンをタップ可能にする

ここまででデザインはできましたが
ボタンをタップしても動作しません。

そこでボタンがタップされたことを
プロパティで保持しているASAuthorizationAppleIDButtonへ
伝えるようにします。


@IBDesignable
class SignInWithAppleIDButton: UIButton {

    private var appleIDButton: ASAuthorizationAppleIDButton!

    ...
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)

        ...

        appleIDButton.addTarget(self, action: #selector(appleIDButtonTapped), for: .touchUpInside)

        ...
    }

    @objc
    func appleIDButtonTapped(_ sender: Any) {
        sendActions(for: .touchUpInside)
    }
}