스토리보드로 UIScrollView 만들기

• Vertical ScrollView : 세로로 스크롤
• Horizontal ScrollView : 가로로 스크롤

 

ScrollView의 leading, trailing, top, bottom의 Constraints를 모두 0으로 세팅하고 사이즈를 늘려준다. 

 

 

세팅하고 나면 이렇게 에러가 뜨는 것을 볼 수 있다.

이유는 안에 아직 contentView가 없기 때문에 어디를 스크롤 해야할지 애매모호하다는 뜻이다. 

ScrollView는 안에 contentView가 없으면 의미가 없다. 

 

 

 

ScrollView 안에 UIView(contentView)를 넣어 주고 똑같은 사이즈로 늘려준다. 

 

 

 

view(contentView)를 클릭하고 마우스 우클릭하고 Content Layout Guide에 드래그앤 드랍

leading, trailing, top, bottom을 똑같이 맞춰준다. 

 

 

 

Vertical은 ScrollView와 view(contentView)의 width를 같게 설정 

 

 

 

간혹가다 Constraints의 오차범위가 생긴다면 1.0으로 맞춰준다.

 

 

 

 View(contentView) 자기 자신에게 드래그앤 드랍 후 본인의 Height를 설정 

 

 

 

priority 250 설정해 우선 순위를 낮춰준다. -> 다른 제약 조건이 생겼을 때 조금 밀려나도 된다는 의미 

이는, contentView 안에 여러개의 StackView가 들어와 높이를 초과하면 heigt의 우선순위가 밀려나 스크롤이 된다. 

여기까지 하면 빨간색 에러 표시가 사라진다. 

 

 

 

View 안에 StackView를 넣고 View와 크기를 맞춰준다.

 

 

 

StackView와 View를 드래그앤드랍 해서 leading, trailing, top, bottom을 똑같이 맞춰준다. 

이때도 오차가 있다면 지워준다. 

 

 

---

스토리보드와 코드 연결하기

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var verticalStackView: UIStackView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        configureStackView()
    }
    
    private func configureStackView() {
        //view를 10개 생성하는 반복문
        for _ in 1...10 {
            let randomView = randomColoredView() //아래 randomColoredView()에서 리턴된 UIView
            verticalStackView.addArrangedSubview(randomView) //스토리보드에 연결한 스택뷰에 randomView를 추가
        }
    }
    
    //랜덤한 색상을 가진 뷰 생성 함수
    private func randomColoredView() -> UIView {
        let view = UIView() //UIView 생성
        view.backgroundColor = UIColor(   //UIColor는 UIKit이 제공해주는 컬러 타입
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1),
            alpha: 1.0
        )
        view.heightAnchor.constraint(equalToConstant: 200).isActive = true   //높이설정.제약설정.활성화
        return view
    }
}