🍎 UIView 상단 border 넣기
📑 학습 내용
- 뷰와 뷰 사이의 경계선을 추가해야 함
- lineView를 여러 개 만들어 각 뷰 사이 사이 넣어주면 해결되지만, lineView가 여러 개 생기면 코드가 복잡해질 것 같음
- JustDrop 그룹 뷰를 만들어서 사용하기 때문에 이 그룹 뷰의 상단 테두리만 색을 넣어주면 될 것 같음
- 상단 테두리만 지정하는 메서드는 없기 때문에 UIView 클래스를 확장하여 사용
UIView의 상단에 서브뷰를 추가하여 테두리처럼 보이게 만드는 방법
extension UIView {
func addTopBorder(color: UIColor, width: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
border.frame = CGRect(x: self.frame.minX, y: self.frame.minY, width: self.frame.width, height: width)
self.addSubview(border)
}
}
- addTopBorder(:) 메서드를 만들어 border의 색과 두께(width)를 파라미터로 받음
- 테두리로 표시할 뷰(border)를 생성하고 background 색은 파라미터로 받은 color 사용
- border.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
- autosizingMask : 뷰의 크기를 어떻게 조정할지 결정하는 정수 비트 마스크
- flexibleWidth : 부모 뷰의 너비에 따라 경계선의 너비가 유동적으로 조정
- flexibleBottomMargin : 부모 뷰의 높이에 따라 경계선의 위치가 유동적으로 조정
- x: self.frame.minX : border의 x 좌표를 부모 뷰의 왼쪽 경계에 맞춤
- y: self.frame.minY : border의 y좌표를 부모 뷰의 위쪽 경계에 맞춤
- width: self.frame.width : border의 width를 부모 뷰의 너비와 동일하게 설정
- height: width : border의 height을 매개변수로 받은 두께로 설정
사용 방법
- 확장한 메서드를 사용하려면 부모 뷰의 크기와 위치가 고정되어 있어야 함
- 따라서, 뷰의 레이아웃이 모두 짜여진 후에 호출되어야 함
override func viewDidLayoutSubviews() {
let lineColor = UIColor(hex: "#F2F2F2") ?? .blue
homeView.grpJustDrop.addTopBorder(color: lineColor, width: 1)
homeView.grpHappyLook.addTopBorder(color: lineColor, width: 1)
}
📚 참고 자료