프로그래밍 방식으로 하위보기가 아닌보기에 제약 조건 관계를 설정하는 방법은 무엇입니까?

Question

두 개의보기를 프로그래밍 방식으로 설정하려고합니다. (이 잘 작동

//Button View 
     view.addSubview(buttonsLabel) 
     buttonsLabel.translatesAutoresizingMaskIntoConstraints = false 

     buttonsLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true 
     buttonsLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true 
     buttonsLabel.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true 

     buttonsLabel.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5, constant: -20).isActive = true 


//Calculator View 
     calcLabel.layer.cornerRadius = 25 
     view.addSubview(calcLabel) 

     calcLabel.translatesAutoresizingMaskIntoConstraints = false 

     calcLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true 
     calcLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true 
     calcLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 40).isActive = true 
     //calcLabel.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true 

     calcLabel.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5, constant: -40).isActive = true 

, 두보기의 프레임 높이 (마이너스 상수)의 50 %이며, 모두 표시됩니다 : 내 기본보기에 나는이 파단, 하나는 상단에 고정하고 바닥에 하나를 추가 상단에 하나, 하단에 하나). 그러나 프레임 높이의 75 %이고 다른 두보기의 맨 위에 배치해야하는 세 번째보기를 추가하려고하면 레이아웃이 파괴되고 모든 것이 프레임 외부로 거의 이동합니다.

내가 다시 아래로 세 번째보기를 고정하려고은 :

:

thirdView.layer.cornerRadius = 25 
    view.addSubview(thirdView) 

    thirdView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true 
    thirdView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true 
    thirdView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 

    thirdView.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.75).isActive = true 

이 모든 것이 두 가지보기, 상단 오른쪽 세 번째보기를 왼쪽 (처럼 보이는 방법이다

저는 앵커와 구속 조건을 올바르게하고 있습니까 (또는 어떻게 할 것인가?) 그리고 세 번째 뷰에 대한 구속 조건을 추가하는 방법은 프레임 높이의 75 %이고 모든 것 위에 이미지와 비슷하게 배치됩니다.

Answer 1

코드가 좋았습니다. 디버거에서 뷰 계층 구조를 검사하여 어떤 제약 조건이 실패했는지 확인하지 못했을 때 translatesAutoresizingMaskIntoConstraints을 beyowulf (으)로 주석 처리했을 수 있습니다. 당신은 상수를 사용해야 만한다. 이것은 코드를 훨씬 더 maintainable하게 만든다. 여기

내 구현 :

import UIKit 

class ViewController: UIViewController { 


    //MARK: - SubViews 
    let topHalfView: UIView = { 
     let view = UIView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     view.backgroundColor = UIColor.gray 
     return view 
    }() 

    let bottomHalfView: UIView = { 
     let view = UIView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     view.backgroundColor = UIColor.gray 
     return view 
    }() 

    let threeQuarterView: UIView = { 
     let view = UIView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     view.backgroundColor = UIColor.black 
     return view 
    }() 




    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 

     //add, layout subviews with 9+ constraints 
     setupViews() 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
     // Dispose of any resources that can be recreated. 
    } 


    func setupViews() { 
     self.view.addSubview(topHalfView) 
     self.view.addSubview(bottomHalfView) 
     self.view.addSubview(threeQuarterView) 

     let guide = self.view.safeAreaLayoutGuide 
     let spacing:CGFloat = 12 
     let viewHeight = self.view.frame.height - spacing 


     topHalfView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true 
     topHalfView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: spacing).isActive = true 
     topHalfView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -spacing).isActive = true 
     topHalfView.heightAnchor.constraint(equalToConstant: viewHeight * 0.5).isActive = true 

     bottomHalfView.topAnchor.constraint(equalTo: topHalfView.bottomAnchor, constant: spacing).isActive = true 
     bottomHalfView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: spacing).isActive = true 
     bottomHalfView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -spacing).isActive = true 
     bottomHalfView.heightAnchor.constraint(equalToConstant: viewHeight * 0.5).isActive = true 

     threeQuarterView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true 
     threeQuarterView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: spacing).isActive = true 
     threeQuarterView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -spacing).isActive = true 
     threeQuarterView.heightAnchor.constraint(equalToConstant: self.view.frame.height * 0.75).isActive = true 
    } 

} 

보기 계층 구조 :