UIButtonを継承したオリジナルボタンをstoryboard上で使用する⑤

前回やっと自作クラスのボタンをstoryboard上で配置することができましたね。

さぁ、あとはまんまるのボタンにして表示するだけです。

前回言いましたが、storyboard上でボタンを配置する際にはwidthとheightを揃えて
正方形にしておかなければなりませんので、そこだけ注意してください。

あとは簡単で、CALayerクラスのcornerRadiusプロパティで指定することでボタンの角を
丸くすることができます。今回はまんまるボタンですので、横幅（もしくは縦幅）の1/2の値を
指定します。
また、はみ出した部分を切り取るために同じくlayerクラスのmasksToBoundsプロパティでtrueを
セットします。

具体的には以下のようなコードになります。
なお、現在はストーリーボード上にタテ・ヨコ共に100pxで配置しています。

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.backgroundColor = UIColor.blueColor()
        self.setTitle("ボタン", forState: UIControlState.Normal)
        self.layer.cornerRadius = self.bounds.width / 2
        self.layer.masksToBounds = true
    }

5行目で自身のボタンの横幅を取得して、その半分の数値で角丸を作成しています。
横幅=縦幅で配置をしていますので、widthの部分をheightに変更しても構いません。
6行目ではみ出した部分の描画をカットしています。

では実行してみましょう！

おぉ！まんまるのボタンが作成されました！！めでたしめでたしー

【番外編】正方形で配置されていない場合は通常の角丸にする

まんまるのボタンを作成できたことはできましたが、このままのコードですとstoryboard上で
正方形のボタンが配置されていない時にはとんでもない形になってしまいます。

これはこれでおしゃれ…とは程遠いですので、
「正方形のボタンが配置された際はまんまるボタンに、長方形のボタンが配置された際は角丸ボタンに」
するようにコードを書き換えてみます。

class MyButton:UIButton {

    init(){
        super.init(frame: CGRectMake(100, 100, 100, 100))
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.backgroundColor = UIColor.blueColor()
        self.setTitle("ボタン", forState: UIControlState.Normal)
        
        self.layer.masksToBounds = true
        if self.bounds.width == self.bounds.height{
            self.layer.cornerRadius = self.bounds.width / 2
        }else if self.bounds.width > self.bounds.height{
            self.layer.cornerRadius = self.bounds.height / 7
        }else{
            self.layer.cornerRadius = self.bounds.width / 7
        }
    }
}

正方形では無い場合は、短い方の辺の長さを取得して、その1/7のサイズで角を切り取っています。