UILabel、UIButtonなどを簡単に角丸、枠線をつける

テーマ

UILabel、UIButtonなどを簡単に角丸、枠線をつける方法をご紹介します。

背景

今まで、ちょっと角丸にしたい、線をつけたいというときに、 毎回ソースコードにcornerRadiusやmasksToBoundsなどに値をセットしていました。

面倒だなーと思っていると、 StoryBoard上で、簡単にできる方法があったので、ご紹介します。 extensionを利用する方法です。

まずは、完成品は、こちら

手順

1. UIViewのextensionを作る
2. 対象のViewをStoryBoardで設置する
3. StoryBoardで対象Viewの値を設定する 以上です。

では、やってみます。

1. UIViewのextensionを作る

今回は、角丸と、枠線を引くためのプロパティを追加します。

import UIKit

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
    
    @IBInspectable
    var borderWidth: CGFloat {
        get {
            return self.layer.borderWidth
        }
        set {
            self.layer.borderWidth = newValue
        }
    }
    
    @IBInspectable
    var borderColor: UIColor? {
        get {
            return UIColor(CGColor: self.layer.borderColor!)
        }
        set {
            self.layer.borderColor = newValue?.CGColor
        }
    }
    
}

2. 対象のViewをStoryBoardで設置する

今回は、UILabelとUIButtonを設置します。 設置すると、下記のようなフィールドが追加されます。

3. StoryBoardで対象Viewの値を設定する

あとは、下記のプロパティに値を設定すると、完成です。

プロパティ	説明
Corner Radius	角丸の角度
Border Width	枠線の幅
Border Color	枠線の色

まとめ

いかがでしたか、プロジェクトに一度今回作成したextensionを追加しておくと、 UIViewを継承したすべてのViewで利用できます。

これでコーディングの効率が上がると思います。 ぜひ、利用してみてください。

やっぱりPCは、大事

2011年から使っていたMac Book Proを卒業し、新しいMac Book Proを購入しました。 快適です。アクセサリー類もポチポチしちゃいました。

www.amazon.co.jp

Amazon.co.jp： MacBook 対応 アートステッカーCARRY 【並行輸入品】: パソコン・周辺機器