読者です 読者をやめる 読者になる 読者になる

onthewavesのコードスニペット

SwiftやObjective-Cを中心にiPhoneアプリ開発に関するコードスニペットを書きます。

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

テーマ

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

背景

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

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

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

f:id:onthewaves:20151205122324p:plain

手順

  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を設置します。 設置すると、下記のようなフィールドが追加されます。

f:id:onthewaves:20151205121116p:plain

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

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

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

f:id:onthewaves:20151205121739p:plain

まとめ

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

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

やっぱりPCは、大事

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

www.amazon.co.jp

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