UIScrollView

 

UIScrollView

스크롤뷰의 기초 속성

• Vertical ScrollView : 세로로 스크롤하는 스크롤 뷰
• Horizontal ScorllView : 가로로 스크롤하는 스크롤 뷰

 

스크롤 뷰 구현

스크롤 뷰를 구현하기 위해서는 스크롤 뷰에 들어갈 contentView 가 필요하다.

contentView : 스크롤 뷰 내부에서 실제로 스크롤 되어질 대상의 뷰를 말한다.

 

1. 스토리보드에 UIScrollView 생성

 

2. 스크롤 뷰 안에 UIView 생성

• 이것이 cntentView 이다.
• contentView 의 leading, trailing, top, bottom 은 scrollView.contentLayoutGuide 와 같게 설정한다.
• VerticalScrollView 를 만들기 위해서는 height 를 같게 설정한다.
•  contentView 본인의 height 를 설정한다. -> priority 250 으로 설정

3. 이번 예제에서는 컨텐트뷰에 다양한 색상의 뷰를 랜덤하게 노출하는 스택 뷰 구성.

• contentView 안에 StackView 생성
• 이 stackView 는 contentView 와 constraint 를 맞춰서 설정해준다.

 

스택뷰를 ctrl 을 누른채로 드래그해서 스토리보드에서 ViewController.swift 로 드랍한다.

이름은 verticalStackView 로 지었다.

 

4. 스택 뷰 내부에 자동으로 10개의 랜덤한 색상의 뷰를 생성하는 코드 작성

// ViewController.swift

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var verticalStackView: UIStackView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureStackView()
    }
    
    
    private func configureStackView() {
        for _ in 0..<10 {
            let randomView = randomColoredView()
            verticalStackView.addArrangedSubview(randomView)
        }
    }
    
    // 랜덤 색상을 가진 뷰 생성 함수.
    private func randomColoredView() -> UIView {
        let view = UIView()
        view.backgroundColor = UIColor(
            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
    }
 }

 

실행하면 스크롤 뷰가 완성된다.