frame이란?
공식문서에서는 'superView의 좌표계에서 뷰의 위치와 크기를 설명하는 프레임 사각형'으로 정의하고 있네요
superView는 상위뷰를 의미합니다 !!
코드로 한번 써볼게요👨🏻💻
class ViewController: UIViewController {
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
lazy var firstView = UIView(frame: rect)
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(firstView)
firstView.backgroundColor = .systemBlue
}
}
superView의 (0,0) 좌표에 width와 height가 100인 사각형이 만들어졌네요.
그럼 이제 두번째 사각형을 만들어 볼건데요 두번째 사각형의 좌표를 (100,100)을 주게되면 파란 사각형 오른쪽 아래 꼭지점에 딱 붙어서 생성될거 같아요.
과연 그럴까 구현해 보겠습니다!👨🏻💻
class ViewController: UIViewController {
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
let rect2 = CGRect(x: 100, y: 100, width: 100, height: 100)
lazy var firstView = UIView(frame: rect)
lazy var secondView = UIView(frame: rect2)
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(firstView)
self.view.addSubview(secondView)
firstView.backgroundColor = .systemBlue
secondView.backgroundColor = .systemPink
}
}
다행히 생각했던 대로 잘 나와주었네요 좋습니다😇
이제 더 확실하게 frame과 superView를 이해할 수 있도록 다른 예제로 확인해봐요
큰 사각형을 만들거에요!👨🏻💻
class ViewController: UIViewController {
// let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
let bigRect = CGRect(x: 50, y: 200, width: 300, height: 500)
lazy var firstView = UIView(frame: bigRect)
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(firstView)
firstView.backgroundColor = .systemBlue
}
}
엄청 크죠??!
근데 제가 왜 rect를 지우지 않고 주석처리를 해뒀을까요?
제일 처음 그렸던 파란 사각형 위치 기억하시나요? 안나면 위로 올라가세요😟
저 rect를 똑같이 적용해서 사각형을 만들어 볼거에요 어떻게 될까요?
코드 보시죠👨🏻💻
class ViewController: UIViewController {
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
let bigRect = CGRect(x: 50, y: 200, width: 300, height: 500)
lazy var firstView = UIView(frame: bigRect)
lazy var secondView = UIView(frame: rect)
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(firstView)
self.firstView.addSubview(secondView)
firstView.backgroundColor = .systemBlue
secondView.backgroundColor = .systemPink
}
}
?????
frame에 똑같은 rect를 적용해서 똑같은 사각형을 만들었는데 왜 위치가 다를까요??
이게 frame입니다🍎
제가 아까 말씀드렸던 superView의 좌표계에 따라 뷰의 위치가 달라지는 게 여기서 확실하게 볼 수 있었습니다.
지금 분홍 사각형의 superView는 파란 사각형이니깐요!
이제 bounds를 공부해볼게요
bounds란?
공식문서에서는 '자체 좌표계에서 뷰의 위치와 크기를 설명하는 범위 사각형'으로 정의하고 있네요
?? frame이랑 뭔가 비슷한데 다르죠?
위에서 보셨던 큰 파란 사각형의 bounds를 변경해봅시다
class ViewController: UIViewController {
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
let bigRect = CGRect(x: 50, y: 200, width: 300, height: 500)
lazy var firstView = UIView(frame: bigRect)
lazy var secondView = UIView(frame: rect)
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(firstView)
self.firstView.addSubview(secondView)
firstView.backgroundColor = .systemBlue
UIView.animate(withDuration: 1, animations: {
self.firstView.bounds = CGRect(x: 50, y: 100, width: 300, height: 500)
})
secondView.backgroundColor = .systemPink
}
}
뭐가 변했는지 보기 쉽게 애니메이션을 적용하였습니다 !!분명히 파란 사각형 bounds를 변환했는데..
왜 빨간 사각형이 움직이죠??
바로 bounds의 특성 때문입니다!
bounds를 변경한다는 것은 자신의 좌표계에서의 위치를 변경한다는 것입니다.
하지만 파란색 사각형은 ViewController view의 subView이기 때문에 위치가 변하지 않습니다.
frame을 건드린 것이 아니니깐요.
하지만 파란색 사각형의 subView인 분홍 사각형은 superView인 파란 사각형의 좌표계가 변경되었기 때문에 움직이는 것입니다.
이해가 되셨나요??
그래서 결론이 뭔데?
Frame은 superView의 좌표계에서 뷰의 위치와 크기를 설명하는 프레임 사각형이고 Bounds는 자체 좌표계에서 뷰의 위치와 크기를 설명하는 범위 사각형입니다
Origin (x,y)
Frame : superView의 원점으로부터 x,y축으로 얼마나 떨어져 있는지를 나타낸다
Bounds : 자기 자신의 좌표계 안에서 원점을 결정하므로 별도의 값을 하당하기 전까지는 항상 0으로 초기화
Size
Frame : superView 좌표계 안에서 현재 view가 사각형 영역으로 차지하고 있는 크기를 나타내기 때문에, view를 회전시킨다면 frame의 크기는 달라질 수 있다
Bounds : 자기 자신의 크기를 나타내므로 view가 회전하더라도 크기는 항상 같다
