[Swift] AutoLayout, ScrollView

AutoLayout 이란?

제약 조건을 기반으로 동적으로 크기와 위치를 계산하는 방법

- 디바이스의 view 사이즈에 따라 제약조건에 맞게 위치와 사이즈를 동적으로 조절

- 어느 디바이스에서든지 같은 레이아웃을 가지도록 합니다.

 

View의 속성

1. 위치 속성 - CenterX, Leading, Trailing, CenterY, Top, Bottom

2. 크기 속성 - Width, Height

- 고정되어 있는 절대값이 아닌, 조건(contraints)을 설정

 

    private func layout() {
        view.addSubview(firstView)
        view.addSubview(secondView)
        view.addSubview(thirdView)
        view.addSubview(fourthView)
        view.addSubview(fifthView)
        
        // 1
        firstView.snp.makeConstraints { make in 
            make.top.equalTo(self.view.safeAreaLayoutGuide).offset(149)
            make.leading.trailing.equalTo(self.view.safeAreaLayoutGuide).inset(70)
            make.height.equalTo(152)
        }
        
        // 2
        secondView.snp.makeConstraints { make in
            make.top.equalTo(firstView.snp.bottom).offset(23)
            make.leading.equalTo(self.view.safeAreaLayoutGuide).inset(70)
            make.height.equalTo(152)
            make.width.equalTo(115)
        }
        
        // 3
        thirdView.snp.makeConstraints { make in
            make.top.equalTo(firstView.snp.bottom).offset(23)
            make.leading.equalTo(secondView.snp.trailing).offset(5)
            make.trailing.equalTo(self.view.safeAreaLayoutGuide).inset(70)
            make.height.equalTo(32)
        }
        
        // 4
        fourthView.snp.makeConstraints { make in
            make.top.equalTo(thirdView.snp.bottom).offset(5)
            make.leading.equalTo(secondView.snp.trailing).offset(5)
            make.trailing.equalTo(self.view.safeAreaLayoutGuide).inset(70)
            make.height.equalTo(32)
        }
        
        // 5
        fifthView.snp.makeConstraints { make in
            make.top.equalTo(fourthView.snp.bottom).offset(5)
            make.leading.equalTo(secondView.snp.trailing).offset(5)
            make.trailing.equalTo(self.view.safeAreaLayoutGuide).inset(70)
            make.height.equalTo(76)
        }
    }

- 위 사진과 같은 뷰를 만들기 위해서 작성한 코드

 

Safe Area

- 안전하게 컨텐츠를 표시할 수 있는 영역

- 화면을 가득 채워야 하지 않는 이상 Safe Area를 사용해 레이아웃 잡는 것이 보편적

iPhone 14의 safe area

UIScrollView

- 자체적으로 가지는 컨텐츠의 스크롤 및 확대/축소를 가능하게 해주는 뷰

- 상하뿐만 아니라 좌우로도 가능

- 컨텐츠의 길이가 화면보다 길거나 클 경우 스크롤 동작 가능, 컨텐츠 길이가 작을 때는 동작하지 않음

 

AutoLayout in ScrollView

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        view.addSubview(containerView)
        containerView.addSubview(firstView)
        containerView.addSubview(secondView)
        containerView.addSubview(thirdView)
        
        containerView.snp.makeConstraints { make in
            make.edges.equalTo(self.view.safeAreaLayoutGuide) // scroll view 다 위아래 밀착
        }
        
        firstView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.leading.trailing.equalTo(self.view.safeAreaLayoutGuide)
            make.height.equalTo(337)
        }
        
        secondView.snp.makeConstraints { make in
            make.top.equalTo(firstView.snp.bottom).offset(45)
            make.leading.trailing.equalTo(self.view.safeAreaLayoutGuide)
            make.height.equalTo(337)
        }
        
        thirdView.snp.makeConstraints { make in
            make.top.equalTo(secondView.snp.bottom).offset(45)
            make.leading.trailing.equalTo(self.view.safeAreaLayoutGuide)
            make.height.equalTo(337)
            make.bottom.equalToSuperview().offset(-45)
        }
    }

- 위를 구현하기 위한 전체 코드

 

        containerView.snp.makeConstraints { make in
            make.edges.equalTo(self.view.safeAreaLayoutGuide) // scroll view 다 위아래 밀착
        }

- ScrollView를 safe area 전체에 밀착

 

        thirdView.snp.makeConstraints { make in
            make.top.equalTo(secondView.snp.bottom).offset(45)
            make.leading.trailing.equalTo(self.view.safeAreaLayoutGuide) // ?
            make.height.equalTo(337)
            make.bottom.equalToSuperview().offset(-45) // 하단 제약
        }

- leading과 trailing을 스크롤뷰가 아닌 safe area에 맞추는 이유?

- 마지막 컴포넌트는 스크롤뷰와의 하단 제약을 꼭 주어야 함