XMobile

NSLayoutConstraint를 이용하여 코딩을 통해서  간단한 뷰 배치를 하도록 하겠습니다.

뷰 3개를 이용하여 2가지 배치를 설정해 봅니다. 

private let box1: UIView = {
	let view = UIButton()
	view.backgroundColor = .blue
	view.translatesAutoresizingMaskIntoConstraints = false
	return view
}()
    
private let box2: UIView = {
    let view = UIButton()
    view.backgroundColor = .red
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()
    
private let box3: UIView = {
	let view = UIButton()
    view.backgroundColor = .yellow
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

...
override func viewDidLoad() {
	super.viewDidLoad()
	view.backgroundColor = .white
        
	view.addSubview(box1)
	view.addSubview(box2)
	view.addSubview(box3)
        
	addconstraints()
}

배치1

private func addconstraints() {
        var constraints = [NSLayoutConstraint]()
        
        constraints.append(box1.widthAnchor.constraint(equalToConstant: 100))
        constraints.append(box1.heightAnchor.constraint(equalToConstant: 100))
        constraints.append(box2.widthAnchor.constraint(equalToConstant: 100))
        constraints.append(box2.heightAnchor.constraint(equalToConstant: 100))
        constraints.append(box3.widthAnchor.constraint(equalToConstant: 100))
        constraints.append(box3.heightAnchor.constraint(equalToConstant: 100))
        
        //box1 left: 뷰콘트롤러뷰의 왼쪽에서 20만큼 떨어진 곳에 box1 left가 위치함
        constraints.append(box1.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20))
        //box1 top : 뷰콘트롤러뷰의 위쪽에서 40만큼 떨어진 곳에 box1의 top이 위치함  
        constraints.append(box1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40))

        //box2 left: 뷰콘트롤러뷰의 왼쪽으로부터 20만큼 떨어진 곳에 box2 left 위치함 
        constraints.append(box2.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20))
        //box2 top: box1 아래쪽이 40만큼 떨어진 곳에 box2 top이 위치 
        constraints.append(box2.topAnchor.constraint(equalTo: box1.bottomAnchor, constant: 40))

        //box3 right: 뷰콘트롤러뷰의 우측에서 -20만큼 떨어진 곳에 box3의 right가 위치함  
        constraints.append(box3.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20))
        //box3 top: box2 아래쪽이 40만큼 떨어진 곳에 box3 top이 위치 
        constraints.append(box3.topAnchor.constraint(equalTo: box2.bottomAnchor, constant: 40))

        //Activate(Applying)
        NSLayoutConstraint.activate(constraints)
}

배치2

private func addconstraints() {
        var constraints = [NSLayoutConstraint]()
        
        constraints.append(box1.heightAnchor.constraint(equalToConstant: 100))
        constraints.append(box2.heightAnchor.constraint(equalToConstant: 100))
        constraints.append(box3.heightAnchor.constraint(equalToConstant: 100))
        //box2와 box3 너비 같도록 설정 
        constraints.append(box2.widthAnchor.constraint(equalTo: box3.widthAnchor))
        constraints.append(box3.widthAnchor.constraint(equalTo: box2.widthAnchor))
        
        //box1 left : 뷰콘트롤러뷰의 왼쪽에서 20만큼 떨어진 곳에 box1 left가 위치함
        constraints.append(box1.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20))
        //box1 right : 뷰콘트롤러뷰의 오른쪽에서 20만큼 떨어진 곳에 box1 right가 위치함
        constraints.append(box1.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20))
        //box1 top :  뷰콘트롤러뷰의 위쪽에서 40만큼 떨어진 곳에 box1 top 위치함
        constraints.append(box1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40))

        //box2 left : 뷰콘트롤러뷰의 왼쪽에서 20만큼 떨어진 곳에 box2 left가 위치함
        constraints.append(box2.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20))
        //box2 top : box1의 아래쪽에서 40만큼 떨어진 곳에 box2 top 위치함
        constraints.append(box2.topAnchor.constraint(equalTo: box1.bottomAnchor, constant: 40))

        //box3 left : box2 오른쪽에서 20만큼 떨어진 곳에 box3 left가 위치함
        constraints.append(box3.leadingAnchor.constraint(equalTo: box2.trailingAnchor, constant: 20))
        //box3 right : 뷰콘트롤러뷰의 오른쪽에서 -20만큼 떨어진 곳에 box3 right가 위치함
        constraints.append(box3.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20))
        //box3 top :  box1의 아래쪽에서 40만큼 떨어진 곳에 box3 top 위치함
        constraints.append(box3.topAnchor.constraint(equalTo: box1.bottomAnchor, constant: 40))

        //Activate(Applying)
        NSLayoutConstraint.activate(constraints)
    }

이상으로 제약조건을 코딩으로 관계에 대한 설정을 통해서 사용법을 간단하게 사용해 보았습니다.