【Swift】UI要素をまとめて角丸（Corner Radius）にしたい

2600 ワード
Storyboard Swift Storyboard テキストリンク

どういうことか

これまで自分はStoryboardからControllerへ繋ぎこみ、userButton.layer.cornerRadius = 20 とか書いていた。
もしページ内に角丸にするボタンがいくつも並んでいる場合、いちいち繋いでコードを書くのも面倒である。なのでStoryboardで設定したい。

【Xcode】StoryboardでViewを角丸にする
https://qiita.com/turmeric/items/046acb987c4353b3f308

その場合はこういう方法もあるが、欲を言えばちゃんと角丸されたプレビューが表示されてほしい。

カスタムクラスを作る

ViewCustomUtility.swift といった感じのファイルを作る。
ここに記述を書いておくとStoryboardで角丸を設定できるメニューができる。
コピペでもいける。

ViewCustomUtility.swift
import UIKit

@IBDesignable

// UIButtonと書いているが、たとえばUIViewと書けば "View" のパーツに適応される
class ViewCustom: UIButton {

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}

Storyboardで設定する

角丸にしたいUIのパーツを選択したら Custom Class で ViewCustom を選択する。

なんと Corner Radius の選択項目が増えている。しかもちゃんとプレビューで表示される。
――で、本題の『まとめて角丸』をするには複数のパーツを選択したうえで上記の手順を踏めばよい。

ちなみに

角丸だけじゃなくて他にもいろいろ作ることができる。

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

おわり(´・ω・｀)