[iOS 레이아웃]Swift 코드로 레이아웃 구성

iOS는 스토리보드에서 레이아웃을 설정할수 있지만 코드상에서 뷰를 생성하고 설정할수도 있습니다.

이번 포스팅에서는 코드상에서 뷰를 생성하는 방법에 대해서 쓰도록 하겠습니다.

먼저 생성할 뷰의 객체를 생성합니다.

var view : UIView!

var label1 : UILabel!

var label2 : UILabel!

view = UIView(frame : CGRect(x: 0, y: 0, width: 100, height: 100))

label1 = UILabel(frame : CGRect(x: 10, y: 10, width: 0, height: 0))

label2 = UILabel(frame : CGRect(x: 0, y: 10, width: 0, height: 0))

label1.text = "테스트1"

label2.text = "테스트2"

self.addSubview(view)

view.addSubview(label1)

view.addSubview(label2)

CGRect는 뷰의 좌측상단 모서리부분의 x y값과 높이 너비로 뷰의 위치와 크기를 설정합니다.

임의로 0,0,으로 주었습니다.

여기서 x,y값의 기준은 해당 뷰가 추가될 상위뷰의 기준으로 설정됩니다.

위의 코드에서 label1과 label2의 상위뷰는 view 입니다.

위의 코드와는 관계없지만 상위뷰에 대한 xy값은 대략적으로 그림으로 나타내면 다음과 같습니다.

그리고 현재는 높이너비가 둘다 0,0으로 설정되어 있으므로 뷰에 아무것도 나타나지 않을것입니다.

라벨에 sizeTofit() 옵션을 사용하게되면 글자가 가지는 크기만큼 뷰의 영역이 설정됩니다.

이런식으로 뷰를 만들게 될 경우 뷰의 크기나 위치를 화면의 비율로 설정 할수 있기때문에 잘 활용하면 플러스모델이든 일반모델이든 모든 단말에 레이아웃을 대응할수 있을것이고 뷰의 위치를 잡을때 정렬이 잘 안된다 싶으면 기준으로 삼을 뷰를 하나 정해두고 가운데, 위, 아래, 측면을 맞춰줄수 있습니다.

뷰1.center.y = 뷰2.center.y // y축의 가운데를 맞춤

뷰1.frame.origin.x = 뷰2.frame.minX //좌측 맞춤

뷰1.frame.origin.y = 뷰2.frame.maxY-뷰1.frame.height //상대뷰의 maxY에 자신의 높이를 빼서 minY값을 구함

이를 응용하면 뷰를 자신이 원하는대로 배치 할수 있을것입니다.

저희 위미르에서는 모바일 어플리케이션(Android/iOS), Web 개발을 해드리고 있습니다.

문의 전화 : 070-4177-3962