[Auto Layout] 12. 코드로 컴포넌트 추가하기

1. 객체 생성

let myButton = UIButton.init(type: .system) //시스템 타입의 버튼 객체 생성

2. 타이틀 작성

 myButton.setTitle("MyButton", for: .normal) //버튼의 title을 작성하고 일반 버튼으로 설정

3. addSubview

self.view.addSubview(myButton) //현재 ViewController에 addSubview를 통해서 버튼을 올리는 것

현재까지의 코드

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let myButton = UIButton.init(type: .system) //시스템 타입의 버튼 객체 생성
        myButton.setTitle("MyButton", for: .normal) //버튼의 title을 작성하고 일반 버튼으로 설정
        
        self.view.addSubview(myButton) //현재 ViewController에 addSubview를 통해서 버튼을 올리는 것
    }


}

이렇게 하고 실행을 해보자.

아래와 같이 아무화면이 뜨지 않는다.

그 이유는 코드로 컴포넌트를 만들었을 때 크기나 위치에 대한 설정이 되어있지 않으면 보이지 않는다.

4. constraint 설정

 myButton.centerXAnchor.constraint(equalTo:  self.view.centerXAnchor) //버튼의 XAnchor를 해당 버튼의 부모View의 XAnchor와 연결
 
 myButton.centerYAnchor.constraint(equalTo:  self.view.centerYAnchor) //버튼의 YAnchor를 해당 버튼의 부모View의 YAnchor와 연결

constraints는 기본적으로 코드에서 비활성화이기 때문에 활성화를 시켜주어야한다.

 myButton.centerXAnchor.constraint(equalTo:  self.view.centerXAnchor).isActive = true //버튼의 XAnchor를 해당 버튼의 부모View의 XAnchor와 연결
 
 myButton.centerYAnchor.constraint(equalTo:  self.view.centerYAnchor).isActive = true //버튼의 YAnchor를 해당 버튼의 부모View의 YAnchor와 연결

5. 오토레이아웃 허용(?)

myButton.translatesAutoresizingMaskIntoConstraints = false //오토레이아웃 설정을 하겠다는 의미

translatesAutoresizingMaskIntoConstraints를 true로 하면 오토레이아웃을 설정하지 않겠다는 의미이므로 false를 해준다.

이렇게 모두 마치면 아래와 같이 버튼이 뜨게 된다.

6. Constant 설정하기
   

번외. top, left Anchor로 오토레이아웃 잡아보기

myButton.topAnchor.constraint(equalTo:  self.view.topAnchor, constant: 20).isActive = true 
myButton.leftAnchor.constraint(equalTo:  self.view.leftAnchor, constant: 20).isActive = true 

위의 코드로 오토레이아웃을 잡아주면 버튼이 아래의 사진과 같이 SafeArea를 벗어나게 된다.

따라서 이 문제는 아래와 같이 해결해준다.

myButton.topAnchor.constraint(equalTo:  self.view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true 
myButton.leftAnchor.constraint(equalTo:  self.view.safeAreaLayoutGuide.leftAnchor, constant: 20).isActive = true 

위의 코드처럼 safeAreaLayoutGuide에 Anchor를 걸어준다.