[iOS/Swift] @IBInspectable, @IBDesignable 사용하기 - UIButton 커스텀하기, UITextField 커스텀하기

@IBInspectable, @IBDesignable 알아보고 사용하기 
- UIButton 커스텀하기, UITextField 커스텀하기
- UIButton 테두리 만들기
- UITextField에 이미지 추가하기

 

---

💡1. IB ?

@IBOutlet, @IBAction, @IBInspectable, @IBDesignable와 같이 IB로 시작하는 Attribute들이 있습니다.

Xcode에서 IB는 Interface Builder를 의미하고 스토리보드(Storyboard)를 말합니다.

따라서, 스토리보드와 코드를 연결시킬 때, 우리는 IB로 시작하는 Attribute들을 사용합니다.

이 친구들을 사용하여 스토리보드에서 실시간으로 랜더링 해봅시다.😊

---

💡2. @IBInspectable ?

@IBInspectable은 이름에서 알 수 있듯이, Inspector + Able 인스펙터에서 가능하다~라는 뜻으로

코드와 스토리보드의 인스펙터 영역을 이어주는 기능을 합니다.

기존의 코드로 작성해야 하는 속성(Attribute)들을 스토리보드에서 추가하고 프로퍼티의 값을 쉽게 변경 가능합니다.

 

UIButton를 예를 들면, 원래 버튼을 커스텀할 때, 아래와 같이 작성하잖아요~

customBtn.layer.borderColor = UIColor.black.cgColor
customBtn.layer.borderWidth = 1
customBtn.layer.cornerRadius = 10

이제 이 코드 작성 없이 스토리보드로 커스텀 가능합니다. WOW~

---

💡3. @IBDesignable ?

위 @IBInspectable을 사용하여 속성들을 변경 가능하지만, 빌드 전까지 실제 모습 확인 불가!!!!!😭

따라서, 우리는 @IBDesignable을 사용합니다.👍🏻

스토리보드에서 생성한 객체(컴포넌트)와 소스코드를 연결하여 해당 객체의 현재 속성을 스토리보드에 실시간 반영하여 뷰를 그려줍니다. @IBDesignable 클래스로 연결하면 실행하지 않고도 뷰를 정의한 모습 그대로 실시간 랜더링하여 스토리보드에서 확인할 수 있습니다.

@IBDesignable를 클래스 상단에 적음으로써 이 클래스는 StoryBoard에 상태바를 만들어 주는 클래스임을 Xcode에 알려줍니다.

---

💡 HOW TO USE 1 ? -  1. UIButton 커스텀하기

1) @IBInspectable, @IBDesignable 속성 작성

먼저, 버튼과 연결할 UIButton을 상속받는 클래스를 하나 작성합니다. 

클래스 위에는 @IBDesignable 선언하여 실시간 랜더링이 가능하게 합니다.

클래스 안에는 추가하고 싶은 속성들을 @IBInspectable 을 이용해 인스펙터 영역에 추가하고 싶은 Attribute 변수를 정의해줍니다.

import UIKit

@IBDesignable
class MyInspector: UIButton {
    @IBInspectable var borderColor: UIColor{
        set {
            self.layer.borderColor = newValue.cgColor
        }
        get {
            let color = self.layer.borderColor ?? UIColor.clear.cgColor
            return UIColor(cgColor: color)
        }
    }
    
    @IBInspectable var borderWidth: CGFloat{
        set {
            self.layer.borderWidth = newValue
        }
        get {
            return self.layer.borderWidth
        }
    }
    
    @IBInspectable var cornerRadius: CGFloat{
        set {
            self.layer.cornerRadius = newValue
        }
        get {
            return self.layer.cornerRadius
        }
    }
}

2) 클래스 연결

아이덴티티 인스펙터뷰에서 커스텀할 버튼과 생성한 클래스를 연결시켜줍니다!!

3)lnspector Area 확인

짠~ 연결 후 스토리보드의 인스팩터 영역을 확인하면 코드로 추가한 속성들이 나타나 있습니다.

 

한번 속성을 변경하여 빌드하면, 잘 적용되었음을 알 수 있습니다!👍🏻

---

💡 HOW TO USE ? - 2. UITextField 커스텀하기

1) @IBInspectable, @IBDesignable 속성 작성

먼저 코코아 터치 클래스로 UITextField를 상속받는 클래스를 만들어 줍니다.

클래스 위에는 @IBDesignable 선언하여 실시간 랜더링이 가능하게 합니다.

클래스 안에는 추가하고 싶은 속성들을 @IBInspectable 을 이용해 인스펙터 영역에 추가하고 싶은 Attribute 변수를 정의해줍니다.

그리고 값이 변경될 때 didSet에서 값을 설정할 수 있도록 해줍니다.

@IBDesignable
class DesignableUITextField: UITextField {
    
    // Provides left padding for images
    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.leftViewRect(forBounds: bounds)
        textRect.origin.x += leftPadding
        return textRect
    }
    
    @IBInspectable var leftImage: UIImage? {
        didSet {
            updateView()
        }
    }
    
    @IBInspectable var leftPadding: CGFloat = 0
    
    @IBInspectable var color: UIColor = UIColor.lightGray {
        didSet {
            updateView()
        }
    }
    
    func updateView() {
        if let image = leftImage {
            leftViewMode = UITextField.ViewMode.always
            let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
            imageView.contentMode = .scaleAspectFit
            imageView.image = image
            imageView.tintColor = color
            leftView = imageView
        } else {
            leftViewMode = UITextField.ViewMode.never
            leftView = nil
        }
        
        // Placeholder text color
        attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])
    }
}

 

2) 클래스 연결

아이덴티티 인스펙터뷰에서 커스텀할 텍스트필드와 생성한 클래스를 연결시켜줍니다!!

3)lnspector Area 확인

짜잔!! 짠~ 연결 후 스토리보드의 인스팩터 어트리뷰트를 확인하면 추가한 속성들이 나타나 있습니다.

한번 속성을 변경하여 빌드하면, 잘 적용되었음을 알 수 있습니다!