336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



안녕하세요. iOS 개발을 하고 있는 Myoung 입니다.


UI를 그리다보면 BorderWidth 와 BorderColor를 이용해서 View의 테투리를 그려줄때가 많습니다.

일반적으로 border를 이용해서 그리는 방법은 이렇게 사용을 합니다. 그럼 테투리가 자연스럽게 Width 만큼생기게 되죠.

1
2
3
4
let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
view.layer.borderColor = UIColor.red.cgColor
view.layer.borderWidth = 1.0
view.addSubview(view)
cs


하지만 UI를 그리다보면 한쪽만 혹은 한쪽을 남겨두고 그릴때가 있습니다. 

extension을 통해 CALayer에 메소드를 추가해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
extension CALayer {
    func addBorder(_ arr_edge: [UIRectEdge], color: UIColor, width: CGFloat) {
        for edge in arr_edge {
            let border = CALayer()
            switch edge {
            case UIRectEdge.top:
                border.frame = CGRect.init(x: 0, y: 0, width: frame.width, height: width)
                break
            case UIRectEdge.bottom:
                border.frame = CGRect.init(x: 0, y: frame.height - width, width: frame.width, height: width)
                break
            case UIRectEdge.left:
                border.frame = CGRect.init(x: 0, y: 0, width: width, height: frame.height)
                break
            case UIRectEdge.right:
                border.frame = CGRect.init(x: frame.width - width, y: 0, width: width, height: frame.height)
                break
            default:
                break
            }
            border.backgroundColor = color.cgColor;
            self.addSublayer(border)
        }
    }
}
cs


사용법은 간단합니다. 원하는 뷰에 layer를 통해서 사용 하시면 됩니다. 

1
your_view.layer.addBorder([.top, .bottom], color: UIColor.white, width: 1.0)
cs

UIRectEdge의 속성은 총 다섯개가 있습니다.

1
2
3
4
5
UIRectEdge.all, //전체 
UIRectEdge.top, //상단
UIRectEdge.bottom, //하단
UIRectEdge.left, //왼쪽
UIRectEdge.right, //오른쪽
cs

원하는 방향을 Array로 묶어서 layer를 통해 추가해주시면 됩니다. 이왕이면.. 한쪽만 뻥뚫린 UI가 없었으면 하지만 생각보다 간단하게 해결 할 수 있습니다.


틀린점이나 오타 부족한점이 있으면 언제든지 댓글를 남겨주세요.



+ Recent posts