Autolayout 제약걸기 (코드 - 1)

 

 

□ 버튼 생성 및 제약 걸기

let btn1: UIButton = .init(frame: .init())
btn1.backgroundColor = .yellow
        
btn1.setTitle("안녕하세요", for: .normal)
btn1.setTitleColor(UIColor.black, for: .normal)
self.view.addSubview(btn1)
btn1.translatesAutoresizingMaskIntoConstraints = false
// false - AutoLayout을 따르겟다
// true - frame을 따르겠다.
        
btn1.topAnchor.constraint(equalTo: self.view.topAnchor,constant: 100).isActive = true
btn1.leadingAnchor.constraint(equalTo: self.view.leadingAnchor,constant: 100).isActive = true
btn1.trailingAnchor.constraint(equalTo: self.view.trailingAnchor,constant: -100).isActive = true

translatesAutoresizingMaskIntoConstraints는 frame을 따를지 말지 결정하는 구문이다.( default: true)

 

다음과 같이 설정하면 된다.

trailing과 button의 경우 코드로 AutoLayout을 설정할 때 -를 사용해야 한다. 스토리보드처럼 양의 숫자를 사용하는 순간 화면 밖으로 벗어나게 된다.

 

btn2.topAnchor.constraint(equalTo: btn1.safeAreaLayoutGuide.bottomAnchor,constant: 30).isActive = true
btn2.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor,constant: 100).isActive = true
btn2.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor,constant: -100).isActive = true

safeAreaLayoutGuide를 사용하면 safeArea를 벗어나지 않게 해 준다.

self.view.safeAreaLayoutGuide.~~

 

isActive = true 생략하기

NSLayoutConstraint.activate([
	btn2.topAnchor.constraint(equalTo: btn1.safeAreaLayoutGuide.bottomAnchor,constant: 30),
	btn2.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor,constant: 100),
	btn2.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor,constant: -100)
])

 

크기 제약 거는 방법

widthAnchor.constraint(equalToConstant: 100).isActive = true
heightAnchor.constraint(equalToConstant: 100).isActive = true