[iOS] - UILabel, UIButton 코드로 작성하기

코드로 뷰에 label이나 button을 추가해주는 작업입니다.

1. label 또는 button 만들기

label 만들기

let titleLabel: UILabel = {
    let label = UILabel()
    
    label.text = ""
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

• label에 관한 속성들을 여기서 지정해 줍니다
  • ex) text, color, textAlignments 등등

Button 만들기

let backButton: UIButton = {
    let button = UIButton()
        
    button.setTitle("Back Button", for: .normal)
    button.setTitleColor(.systemBlue, for: .normal)
    button.addTarget(self, action: #selector(tapBackButton), for: .touchUpInside)
    button.translatesAutoresizingMaskIntoConstraints = false
        
    return button
}()

• button title, 글자 색, button action 등을 여기서 지정해줍니다.

이 때 label이든 button이든 translateAutoresizingMaskintoConstraints를 꼭 false로 지정해줘야합니다.

translateAutoresizingMaskIntoConstraints란?

뷰의 자동 크기 조정 메서드에 지정된 값을 복제하여 제약조건을 생성하는 것입니다.
뷰의 크기와 위치를 완전 지정해버리기 때문에 추가적으로 제약을 넣어줄 수 없습니다.
따라서 우리가 제약을 지정하고 조정하고 싶다면, translateAutoresizingMaskIntoContraints = false로 꼭 명시해 주어야합니다.(default로 true로 설정되어있습니다.)

더 자세히 - Apple document

2. view에 생성한 label/button 추가

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = .white
    
    self.view.addSubview(titleLabel)
    self.view.addSubview(backButton)

• 코드로 작성할 때 view의 배경색은 default로 검정이기 때문에 배경색을 .white로 지정해줍니다.
• label과 button이 올라갔으면 하는 view에 addSubview()메서드로 추가해 줍니다.

제약을 넣어주기 전에 꼭 addSubview를 해줘야합니다. 순서가 바뀌면 실행이 안됩니다.

3. constraint 설정

constraint 설정은 다음을 사용하여 할 수 있습니다.

• topAnchor : 상
• bottomAnchor : 하
• leadingAnchor : 좌
  • leadingAnchor는 텍스트의 시작점, leftAnchor는 말 그대로 왼쪽
• trailingAnchor : 우
  • 마찬가지로 trailingAnchor는 텍스트의 끝, rightAnchor는 오른쪽을 가르킵니다.
• centerXAnchor : 가로 센터
• centerYAnchor : 세로 센터
• heightAnchor : 높이
• widthAnchor : 너비

나라별로 텍스트의 시작점이 다르기 때문에 left,right보다 leading, trailing을 사용하는 것이 좋습니다.

constraint 설정하기

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = .white
    
    self.view.addSubview(titleLabel)
    self.view.addSubview(backButton)
    
    self.backButton.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 100).isActive = true
    self.backButton.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 50).isActive = true
    

• backButton의 top을 view의 top에서 100만큼 떨어지게 설정
• backButton의 leading을 view의 leading에서 50만큼 떨어지게 설정

만약 제약을 safeArea로 걸고 싶다면

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = .white
    
    self.view.addSubview(titleLabel)
    self.view.addSubview(backButton)
    
    let safeArea = self.view.safeAreaLayoutGuide
    
    self.backButton.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 50).isActive = true
    self.backButton.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 20).isActive = true
    
    self.titleLabel.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -50).isActive = true
    self.titleLabel.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor, constant: -100).isActive = true
    

• 다음과 같이 view의 safeArea에 대해 제약을 걸 수도 있습니다.
• 또한 trailing과 bottom 제약 값은 음수로 작성해야합니다.
  • trailing과 bottom은 음수여야 view 내부를 향하게 되고, 양수면 view의 밖을 향하게 되기 때문입니다.