Auto Layout (label 혹은 버튼 크기 지정 및 위치 사용자 지정)

기종 별로 기기 크기에 맞게 버튼이나 레이블을 비율로 위치 지정할 수 있도록 하는 방식을 다루어보았다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var loginLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        loginLabel.translatesAutoresizingMaskIntoConstraints = false
        let width:NSLayoutConstraint
        width = loginLabel.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.2)
        let height:NSLayoutConstraint
        height = loginLabel.heightAnchor.constraint(equalTo: loginLabel.widthAnchor, multiplier: 1)
//        let centerX: NSLayoutConstraint
//        centerX = loginLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
//        let centerY: NSLayoutConstraint
//        centerY = loginLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
//        centerX.isActive = true
//        centerY.isActive = true
        width.isActive = true
        height.isActive = true
    }


}

우선 나는 로그인 화면을 구현하기 위해 "로그인"이라는 레이블에 오토방식을 도입하기로 했다.

위치적인 부분은 아래의 사진처럼 따로 레이블 자체에 constraint를 주었다. 

만약 화면 정중앙에 위치시키고자 한다면, 위의 코드에서 주석처리 된 부분을 활성화 시키면 된다. 

나는 왼쪽 상단 쯔음에 위치시키려고 해서 사용자 지정으로 constraint를 주었다. 

위의 코드는 레이블의 크기를 화면의 비율에 따라 변화되게 설정하였다.

width에서 multiplier의 0.2는 화면 전체의 0.2 크기만큼만 설정하겠다는 의미이다.

height도 마찬가지의 의미이다. 

 

위의 코드를 실행하게 되면 기기별로 다르게 비율에 맞게끔 알아서 위치가 설정된다.