[iOSアプリ開発][Xcode 8.0][Swift 3.0] ボタンを角丸にする

私のアプリがショボく見えるのは、やはりデザインが良くないからだと思う。

そこで少しでもマシにするために、まずボタンを装飾することにした。

やったのは、以下のページを参考に、ボタンを角丸にすることだ。

Storyboard上だけでUIButtonを角丸に!カスタムクラスで設定項目を拡張する! | イリテク
https://iritec.jp/web_service/9167/

最新の Xcode、Swift では上記サイトのコードそのままでは動かないので、修正が必要だった。以下にその方法を公開する。

(1)Main.storyboard に Button を追加する。

(2)File > New > File > iOS > Source > Swift File を選んで、Next。Button_Custom.swift とでも名前を付けて Create。

(3)Project navigator > [プロジェクト名] > Button_Custom.swift を選択。以下のコードを記入する。

 1import UIKit
 2
 3@IBDesignable
 4class Button_Custom: UIButton {
 5    
 6    @IBInspectable var textColor: UIColor?
 7    
 8    @IBInspectable var cornerRadius: CGFloat = 0 {
 9        didSet {
10            layer.cornerRadius = cornerRadius
11        }
12    }
13    
14    @IBInspectable var borderWidth: CGFloat = 0 {
15        didSet {
16            layer.borderWidth = borderWidth
17        }
18    }
19    
20    @IBInspectable var borderColor: UIColor = UIColor.clear {
21        didSet {
22            layer.borderColor = borderColor.cgColor
23        }
24    }
25}

(4)Project navigator で Main.storyboard を選択。1で作った Button を選択。

(5)Identity inspector > Custom Class > Class > Button_Custom を選択。

(6)Attributes inspector > Button Custom ができあがっているので、Corner Radius で角丸の半径を調整できる。