[부스트코스]iOS 프로그래밍 강좌에 대한 정리글입니다.
[부스트코스]iOS 프로그래밍 Booster 2기 활동 글입니다.
[이전 포스트]오토레이아웃이 무엇인지 알아보고 직접 코드 없이, 또는 코드를 사용해서 구현해보기
iOS 어플리케이션은 윈도우와 뷰를 통해 사용자에게 화면을 보여줍니다. 윈도우는 직접 콘텐츠를 표현할 수는 없지만 뷰를 위한 컨테이너 역할을 합니다. 뷰는 윈도우의 한 영역에서 콘텐츠를 보여줍니다. 이미지, 문자, 도형을 나타내고, 제스쳐 인식기를 사용하거나 직접 터치 이벤트를 처리하기도 합니다.
어플리케이션의 뷰를 구성할 떄는 콘텐츠에 적합한 뷰를 여러개 사용하여 뷰 계층(View Hierarchy) 구조를 구성하는 것이 좋습니다. 그럼 뷰 계층이란 무엇인지 한번 알아보도록 하겠습니다.
뷰 계층(View Hierarchy)
뷰는 콘텐츠를 보여주기도 하고 다른 뷰를 위한 컨테이너가 되기도 합니다. 후자의 경우, 두 개의 뷰 사이에 부모-자식 관계가 생성됩니다. 부모뷰(Parent View)는 자식뷰(Child View)의 위치나 크기를 관리합니다. 그래서 부모뷰를 슈퍼뷰(Super View), 자식뷰를 서브뷰(Sub View) 라고 부르기도 합니다.
뷰 좌표계
뷰의 좌표계는 좌측 상단 모서리를 원점 (0, 0) 으로 하여 아래쪽과 오른쪽으로 확장됩니다. 좌표값은 해상도와 관계가 없으며 부동소수점 값으로 나타냅니다. 이 뷰는 프레임과 바운드 로 나타냅니다.
프레임은 뷰의 크기와 위치를 슈퍼뷰의 좌표계를 기준으로 나타낸 값입니다. 반면에 바운드는 뷰의 크기와 위치를 자기 자신의 좌표계를 기준으로 나타낸 값입니다. 이 두 값은 CGRect 구조체를 통해 표현할 수 있습니다. 이 구조체는 크기와 위치에 대한 값을 받아 뷰를 생성합니다.
UIView(frame: CGRect)
UIView(origin: CGPoint, size: CGSize)
UIView(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)새로운 뷰 컨트롤러(View Controller) 생성하기
먼저 새로운 뷰를 생성해보도록 하겠습니다. 일단 기존의 뷰 컨트롤러는 다음과 같이 삭제하도록 하겠습니다.
뷰 컨트롤러를 클릭해서 delete 를 눌러 지울 수 있습니다.
그리고 새로운 뷰 컨트롤러를 추가하도록 하겠습니다. 우측 상단의 라이브러리 버튼 + 를 눌러 뷰 컨트롤러를 찾아 끌어다 놓으면 됩니다.
그러면 다음과 같이 새로운 뷰 컨트롤러가 생성됩니다. 이 View Controller 는 스스로 화면에 나타나는 인스턴스가 아니므로 반드시 뷰를 가지고 있어야 합니다. 보통 새로운 View Controller 를 생성하면 새로운 뷰도 생성을 해줍니다.
뷰의 이름 변경하기
이 뷰의 이름을 SuperView 로 변경해보도록 하겠습니다. 이름 변경은 우측 identity inspector 에서 Document 항목의 label 에 값을 할당하면 됩니다.
뷰 컨트롤러를 시작 화면으로 설정하기
이 뷰 컨트롤러를 어플리케이션이 처음 시작했을 때 등장하는 뷰로 설정하도록 하겠습니다. 이를 위해서는 뷰 컨트롤러를 선택한 상태에서 우측 Attributes inspector 에서 Is Initial View Controller 를 체크해야 합니다.
서브뷰(Sub View) 생성하기
슈퍼뷰를 정상적으로 생성했다면, 이제 새로운 뷰를 서브뷰로 추가해보도록 하겠습니다. 우측 상단의 라이브러리 + 를 눌러 View 를 선택하면 됩니다.
다만 여기서 뷰를 드래그해서 슈퍼뷰에서 놓으면, 슈퍼뷰의 서브뷰로 생성할 수 있습니다. 그러면 다음과 같이 서브뷰가 생성됩니다.
서브뷰를 제거할때는, 해당 뷰를 클릭한 후 delete 키를 누르면 됩니다.
코드를 통해서 서브뷰를 생성할 수도 있습니다. 아래는 UIView 클래스를 통해 뷰를 생성하는 코드입니다.
let frame = CGRect(x: 60, y: 100, width: 240, height: 120)
let subView = UIView(frame: frame)그리고 addSubView 메서드를 통해 서브뷰를 추가할 수 있습니다. 왼쪽에 부모뷰를, 오른쪽에 자식뷰를 사용합니다.
view.addSubview(subView)이 때 사용하는 view 는 메인 스토리보드에 있는 뷰 컨트롤러의 SuperView 를 나타냅니다.
서브뷰를 제거하기 위해서는 removeFromSuperview 메서드를 사용하면 됩니다.
subView.removeFromSuperview()윈도우와 뷰에 대해 더 알고 싶으시다면 Apple 개발자 문서 를 참조하시기 바랍니다.
[다음 포스트]iOS 의 디자인패턴, MVC 에 대해 간단하게 알아보기
