今回の記事は、XcodeでUIbuttonの輪郭や線を弄れるようにXcodeのプロジェクト内に、「Custom Class」を用意し、Xcodeのサイドバーの設定からボタンの丸みや線の色太さなどを設定することができるように設定します。
完成形は下記図のように再度バー内の「Show the attribute inspection」から操作できるようになってい状態です。
既存の「Show the attribute inspection」は下記のようになっているので違いが分かると思います。
上に設定項目が追加されたみたいな感じですね。この方法を使えばボタンごとにいちいちSwiftコードで輪郭などを調整することがなくなるのでかなり楽になります。では早速その便利な設定方法をご紹介していきます。
Xcode側でUIbuttonを丸く設定する「Custom Class」の設定手順。
上記の完成形と完成前の画像を比較していただいて分かったと思いますが、追加項目が増えているようになっていると思います。これは「Custam Class」というもの（要はファイル）を準備して、そのファイルをXcodeのプロジェクト内に追加するのみで設定完了です。
では手順をご紹介します。
まずはファイルを追加していいます。
メニューの「file」から「new」を選択し、さらに「File」を選択します。
「Cocoa touch class」を選択し、「Next」を押します。
名前（Class）を設定するところまで進んでいただき、名前（Class）を「Custombutton」で、Subclassを「UIButton」に設定します。これで「Next」を押してファイルを作成していきます。
以上でXcode内のプロジェクト内に新しいファイルが作成されています。作成されていない方は、保存場所がおかしかったなど原因は考えられます。追加するところまでは進めてください。
追加したファイルに下記を追加してください。各設定項目を記載しています。ここをいじればさらにサイドバー内に項目を追加できます。
import UIKit
class CustomButton: UIButton {
// 角丸の半径(0で四角形)
@IBInspectable var cornerRadius: CGFloat = 0.0
// 枠
@IBInspectable var borderColor: UIColor = UIColor.clear
@IBInspectable var borderWidth: CGFloat = 0.0
override func draw(_ rect: CGRect) {
// 角丸
self.layer.cornerRadius = cornerRadius
self.clipsToBounds = (cornerRadius > 0)
// 枠線
self.layer.borderColor = borderColor.cgColor
self.layer.borderWidth = borderWidth
super.draw(rect)
}
}次に丸くしたいボタンをStoryboard上に設置し、そのボタンをクリックすると右再度バーが開かれると思います。この右サイドバー内の「Show the identifer inspection」でクラスを設定していきます。
先ほど作成したファイルのみが登録されていると思いますのでそのファイルをクラスに設定します。すると「Show the attribute inspection」の欄に上記の完成形のように項目が追加されています。
あとは数値をいじるのみです。radiusを15°とかにするとちょうど良いボタンの丸みになるのではないでしょうか？まあそこは個人の感覚になってくると思いますのでお好きな角度を試してみてください。
コメント