[iOS] UIView에 border 추가하기 / 모서리 둥글게 하기 - 코드, 스토리보드

매번 까먹고 매번 찾아보는 게 귀찮아서 정리하는 글입니다.

 

UIView에 테두리를 넣어야 할 때가 생기는데, 이 때 코드로도 넣을 수 있고 스토리보드로도 넣을 수 있다.

우선 코드로 넣는 방법 부터 알아보자.

 

1. 코드로 Border 추가하기

간단하게 storyboard에서 UIView를 하나 추가해준 뒤에 ViewController에 outlet 연결을 해준다.

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var testView: UIView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 테두리 둥글게
        testView?.layer.cornerRadius = 5
        
        // 테두리 두께
        testView?.layer.borderWidth = 10
        
        // 테두리 컬러
        testView?.layer.borderColor = UIColor.blue.cgColor
    }
}

layer의 cornerRadius로 테두리를 둥글게 해주고, borderWidth로는 테두리 두께를 조정한다. color는 borderColor에 지정하면 된다.

코드를 실행하면 아래와 같은 결과를 확인할 수 있다.

 

잘 적용이 된다.

2. 스토리보드에서 Border 추가하기 (@IBInspectable, @IBDesignable)

우선 스토리보드에서 Border를 만져주려면 @IBInspectable, @IBDesignable  두 가지를 먼저 알고 넘어가야한다.

@IBInspectable

IB가 앞에 붙어있다. IB는 Interface Builder의 약자로, 우리가 IBOutlet이나 IBAction에서 보기 때문에 낯설지 않다.

Inspector + able로 Instector에서 보는 걸 가능하게 해준다는 뜻인 것 같다. Inspector는 아래 이미지에 있는 영역이다. 스토리보드에서 UI 작업할 때 항상 보는 부분이다.

Border Color, Width, Radius를 Inspector에서 지정해주기 위해서 다음과 같은 코드를 추가했다. 

import UIKit

extension UIView {
    @IBInspectable var borderColor: UIColor {
        get {
            let color = self.layer.borderColor ?? UIColor.clear.cgColor
            return UIColor(cgColor: color)
        }
        
        set {
            self.layer.borderColor = newValue.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return self.layer.borderWidth
        }
        
        set {
            self.layer.borderWidth = newValue
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return self.layer.cornerRadius
        }
        
        set {
            self.layer.cornerRadius = newValue
        }
    }
}

위의 코드를 추가해주고 나면 스토리보드에서 각각 설정해줄 수 있는 섹션이 나타나는 것을 확인할 수 있다. 만약 특정 Custom View에서만 inspector에 노출하고 싶다면 CustomView의 클래스 내부에서 지정해주면 된다. TestView라는 Custom View에서만 inspector에 border 관련 값이 보였으면 좋겠다! 한다면 아래처럼 추가해주고 원하는 View를 TestView로 지정하면 된다.

class TestView : UIView {
    @IBInspectable var borderColor: UIColor {
        get {
            let color = self.layer.borderColor ?? UIColor.clear.cgColor
            return UIColor(cgColor: color)
        }
        
        set {
            self.layer.borderColor = newValue.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return self.layer.borderWidth
        }
        
        set {
            self.layer.borderWidth = newValue
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return self.layer.cornerRadius
        }
        
        set {
            self.layer.cornerRadius = newValue
        }
    }
}

스토리보드에서 View의 Class를 TestView로 지정해주면 Inspector에서 TestView 섹션으로 border를 지정할 수 있게 나타난다.

원하는 값으로 조정하고 실행하면 잘 나타나는 것을 확인할 수 있다.

앱의 빌드가 빠르게 되는 경우에는 바로 실행시켜서 확인해보면 상관 없지만 빌드가 엄청 오래걸리는 경우에는 스토리보드에서 바로 변경된 값이 적용되어 보여지는 것이 답답하지 않고 좋다. 이때는 IBInspectable이 들어있는 곳에 @IBDesignable을 붙여준다.

붙여주고 스토리보드로 돌아가면 Designables라는 부분이 보이고 이제 값을 변경하면 바로 스토리보드에서 확인할 수 있어야 하는데,

어... Build failed라는 에러가 나있다.. 대체 왜지

아무리 찾아도 안된다는 사람만 있고 해결한 사람이 없다.. xcode 12버전 사용하는 사람이 Developer Forums에 글을 올려놨는데 Same Issue만 잔뜩 달렸다........ (https://developer.apple.com/forums/thread/661018) 방법을 더 찾아봐야겠지만 그냥 코드로 추가하는게 마음 편할 것 같다ㅎ