iOS SafeArea Layout (SnapKit)

iOS SafeArea Layout (SnapKit)

 

레이아웃을 잡아줄 때 SafeArea를 고려해서 원하는 사용성을 가져가야 함.

 

히스토리

• 2021.08.26.
  • 초기 포스팅 발행
• 2022.01.21.
  • LayoutGuideLine이 WWDC에 추가되어서 수정
• 2022.05.08.
  • SnapKit 사용하는 예제로 변경
• 2024.11.19.
  • 포스팅 작성 글 스타일 개선

스냅킷에 대한 추가적인 사항을 지속적으로 업데이트 중.

https://rldd.tistory.com/200

iOS Snapkit 나만의 정리 모음

 

배경

현재 노치의 경우 다이나믹 아일랜드가 있는 노치와 아이폰 X, 12 등 시리즈에 적용된 노치, 그리고 아이폰 7, SE에 존재하는 노치 등이 존재함.

상단 및 하단에 새로 생긴 컴포넌트로 인하여 앱 사용성에 문제가 생길 수 있음.

 

노치가 달라진 문제로 아이폰 12로 개발 완료 후 SE2로 빌드했을 때, 원하는 UI와 약간 다른 결과를 얻게 되었음.

어떤것이 문제일지 탐구해봄.

 

문제 해결

LayoutGuideLine이 나오기 전에는 키보드에 따라 레이아웃을 변경하는 등 어려움이 있었는데, 이제(24.11.19)는 최소 타겟이 그 이상으로 올라왔기 때문에 고려하지 않겠음.

 

import UIKit
import SnapKit

final class ContentView: UIView {   
   
    // MARK: UIComponents
   
    private let container: UIView = {
        $0.backgroundColor = .black
        return $0
    }(UIView())
    
    private let button: UIButton = {
        let btn = UIButton()
        btn.setTitle("My Button(C) ", for: .normal)
        btn.backgroundColor = UIColor.red
        return btn
    }()
   
   init() {
    	super.init(frame: .zero)

        autoLayout()
        snapKit()
   }
   
   // ✅ 오토레이아웃
   func autoLayout() {
		view.addSubview(container)
        container.translatesAutoresizingMaskIntoConstraints = false // 코드로 제약조건을 주기위해서 꼭 들어가야 하는 코드

        if #available(iOS 11, *) {
            let guide = view.safeAreaLayoutGuide
            container.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
            container.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            container.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            container.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            
        } else {
            container.topAnchor.constraint(equalTo: topLayoutGuide.topAnchor).isActive = true
            container.bottomAnchor.constraint(equalTo: bottomLayoutGuide.bottomAnchor).isActive = true
            container.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
            container.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        }
    }

    // ✅ 스냅킷
    privat efunc snapKit() {
        button.addSubview(myCenterButton)
        
        button.snp.makeConstraints { 
            // ✅ safeAreaLayoutGuide를 이렇게 줌
            $0.center.equalTo(view.safeAreaLayoutGuide)
        }
     }
 }