[iOS] SnapKit SafeArea 고려하기

SnapKit SafeArea 고려하기

 

✅ 이번 시간에는 SanpKit을 사용하면서 SafeArea를 고려하는 것에 대해서 알아볼 예정이야.

 

- (업데이트) 2022.01.21 : 공부를 하다가 보니 더 좋은 방법을 발견함.

- (업데이트) 2022.05.08: SnapKit 정리 글 포스팅 추가

- 아래 포스팅에서 스냅킷에 대한 추가적인 사항을 지속적으로 업데이트 합니다. 또한 내가 보아도 글이 더 좋아요.

2021.08.25 - [iOS/SnapKit] - iOS Snapkit 나만의 정리 모음

iOS Snapkit 나만의 정리 모음

 

 

 

우선 이걸 왜 고민하게 되었느냐? 

개발을 하다 보니, 아이폰에서 기기에 따라 노치가 있는 기기도 있고 없는 기기도 있어.

그래서 snapkit을 이용하여 레이아웃을 주었더니, 나중에 확인해 보니까, 기기에 따라 원하는 결과를 받지 못하는 문제가 발생하더라고.

그런데 나는, 아이폰 12 pro Max를 기준으로 레이아웃을 전부 다 잡아둔 뒤, 기기대응을 확인하는 과정에서 아이폰 se2로 시뮬레이터를 돌려보니까,, 그제서야 딱 원하는 레이아웃 결과물이 아니였다는 것을 발견한거야 ㅠㅠ

 

그렇다면 우리는 어떻게 작성하면 좋을까?

내가 생각한 방법으로는 바로

1️⃣ SafeArea를 정의하는 뷰 만들기

2️⃣ view.addSubview(SafeArea)를 작성하기

3️⃣ SnapKit의 제약조건을 SafeArea로 걸기

이 흐름대로 진행하면 해결할 수 있겠다.

 

4️⃣ 2022.01.21 (업데이트) : 공부를 하다가 보니 더 좋은 방법을 발견함.

 

그렇다면 SareArea는 어떻게 정의해줄까?

import UIKit
import SnapKit

class MyMainView: UIViewController {   
   
   let safetyArea: UIView = {
        let v = UIView()
        v.backgroundColor = .black
        return v
    }()
    
    lazy var myCenterButton: UIButton = {
        let btn = UIButton()
        btn.setTitle("My Button(C) ", for: .normal)
        btn.backgroundColor = UIColor.red
        return btn
    }()
   
   override func viewDidLoad() {
        super.viewDidLoad()
        
        setBaseView()
        setView()
   }  
   
   
   func setBaseView(){
        safetyArea.translatesAutoresizingMaskIntoConstraints = false // 코드로 제약조건을 주기위해서 꼭 들어가야 하는 코드
        view.addSubview(safetyArea)
        if #available(iOS 11, *) {
            let guide = view.safeAreaLayoutGuide
            safetyArea.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
            safetyArea.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            safetyArea.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            safetyArea.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            
        } else {
            safetyArea.topAnchor.constraint(equalTo: topLayoutGuide.topAnchor).isActive = true
            safetyArea.bottomAnchor.constraint(equalTo: bottomLayoutGuide.bottomAnchor).isActive = true
            safetyArea.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
            safetyArea.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        }
    }
    
     func setView() {
        safetyArea.addSubview(myCenterButton)
        
        myCenterButton.snp.makeConstraints { (make) in
            make.center.equalTo(safetyArea)
        }
     }
 }

 

 

✅ 2022.01.21 (업데이트) : 공부를 하다가 보니 더 좋은 방법을 발견함.

        view.snp.makeConstraints {
            $0.top.equalTo(view.safeAreaLayoutGuide)
        }

애초에 스위프트 기본 언어에서 safeAreaLayoutGuide를 제공해준다. 

이제는 이렇게 쓰자!

 

 

 

(참고)

https://no-b-rain.tistory.com/4

[iOS] - SnapKit : Layout 정리

 

https://zeddios.tistory.com/474

iOS ) translatesAutoresizingMaskIntoConstraints