코드를 사용하여 layout 잡아주기(NSLayoutConstraint , CGRect, SnapKit)

[MoSonLee]

• 방법:
  • 1. 뷰객체 프로퍼티 선언, 클래스의 인스턴스를 생성
  • 2. 명시적으로 RootView에 추가
  • 3. 크기와 위치 및 속성 정의 -> Frame 기반

 private lazy var emailTextField = UITextField()

  view.addSubview(emailTextField)

• 여기서 addSubView는 간단히 말해서 뷰 계층을 쌓아주는것이다.
• 예를들어 EX1.addSubView(EX2)
• 이렇게 작성하면 EX1안에 EX2을 넣어주는 것이니 EX1이 EX2의 부모뷰가 되는 것이다.

emailTextField.frame = CGRect(x: 50, y: 100, width: UIScreen.main.bounds.width - 100, height: 50)

• 코드를 해석해보자면 emailTextField의 프레임을 x좌표 50 y좌표 100, 너비는 화면에서 양쪽에 50씩 제외, 높이는 50 이다.

• CGRect는 autoLayout은 아니므로 NSLayoutConstraint로 잡으면

NSLayoutConstraint.activate([
            signButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            signButton.widthAnchor.constraint(equalToConstant: 300),
            signButton.heightAnchor.constraint(equalToConstant: 50),
            signButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])

signButton.translatesAutoresizingMaskIntoConstraints = false

• translatesAutoresizingMaskIntoConstraints를 false로 설정해주는 것을 잊지말자

• Snapkit을 사용할때는?
  • import snapkit을 사용하는 것 외엔 위의 방법과 1,2 번은 같으니 3번만 코드로 추가해보겠다!
  • NSLayoutConstraint이 조금 더 정교한 방법이고 Snapkit이 조금더 간편한 방법이다.

 photoImageView.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide)
            make.leadingMargin.equalTo(20)
            make.trailingMargin.equalTo(-20)
            make.height.equalTo(view).multipliedBy(0.3)
        }

• 이것도 해석해보자면 top은 view의 safe area에 딱 붙혀주고
• leading, trailing을 각각 20, -20으로 줘서 양옆에 20씩의 간격을 주고
• height은 뷰의 0.3배만큼 준다는 것이다!