[iOS - swift] 하단 버튼 SafeArea, 노치 대응 방법 (auto layout)

safe area 대응 된 버튼

* (편의를 위해 SnapKit 사용)

하단 버튼 safe area 대응 방법

• notch가 있는 경우와 없는 디바이스 모두 대응 방법
• 버튼의 layout
  • left, right, bottom 모두 superview와 동일하도록 설정
    

    self.button.snp.makeConstraints {
      $0.left.right.bottom.equalToSuperview()​
      // TODO: height
    }

    

  • 버튼의 크기를 60으로 맞추어야 하는 경우, 버튼의 상단을 safeArea의 하단으로부터 위로 60만큼 올라오도록 설정
    

    self.button.snp.makeConstraints {
      $0.left.right.bottom.equalToSuperview()
      $0.top.equalTo(self.view.safeAreaLayoutGuide.snp.bottom).offset(-60) // <- 추가
    }​

  • 

• 버튼의 inset값 부여
  • 버튼 안의 컨텐츠 (label)을 위쪽으로 붙인 후 위에서 18만큼 inset 부여
    

    // 버튼 안의 컨텐츠(label)을 위로 붙이는 옵션
    self.button.contentVerticalAlignment = .top
    // 버튼의 top inset을 18만큼 부여
    self.button.contentEdgeInsets.top = 18

  • 

• 전체 코드

import SnapKit

class ViewController: UIViewController {
  
  private let button: UIButton = {
    let button = UIButton()
    button.setTitle("버튼", for: .normal)
    button.setTitleColor(.white, for: .normal)
    button.setTitleColor(.blue, for: .highlighted)
    button.backgroundColor = .systemBlue
    return button
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    // 버튼 안의 컨텐츠(label)을 위로 붙이는 옵션
    self.button.contentVerticalAlignment = .top
    // 버튼의 top inset을 18만큼 부여
    self.button.contentEdgeInsets.top = 18

    self.view.addSubview(self.button)
    self.button.snp.makeConstraints {
      $0.left.right.bottom.equalToSuperview()
      $0.top.equalTo(self.view.safeAreaLayoutGuide.snp.bottom).offset(-60) // <- 추가
    }
  }
}