Auto Layout 공부하기 - 1 (코드로 추가하기)

Auto Layout을 공부하면서 쓰는 글입니다.

사실 Auto Layout 외의 개념들도 적을 예정입니다. 뒤죽박죽일 수 있음.

 

코드로 앱 시작하기

프로젝트를 처음 만들고 Target -> Deployment Info -> Main Interface를 확인하면 기본적으로 Main으로 설정된 것을 볼 수 있습니다. 

인터페이스 빌더로 UI를 구현하면, target main interface에 있는 스토리 보드의 뷰컨으로 시작합니다.

코드로 똑같이 구현할 때는 AppDelegate.swift에 application(_: didFinishLaunchingWithOptions:)에서 아래의 코드를 추가해줍니다.

// 1
let storyboard = UIStoryboard(name: "Main", bundle: nil)
// 2
let viewController =
  storyboard.instantiateInitialViewController()
// 3
window = UIWindow(frame: UIScreen.main.bounds)
// 4
window?.rootViewController = viewController
// 5
window?.makeKeyAndVisible()
return true

 1. 스토리 보드를 초기화하고 

2. 앱 실행 시 처음 시작되는 스토리 보드의 뷰컨 레퍼런스를 생성하고

3. window의 크기를 지정해주고

4. window의 root view controller를 위에서 생성한 뷰컨으로 설정하고

5. makeKeyAndVisible() 메서드로 여러 윈도우들 중에서 현재 윈도우를 key window로 지정합ㄴ디ㅏ.

key window : 여러 윈도우 중 제일 위에 있는 윈도우

인터페이스 빌더로 생성하면 윈도우 설정을 자동으로 하기 때문에 위처럼 따로 해줄 필요는 없다.

 

만약 뷰컨만으로 시작하고 싶다면 

let viewController = ViewController()
window = UIWindow(frame: UIScreen.main.bounds)
window?.rootViewController = viewController
window?.makeKeyAndVisible()
return true

 

현재까지 설정을 한 후에 앱을 실행시키면 아마 검은 화면이 나올 것입니다.

그 이유는 코드로 뷰컨을 추가하면 배경색이 nil로 설정되어있기 때문입니다.

(스토리보드의 뷰컨으로 추가하면 .white로 설정되어 있음)

ViewController.swift 파일로 가서 viewDidLoad()에서 현재 뷰의 배경 색을 다른 걸로 바꿔주면 검은 화면이 아니라 설정한 배경색으로 바뀐 것을 볼 수 있습니다.

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view.backgroundColor = .red
    }
}

 

코드로 뷰 생성하기

인터페이스 빌더로 뷰를 만들 때는 드래그 앤 드롭으로 오브젝트를 추가했습니다.

이번에는 코드로 뷰를 추가해보겠습니다.

override init(frame: CGRect) {
	super.init(frame: frame)
	backgroundColor = .systemGray5
}

required init?(coder: NSCoder) {
	super.init(coder: coder)
}

• init(frame:) : 이름 그대로 초기화하는 코드를 여기에 추가합니다. (배경색 지정같은)
• init(coder:) : 뷰가 스토리보드나 .xib로 생성했으면 이 코드에서 오브젝트를 설정합니다.

 

레이아웃 Constraints

뷰의 레이아웃을 설정하는 방법은 두 가지입니다.

1. NSLayoutConstraints 사용

- NSLayoutConstraints에서는 두 개의 오브젝트의 관계를 지정합니다.

2. Layout Anchor 사용

 

생성한 뷰의 레이아웃을 지정해주겠습니다.

ViewController로 가서 다음의 코드를 추가합니다.

private let headerView = HeaderView()
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    view.backgroundColor = .white
    setHeaderView()
}

private func setHeaderView(){
    // 1
    view.addSubview(headerView)
    // 2
    headerView.translatesAutoresizingMaskIntoConstraints = false
    // 3
    headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    headerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    headerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -100).isActive = true
}

1. 우선 현재 view에 새로 만든 뷰를 추가합니다.

2. Auto Layout과 Autoresizing Mask를 동시에 사용하면 크래시가 납니다. 그래서 translatesAutoresizingMaskIntoConstraints 를 false로 설정해서 동시에 사용하지 않도록 해줍니다ㅑ. (인터페이스 빌더로 오토 레이아웃을 추가하면 자동으로 false로 설정됨)

Autoresizing Mask : 부모 뷰의 크기가 변경될 때 자동으로 자신의 크기를 조정하는 걸 결정하는 것. Auto Layout 전에 쓰이던 방식

3. 원하는 제약 사항을 추가해주고 마지막에 isActive=true를 해줘서 실제로 적용이 되도록 해줍니다.

만약 한번에 하고 싶다면 아래와 같이 NSLayoutConstraint.activate를 이용합니다.

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

결과 이미지