AutoLayout - Code

 

코드를 통한 오토레이아웃 설정

 

• 오토레이아웃(AutoLayout)이란 화면의 위치와 크기를 동적으로 정의하고 관리하는 방식
• 제약조건(Constraints)을 통해 설정하여 뷰 안에서의 관계를 정의할 수 있다.
• 뷰를 관점으로 잡았을 때, 상하좌우가 잡혀있는 것을 생각하며 제약조건을 자유롭게 추가해서 잡을 수 있다.

AutoLayout - Storyboard

 

 

// 스토리보드의 자동레이아웃 설정 끄기
객체.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([

// 왼쪽에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30),

// 오른쪽에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30),

// 위에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),

// 레이블 자체의 높이 설정
객체.heightAnchor.constraint(equalToConstant: 40),

// 아래에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 30),

// X축을 기준으로 중간 정렬
객체.centerXAnchor.constraint(equalTo: view.centerXAnchor),

// Y축을 기준으로 정렬
객체.centerYAnchor.constraint(equalTo: view.centerYAnchor)
 
])

 

 

 

 

 

 

 

오토레이아웃을 설정할 myLabel 설정

 

 

 

오토레이아웃 설정

아래의 코드를 복사하여 객체를 바꿔 사용하면 된다.

보통 오토레이아웃들의 코드를 하나의 함수로 묶어 setUpLayout() 으로 쓰기도하고 객체별로 나눠서 함수를 만들어 레이아웃을 설정한다.

// 스토리보드의 자동레이아웃 설정 끄기
객체.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([

// 왼쪽에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30),

// 오른쪽에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30),

// 위에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),

// 레이블 자체의 높이 설정
객체.heightAnchor.constraint(equalToConstant: 40),

// 아래에서 뭐를 기준으로 얼마나 떨어져 있는가
객체.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 30),

// X축을 기준으로 중간 정렬
객체.centerXAnchor.constraint(equalTo: view.centerXAnchor),

// Y축을 기준으로 정렬
객체.centerYAnchor.constraint(equalTo: view.centerYAnchor)
 
])