[iOS] 오토레이아웃(Auto Layout)의 모든 것 - 4 / 오토레이아웃 코드 예제

오토레이아웃을 코드로 작성하는 방법은 3가지가 있습니다.

1. Initializer

//예시
let leading = NSLayoutConstraint(item: blueView, attribute: .leading, relatedBy: .equal, toItem: bottomContainer, attribute: .leading, multiplier: 1.0, constant: 0)

2. VisualFormat

//예시 
let horzFmt = "|[b]|"
let views: [String: Any] = ["b": blueView]
     
let horzConstraints = NSLayoutConstraint.constraints(withVisualFormat: horzFmt, options: [], metrics: nil, views: views)

3. Anchor

//예시
blueView.leadingAnchor.constraint(equalTo: bottomContainer.leadingAnchor).isActive = true

 

 

그 중에서 Layout Anchors을 이용해서 코드로 오토레이아웃을 설정해보겠습니다.

 

완성된 화면입니다.

테이블 뷰 만들기

    private let tableView: UITableView = {
        let tableView = UITableView(frame: CGRect.zero, style: .grouped)
        tableView.backgroundColor = .systemBackground
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(MyTableViewCell.self, forCellReuseIdentifier: MyTableViewCell.identifier)
        tableView.separatorStyle = .none
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 60
        
        return tableView
    }()

먼저 테이블 뷰를 만들었습니다.

테이블 뷰의 셀은 MyTableViewCell이라는 custom 셀을 사용할 예정입니다.

오토레이아웃을 코드로 작성하기 위해서 tableView.translatesAutoresizingMaskIntoConstraints = false 를 꼭 해줘야합니다.

 

오토레이아웃 설정하기

    private func createUI() {
        
        self.navigationItem.title = "UIKit"
        view.addSubview(tableView)
        
        tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0).isActive = true
        tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0).isActive = true
        tableView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
    }

테이블 뷰를 view의 서브뷰로 지정합니다.

여기서 view는 ViewController에 있는 기본 뷰입니다.

테이블 뷰의 top, leading, bottom, trailing을 뷰의 top, leading, bottom, trailing에 맞춰 뷰와 같은 크기가 되도록 만들었습니다.

 

헤더뷰 푸터뷰 만들기

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: tableView.frame.width, height: 60))
        headerView.backgroundColor = .systemBackground
        let label = UILabel()
        label.font = .boldSystemFont(ofSize: 24)
        label.text = category[section].name
        headerView.addSubview(label)
        
        label.translatesAutoresizingMaskIntoConstraints = false
        label.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: 20).isActive = true
        label.centerYAnchor.constraint(equalTo: headerView.centerYAnchor, constant: 0).isActive = true

        return headerView
    }
    
    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        
        let footerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: tableView.frame.width, height: 20))
        footerView.backgroundColor = .systemBackground
        let lineView = UIView()
        footerView.addSubview(lineView)
        
        lineView.translatesAutoresizingMaskIntoConstraints = false
        lineView.backgroundColor = .lightGray
        lineView.leadingAnchor.constraint(equalTo: footerView.leadingAnchor, constant: 20).isActive = true
        lineView.trailingAnchor.constraint(equalTo: footerView.trailingAnchor, constant: -20).isActive = true
        lineView.heightAnchor.constraint(equalToConstant: 1).isActive = true
        lineView.centerYAnchor.constraint(equalTo: footerView.centerYAnchor, constant: 0).isActive = true

        return footerView
    }

푸터뷰는 좌우에 20의 여백을 두는 선으로 만들었습니다.

lineView.trailingAnchor.constraint(equalTo: footerView.trailingAnchor, constant: -20).isActive = true

푸터뷰의 오른쪽여백으로부터 "왼쪽"으로 20만큼 가야하기 때문에 -20을 입력해야 합니다.

셀 만들기

    let pinButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setImage(UIImage(systemName: "pin"), for: .normal)
        button.tintColor = .darkGray
        
        return button
    }()
    
    let boardTitleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 17)
        
        return label
    }()
    
    let boardSubTitleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 14)
        label.textColor = .darkGray
        
        return label
    }()
    
    lazy var stackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [boardTitleLabel, boardSubTitleLabel])
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        stackView.spacing = 0
        
        return stackView
    }()

필요한 버튼과 라벨을 만들어 줍니다.

title과 subtitle라벨은 스택뷰에 넣어줬습니다.

 

오토레이아웃 설정하기

    private func createUI() {
        contentView.addSubview(pinButton)
        contentView.addSubview(stackView)
        
        pinButton.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20).isActive = true
        pinButton.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
        pinButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20).isActive = true
        
        stackView.leadingAnchor.constraint(equalTo: pinButton.trailingAnchor, constant: 20).isActive = true
        stackView.centerYAnchor.constraint(equalTo: pinButton.centerYAnchor).isActive = true
    }

pinbutton은 왼쪽 20, 위쪽 10, 아래쪽 20 만큼 공간을 줬습니다.

pinButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20).isActive = true 를 보겠습니다.

여기서 -20을 한 이유는 contentView로 부터 바닥에서 20만큼 "위쪽으로" 올라가기 때문입니다.