AutoLayout

wimes·2020년 5월 8일
0

iOS/Swift

목록 보기
17/19

저는 storyboard에서 개발을 하는 것을 무척이나 싫어합니다.

  • 첫번째로는 유지보수가 매우 어렵습니다.
  • 두번재로는 각 UI컴포넌트별로 어떠한 기능을 하는지가 storyboard에 담겨있기 때문에 알아보기가 힘듭니다.

대표적으로 위의 두가지 이유때문에서 입니다.

어찌되었건 UI를 만들기를 해야하는데 이를 programmatically 하게 개발하는 방법에 대해서 알아보려고 합니다.

그중에서 AutoLayout을 programmatically 하게 작성하는 방법을 배워보겠습니다.

AutoLayout이란?

iPhone마다 각 화면의 크기가 다릅니다. 그렇다면 각 화면에 대한 크기를 하나하나 전부 코딩을 해줘야 할까요?

아닙니다. 이러한 불상사를 방지하기 위해서 Autolayout을 이용하는 것입니다.

오토레이아웃은 뷰의 제약 사항을 바탕으로 뷰 체계 내의 모든 뷰의 크기와 위치를 동적으로 계산합니다.

오토레이아웃은 애플리케이션을 사용할 때 발생하는 외부 변경과 내부 변경에 동적으로 반응하는 사용자 인터페이스를 가능하게 합니다.

Code

간단한 Constraint

다음은 View 내부에 버튼을 동적으로 만드는 간단한 예제 코드 입니다.

우선 코드 전체를 보여드리고 하나하나 설명드리겠습니다.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.view.backgroundColor = UIColor.red
        let button = UIButton()
        button.backgroundColor = UIColor.white
        
        self.view.addSubview(button)
        button.translatesAutoresizingMaskIntoConstraints = false
        let width: NSLayoutConstraint
        width = button.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5)
        let height: NSLayoutConstraint
        height = button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1)
        
        let centerX: NSLayoutConstraint
        centerX = button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
        let centerY: NSLayoutConstraint
        centerY = button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        
        button.addTarget(self, action: #selector(self.selectedButton(_:)), for: UIControl.Event.touchUpInside)
        
        centerX.isActive = true
        centerY.isActive = true
        width.isActive = true
        height.isActive = true
    }

    @objc func selectedButton(_ sender: UIButton){
      	print("selectedButton")
    }
}

Button 생성 코드

let button = UIButton()
button.backgroundColor = UIColor.white
        
self.view.addSubview(button)

위 코드는 Button을 생성해주고 이를 view안에 속하게 해주는 코드입니다.

간단하게 addSubView를 이용해서 구현합니다.

Button 크기 지정

button.translatesAutoresizingMaskIntoConstraints = false

let width: NSLayoutConstraint
width = button.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5)
let height: NSLayoutConstraint
height = button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1)

우선 translatesAutoresizingMaskIntoConstraints 를 false로 지정해줍니다.

그리고 width와 height을 지정해주는데

width = button.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5)

button의 widthAnchor에 Constraint를 만들건데 self.view의 widthAnchor의 0.5를 곱한 것과 같다.

즉, 다시말해 view의 1/2의 width constraint를 width에 저장하겠다는 말입니다.

height = button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1)

동일한 원리로 height도 button의 widthAnchor 와 같은 크기를 height에 저장하겠다는 말입니다.

Button 위치 지정

let centerX: NSLayoutConstraint
centerX = button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
let centerY: NSLayoutConstraint
centerY = button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)

centerX = button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)

button의 centerXAnchor와 view의 centerXAnchor 와 같다.

centerY = button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)

마찬가지로 button의 centerYAnchor와 view의 centerYAnchor 와 같다.

Constraint 활성화

centerX.isActive = true
centerY.isActive = true
width.isActive = true
height.isActive = true

아까 만들어줬던 contraint들을 모두 활성화 시켜줍니다.

각각 아이폰8, 아이폰11pro max인데 비율이 같습니다.

복잡한 Constraint

이번에는 조금 복잡한 Constraint를 보겠습니다.

let centerY: NSLayoutConstraint
centerY = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.centerY, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.centerY, multiplier: 0.8, constant: 0)

위의 코드를 차근차근 정리하면 아래와 같습니다.

centerY constraint 정의

button - view 사이의 제약:

  • 제약을 걸 객체(item): button
  • 속성(attribute): centerY에 대한 Constraint
  • 관계(relatedBy):equal
  • item과 관계를 맺을 대상(toItem): view
  • 속성(attribute): centerY에 대한 Constraint
  • item = toItem * multiplier // button의 크기는 view의 0.8을 곱한 것과 같다.
  • constant: 0 //button과 view사이의 거리는 0이다.

References

profile
iOS/Swift & Node.js Dev.

0개의 댓글