iOSでボタンやラベルの枠線を Storyboard で簡単に描く方法

個人的なメモ。役立つ人がいれば。
まだまだ、アプリ開発は初心者のという私のような人向け。

環境

Xcode8.1/Swift3.0

ボタンやラベル

ボタンやラベルを配置出来るが、そのままだと枠線がかけない。StoryBoard使って、画面遷移のプロトタイプを作ろうとして書けなくて悩む。

ソースコード

下記のソースコードをプロジェクトに配置。

CustomClass.swift

//
//  CustomClass.swift
//
//  Created by Satoru Ohguchi on 2016/03/10.
//  Copyright © 2016 maripara.org. All rights reserved.
//

import UIKit

// MARK: カスタムボタンの定義
@IBDesignable
class CustomButton: UIButton {
    
    // 角丸の半径(0で四角形)
    @IBInspectable var cornerRadius: CGFloat = 0.0
    
    // 枠
    @IBInspectable var borderColor: UIColor = UIColor.clearColor()
    @IBInspectable var borderWidth: CGFloat = 0.0

    // バックグラウンドカラー
    @IBInspectable var nonHighlightedBackgroundColor :UIColor?
    @IBInspectable var highlightedBackgroundColor :UIColor?
    
    override func drawRect(rect: CGRect) {
        // 角丸
        self.layer.cornerRadius = cornerRadius
        self.clipsToBounds = (cornerRadius > 0)
        
        // 枠線
        self.layer.borderColor = borderColor.CGColor
        self.layer.borderWidth = borderWidth

        super.drawRect(rect)
    }

    // バックグラウンドカラー
    override var highlighted :Bool {
        didSet {
            if highlighted {
                self.backgroundColor = highlightedBackgroundColor
            }
            else {
                self.backgroundColor = nonHighlightedBackgroundColor
            }
        }
    }
}

// MARK: カスタムラベルの定義
@IBDesignable class CustomLabel: UILabel {
    
    // 角丸の半径(0で四角形)
    @IBInspectable var cornerRadius: CGFloat = 0.0
    
    // 枠
    @IBInspectable var borderColor: UIColor = UIColor.clearColor()
    @IBInspectable var borderWidth: CGFloat = 0.0
    
    override func drawRect(rect: CGRect) {
        // 角丸
        self.layer.cornerRadius = cornerRadius
        self.clipsToBounds = (cornerRadius > 0)
        
        // 枠線
        self.layer.borderColor = borderColor.CGColor
        self.layer.borderWidth = borderWidth
        
        super.drawRect(rect)
    }
}

// MARK: カスタムテキストビューの定義
@IBDesignable class CustomTextView: UITextView {
    
    // 角丸の半径(0で四角形)
    @IBInspectable var cornerRadius: CGFloat = 0.0
    
    // 枠
    @IBInspectable var borderColor: UIColor = UIColor.clearColor()
    @IBInspectable var borderWidth: CGFloat = 0.0
    
    override func drawRect(rect: CGRect) {
        // 角丸
        self.layer.cornerRadius = cornerRadius
        self.clipsToBounds = (cornerRadius > 0)
        
        // 枠線
        self.layer.borderColor = borderColor.CGColor
        self.layer.borderWidth = borderWidth
        
        super.drawRect(rect)
    }
}

使い方

プロジェクトに入れてとりあえず、一回ビルドしてから使うと良いかも。

画面上でカスタムクラスとして指定すると StoryBoard で指定可能になります。

Xcodeの画面で、ボタン、ラベル、テキストビューで以下のように設定できるようになる。個人的には、ボタン用に毎回、画像とか用意しなくて済むし、StoryBoard で確認しながら考えることができるので、ありがたい。

参考

以下の記事がなければできませんでした。感謝。

[iOS][Swift]Storyboardでボタン背景色の設定がしたい
http://qiita.com/wasnot/items/3537d932e9550a5c4c27

自分のアプリに反映

以下のアプリで使っています。スクリーンショット観て頂ければ、よく分かります。

[AppStore] Simoncats
https://itunes.apple.com/jp/app/simoncats/id1078064315?mt=8