Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

環境

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

o_chicchi
AWS、Bluemix、Siwft(iOS)、SAPとか楽しんでる人です。 iPhone用ゲームアプリ公開中: https://itunes.apple.com/jp/app/simoncats/id1078064315?mt=8
http://blog.maripara.org/
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away