[Project] Mission 01

개발하는 정대리 개인 미션 과제

오토레이아웃을 StoryBoard 형식, No StoryBoard 형식, SnapKit 적용 형식 등 세 가지 방식으로 만든다.

iPhone 14 Pro 화면

iPhone SE 3rd 화면

---

StoryBoard 에서 오토레이아웃 적용

전체 코드 보기

---

No StoryBoard 형식으로 오토레이아웃 적용

StoryBoard 에서 오토레이아웃을 적용한 것을 바탕으로 스토리보드 없이 코드로 만든 화면입니다.

SnapKit 사용 x

let scrollView: UIScrollView = {
    let view = UIScrollView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.showsVerticalScrollIndicator = false
    return view
}()

// ScrollView
NSLayoutConstraint.activate([
    scrollView.topAnchor.constraint(equalTo: guide.topAnchor),
    scrollView.bottomAnchor.constraint(equalTo: guide.bottomAnchor),
    scrollView.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: guide.trailingAnchor),

    scrollView.contentLayoutGuide.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
    scrollView.contentLayoutGuide.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
    scrollView.contentLayoutGuide.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
    scrollView.contentLayoutGuide.topAnchor.constraint(equalTo: containerView.topAnchor),

    scrollView.frameLayoutGuide.widthAnchor.constraint(equalTo: containerView.widthAnchor, multiplier: 1)
])

전체 코드 보기

---

SnapKit 사용

import SnapKit
import Then

// Then 사용
lazy var scrollView: UIScrollView = UIScrollView().then {
    $0.showsVerticalScrollIndicator = false
    $0.addSubview(contentView)
}

lazy var contentView: UIView = UIView().then {
    $0.addSubview(titleLbl)
    $0.addSubview(subTitleLbl)
    $0.addSubview(logoImg)
    $0.addSubview(stackView)
}

// ScrollView & ContentView
scrollView.snp.makeConstraints {
    $0.edges.equalTo(self.view.safeAreaLayoutGuide.snp.edges)
}

contentView.snp.makeConstraints {
    $0.edges.equalTo(scrollView.contentLayoutGuide.snp.edges)
    $0.width.equalTo(scrollView.frameLayoutGuide.snp.width)
}

전체 코드 보기

 

 

---