[2023-04-01] 개발일지

---

---

2023-04-01

1. Project

iOS 개인 미션(mission_01-1) / No Storyboard 방식

---

2. Process

로그인 화면 구성

---

3. Issue & Solution

(1) ScrollView 동작 오류

iPhone14 pro를 기준으로 화면을 만드는데, 기기를 변경하면서 화면이 작아지면 ScrollView를 통해 로그인 버튼을 누를 수 있도록 하려고 했지만 ScrollView가 정상적으로 작동하지 않았다.

(1) ScrollView 의 ContentLayoutGuide & FrameLayoutGuide

나는 ScrollView에 ContainerView를 넣어서 구현하려고 했다. 단순히 ScrollView의 크기에 맞춰 ContainerView의 Constraint를 맞춰주면 되는 줄 알았다. StoryBoard 형식으로 구현할 때, ContentLayout과 FrameLayout을 설정했던 것을 잊고 Constraint만 맞춰서 그렇다. 이 부분을 이렇게 수정해주었다.

// 기존 코드
// 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)
])

// ContainerView
NSLayoutConstraint.activate([
    containerView.topAnchor.constraint(equalTo: scrollView.topAnchor),
    containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
])

// 변경 코드
// 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)
])

위 코드처럼 해주면 ContainerView의 Constraint를 따로 정해줄 필요가 없어진다. 이 다음 ContainerView의 bottom 부분을 정해주어야 한다. 그럴 때는 아래와 같은 코드를 작성하면 된다. 여기서 btnsStackView가 가장 아래에 있는 요소라고 가정한다.

// Btn StackView
NSLayoutConstraint.activate([
    btnsStackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
    btnsStackView.topAnchor.constraint(equalTo: logoImg.bottomAnchor, constant: 20),
    btnsStackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 30),

    btnsStackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
    // btnsStackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -200),
])

(2) StackView 설정

처음 StackView를 설정할 때, distribution을 .fillEqually로 설정해주었다. 하지만 세 개의 버튼을 지정하면서 Constraint를 세 개 버튼 모두 주어 코드의 양이 많아졌다.

또 StackView의 옵션 중 하나인 alignment를 .center로 설정해서 버튼의 크기가 StackView의 크기보다 작아 Constraint로 버튼의 크기를 늘려주어야 했다.

(2) StackView 코드 수정

첫번째, .fillEqually로 설정이 되어 있기 때문에 하나의 버튼만 수정해주어도 모든 버튼에 적용이 된다. 따라서 코드의 길이를 줄일 수 있다.

또 alignment를 .center에서 .fill로 설정해주면서 StackView에 맞춰 Constraint를 지정할 필요가 없어졌다. 따라서 코드는 다음과 같이 변경된다.

// 기존 코드
// Btn StackView
NSLayoutConstraint.activate([
    btnsStackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
    btnsStackView.topAnchor.constraint(equalTo: logoImg.bottomAnchor, constant: 20),
    btnsStackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 30),
    btnsStackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -30),

    btn1.topAnchor.constraint(equalTo: btnsStackView.topAnchor),
    btn1.leadingAnchor.constraint(equalTo: btnsStackView.leadingAnchor),
    btn1.trailingAnchor.constraint(equalTo: btnsStackView.trailingAnchor),
    btn1.heightAnchor.constraint(equalToConstant:50),

    btn2.leadingAnchor.constraint(equalTo: btnsStackView.leadingAnchor),
    btn2.trailingAnchor.constraint(equalTo: btnsStackView.trailingAnchor),
    btn2.heightAnchor.constraint(equalToConstant: 50),

    btn3.leadingAnchor.constraint(equalTo: btnsStackView.leadingAnchor),
    btn3.trailingAnchor.constraint(equalTo: btnsStackView.trailingAnchor),
    btn3.heightAnchor.constraint(equalToConstant: 50),
])

// 변경 코드
// Btn StackView
NSLayoutConstraint.activate([
    btnsStackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
    btnsStackView.topAnchor.constraint(equalTo: logoImg.bottomAnchor, constant: 20),
    btnsStackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 30),

    btnsStackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
    startAnotherLoginBtn.heightAnchor.constraint(equalToConstant: 50)
])

두 개의 버튼은 클로저 형식으로 StackView를 만들 때 넣어주었고, startAnotherLoginBtn은 변수로 정해 높이를 설정해주었다. 이렇게 설정된 높이는 StackView 내부의 모든 버튼에 적용이 된다.

---

4. Today Study Contents

 

---

5. Reference

 

---

6. Plan Study for Tomorrow

 

---