Skip to content

Instantly share code, notes, and snippets.

@KentarouKanno
Last active November 24, 2021 07:31
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save KentarouKanno/61294259ec1621a20551 to your computer and use it in GitHub Desktop.
Save KentarouKanno/61294259ec1621a20551 to your computer and use it in GitHub Desktop.

@IBDesignable & @IBInspectable

★ UIView

import UIKit

@IBDesignable class DesignableView: UIView {
    
    @IBInspectable var cornerRadius : CGFloat = 3.0
    @IBInspectable var borderWidth  : CGFloat = 1.0
    @IBInspectable var borderColor  : UIColor = UIColor.redColor()
    
    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        
        self.layer.masksToBounds = true
        self.layer.cornerRadius = cornerRadius
        self.layer.borderWidth  = borderWidth
        self.layer.borderColor  = borderColor.CGColor
    }
    
    override func awakeFromNib() {
        
    }
}

image

★ UITextField - Swift3 -

import UIKit

class CustomTextField: UITextField {

    @IBInspectable var cornerRadius: CGFloat = 3.0
    @IBInspectable var borderWidth : CGFloat = 1.0
    @IBInspectable var borderColor : UIColor = UIColor.black
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        layer.masksToBounds = true
        layer.cornerRadius = cornerRadius
        layer.borderWidth  = borderWidth
        layer.borderColor  = borderColor.cgColor
    }
    
    override func awakeFromNib() {
        
    }
}
// didSetを使用して以下の様にも書ける

import UIKit

@IBDesignable class DesignableView: UIView {
    
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            self.layer.cornerRadius = cornerRadius
            self.layer.masksToBounds = true
        }
    }
    
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }
    
    @IBInspectable var borderColor: UIColor = UIColor.redColor() {
        didSet {
            self.layer.borderColor = borderColor.CGColor
        }
    }
    
    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        
    }
    
    override func awakeFromNib() {
    }
}

★ UILabel

import UIKit

@IBDesignable class DesignableView: UILabel {
    
    @IBInspectable var cornerRadius : CGFloat = 3.0
    @IBInspectable var borderWidth  : CGFloat = 1.0
    @IBInspectable var borderColor  : UIColor = UIColor.blueColor()
    
    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        
        self.layer.masksToBounds = true
        self.layer.cornerRadius = cornerRadius
        self.layer.borderWidth  = borderWidth
        self.layer.borderColor  = borderColor.CGColor
    }
    
    override func awakeFromNib() {
        
    }
}
import UIKit

@IBDesignable class DesignableLabel: UILabel {
    
    @IBInspectable var cornerRadius : CGFloat = 3.0
    @IBInspectable var borderWidth  : CGFloat = 1.0
    @IBInspectable var borderColor  : UIColor = UIColor.blueColor()

    override func drawTextInRect(rect: CGRect) {
        super.drawTextInRect(rect)
        
        self.layer.masksToBounds = true
        self.layer.cornerRadius = cornerRadius
        self.layer.borderWidth  = borderWidth
        self.layer.borderColor  = borderColor.CGColor
    }
    
    override func awakeFromNib() {
        
    }
}

image

★ extension

// *extensionではリアルタイムにStoryboardには反映されない

extension UIView {
    @IBInspectable public var cornerRadius: CGFloat {
        get { return layer.cornerRadius }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
    
    @IBInspectable public var borderWidth: CGFloat {
        get { return layer.borderWidth }
        set { layer.borderWidth = newValue }
    }
    
    @IBInspectable public var borderColor: UIColor {
        get { return UIColor(CGColor: layer.borderColor!) }
        set { layer.borderColor = newValue.CGColor }
    }
}

★ UIButton角丸

@IBDesignable
class DesignableButton: UIButton {
    
    @IBInspectable
    var cornerRadius: CGFloat {
        get { return layer.cornerRadius }
        set { layer.cornerRadius = newValue }
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment