Bounds와 Frame 의 차이점

틀린내용, 훈수, 태클 모두 환영

Bounds와 Frame의 차이점은 기본적으로 슈퍼뷰와의 관계에 있어요.

Bounds의 경우 자기 자신의 좌표만을 나타내지만,
Frame은 슈퍼뷰의 상대적인 좌표를 나타냅니당.

private func configureUI() {
        let viewOne: UIView = {
            let view = UIView()
            view.frame = CGRect(x: 200, y: 200, width: 200, height: 200)
            view.backgroundColor = .blue
            return view
        }()
        
        self.view.addSubview(viewOne)
    }

Frame의 x와 y 좌표가 200씩 입력되었고, 상위 뷰에 add 되었으니

요로콤 슈퍼뷰의 (0, 0) 원점을 기준으로 x, y가 200씩 띄어져 나오게 됩니다.

	let viewTwo: UIView = {
            let view = UI`View()
            view.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
            view.backgroundColor = .red
            return view
        }()
        
        viewOne.addSubview(viewTwo)

두번째 뷰를 첫번째 뷰에 넣고 Frame을 100, 100으로 지정하면

이게 또 ViewOne(슈퍼뷰)을 기준으로 100, 100 이 띄어져 나옵니다.

그럼 Bounds는 머냐
Bounds는 항상 자기 자신의 좌표계를 나타내게 됩니다.
따라서 viewOne, viewTwo의 Bounds를 출력해보면

(0.0, 0.0, 200.0, 200.0)
(0.0, 0.0, 100.0, 100.0)

x, y 좌표는 어캐하든 0,0 이 되는 것을 볼 수 있어요 상대적인 좌표가 아니고 자기 좌표만 나타내니까..!

그럼 Bounds 좌표를 바꾸면 어캐댐?

viewOne.bounds = CGRect(x: 50, y: 50, width: 200, height: 200)

두둥

viewOne의 Bounds를 바꿨는데 viewTwo가 바꼈네?
이게 viewTwo는 viewOne의 상대적인 좌표를 가지고 자신의 frame을 계산하는데, viewOne bounds에 50, 50 을 줘버려서 viewTwo가 같이 위로 올라가버린걸 알 수 있네요.

ㅎㅎ; 아이펜슬이 고장나서 그림 그리고싶은데 못그리넹
아무튼 이런식임

아 그럼 좌표계 차이는 알겠음 ㅇㅇ 근데 size는 뭔 차이?
viewOne을 한번 돌려봅시다.

viewOne.transform = CGAffineTransform(rotationAngle: 70)

ㅇㅇ 잘돌아갔네

그럼 Frame Bounds를 함 출력해볼까

ViewOne Bounds = (50.0, 50.0, 200.0, 200.0)
ViewOne Frame = (109.27901153558113, 109.27901153558112, 281.4419769288378, 281.44197692883785)
ViewTwo Bounds = (0.0, 0.0, 100.0, 100.0)
ViewTwo Frame = (100.0, 100.0, 100.0, 100.0)

??
frame 왜 저럼?

이게 서브뷰의 Frame은 슈퍼뷰의 (0,0)를 기준으로 얼마나 떨어져있나를 보는건데 서브뷰를 포함하는 "사각형"을 나타내서 그럼 따라서 viewTwo를 회전시키면 자기을 기준으로한 Bounds와는 다르게 frame이 달라질 수 있다는 거 ㅇㅇ
(처음 viewOne의 Frame 좌표는 200, 200 였는데 돌리니까 잘려나가서 Frame을 x: 150, y: 150 바꾸고 회전시킴)

결론: Frame은 슈퍼뷰의 원점을 기준으로 얼마를 떨어져있고(origin), 자신이 포함되는 사각형 나타낸다(size). Bounds는 자기를 기준으로 origin과 size가 결정된다.