이제부터 습관화 하기로 했다..
무언갈 찾아볼때 순서를..
1. 공식문서
2. 이해 안된 내용 + 추가적인 내용에 대해서 구글링
결론.. 공식문서 짱짱..
1. 공식문서 훑어보기
1) Frame
The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.
-> 슈퍼뷰 를 기준으로 위치 및 크기를 정의
강조한 부분을 잘 기억해야한다! 기준점이 자신보다 한단계 위의 뷰인 슈퍼뷰 이다!
var frame: CGRect { get set }
2) Bounds
The bounds rectangle describing the item’s location and size in its own coordinate system.
-> 자기 자신을 기준으로 위치 및 크기를 정의
강조한 부분을 잘 보자! 기준점이 자기 자신이다!
var bounds: CGRect { get }
💡CGRect는 직사각형의 위치와 치수를 포함하는 구조체 이며, 해당 구조는
public struct CGRect {
public var origin: CGPoint
// 위치 정보
public var size: CGSize
// 크기 정보
public init()
public init(origin: CGPoint, size: CGSize)
}
/*
...
...
...
기타 확장 기능들이 구현되어 있음
*/
로 정의되어 있습니다.. 이부분은 Code로 앱을 구현할때 사용하게 되는데
제가 아직 스토리보드 밖에 다룰줄을 몰라서.. 알게되면 포스팅 하겠슴다ㅎㅎ..
다시 본론으로 돌아가서
자! 공식문서만 봐도 차이점을 바로 알아버렸다 ^_-
간단하게 차이점을 이야기 하자면..
Frame 은 기준점이 슈퍼뷰에서부터 위치 및 크기를 지정하게 되는 반면,
Bounds 는 기준점이 자기 자신으로부터 위치 및 크기를 지정하게 된다!
로 끝내기엔 뭔가.. 이해가 되지 않으니 예시로 살펴 봐야겠다..
예시로 살펴보기
1. 먼저 frame 이다, 분홍색(빨간색) View가 superview고, 파란색 뷰가 frame을 적용한 뷰이다,
코드 를 살펴보자
class ViewController: UIViewController {
@IBOutlet var superView: UIView!
var view1 = UIView()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
view1.frame = CGRect(origin: CGPoint(x: 50, y: 50), size: CGSize(width: 300, height: 300))
view1.backgroundColor = .blue
superView.addSubview(view1)
superView.backgroundColor = .systemPink
}
}
위치 정보를 (50.50) 으로 주었고, 크기 정보를 (300 * 300) 으로 설정했다.
우리는 위에서 슈퍼뷰기준 으로 위치와 크기를 나타낸다고 배웠다
각 수치값을 표현다면 위와 같이 될것이다
분홍배경의 슈퍼뷰 로 부터 50.50 만큼 떨어진 거리에 300 * 300 크기의 뷰를 그려준것이다.
2. Bounds 를 살펴보자!
배경에 대한 설명은 같고, 위 코드에서 frame 을 bounds로 변경하여 적용하였다!
@IBOutlet var superView: UIView!
var view1 = UIView()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
view1.bounds = CGRect(origin: CGPoint(x: 50, y: 50), size: CGSize(width: 300, height: 300))
view1.backgroundColor = .blue
superView.addSubview(view1)
superView.backgroundColor = .systemPink
}
뭔가 이상하다..
frame 같은 경우는 어쩌면 자연스럽게 저렇게 되는구나 를 알수있는데
bounds 는 당최 어떻게 동작하는지를 모르겠다..
300 * 300 크기의 뷰를 (50.50) 위치에 놓았는데 어쩐지 왼쪽상단으로 쭈욱.. 올라갔다
기준점이 자기 자신 이란건 알겠는데 왜 저렇게 되는걸까?
이해하기가 좀 어려워서 zeddios 님의 블로그를 열심히 읽어 보았다!
그림하나로 저렇게 되는 이유가 종결된다!
정리하자면 bounds를 변경하는 것은, 변경된(설정된) 위치에서 내 자신의 View 를 다시 그려줘! 라고 하는것이다!
아래 그림을 보면 더 잘 이해가 갈것이다!
bounds의 origin(위치정보) 가 변경될때마다, 이미지 자체가 움직이를것이 아닌
아이폰에 표시되는 view 자체의 위치가 이동된다!
이렇게..!!
이것이 만약 frame 이였다면. 상위뷰 기준으로 이동하기 때문에
이렇게 표시된다!!!
해당 개념은 직접 코드로 구현해보고 익숙해져야 더 깊이 이해가 갈것같다!
(특히 bounds..)
참고 사이트 : https://zeddios.tistory.com/203