7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

環境

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

7
6
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?