Posted at

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

More than 1 year has 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