[TIL / 25.03.28] 과제 5, 스택뷰가 보이지 않는 문제 해결

 

1. 메인 트러블슈팅

버튼이 출력되지 않던 문제, configure 이전에 setupUI를 해주어 count가 넘어가지 않고 0인채로 렌더링하고 끝나는 줄 알았는데, 그렇다고 데이터가 후에 바인딩 되던게 여기서는 안될 리가 없었다.

 

//
//  BookSeriesView.swift
//  HarryPotterBooks
//
//  Created by 송규섭 on 3/28/25.
//

import UIKit

class BookSeriesView: UIView {
    
    private var seriesCount: Int = 0
    
    private let stackView = UIStackView().then {
        $0.axis = .horizontal
        $0.spacing = 8
//        $0.alignment = .center
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented.")
    }
    
    private func setupUI() {
        setupHierarchy()
        setupConstraints()
    }
    
    private func setupHierarchy() {
        addSubview(stackView)
    }
    
    private func setupConstraints() {
        stackView.snp.makeConstraints {
            $0.directionalEdges.equalToSuperview()
        }
    }
    
    private func createSeriesButtons() {
        var buttons = [UIButton]()
        
        for i in 0..<seriesCount {
            let button = UIButton()
            let buttonStateHandler: UIButton.ConfigurationUpdateHandler = { button in
                if button.isSelected {
                    button.backgroundColor = .systemBlue
                    button.setTitleColor(.white, for: .normal)
                } else {
                    button.backgroundColor = .systemGray
                    button.setTitleColor(.systemBlue, for: .normal)
                }
            }
            button.configurationUpdateHandler = buttonStateHandler
            button.setTitle(String(i + 1), for: .normal)
            buttons.append(button)
        }
        
        buttons.forEach { stackView.addArrangedSubview($0) }
    }
    
    func configure(_ count: Int) {
        self.seriesCount = count
        createSeriesButtons()
    }
    
}

 

이렇게 두고 상위 뷰의 영역에 대한 제약조건을 정해주면 스택뷰를 이루는 서브뷰들의 제약조건이 알아서 설정될 줄 알았는데, 

Button들은 디버깅 중에 제대로 메모리에 올라가있음을 확인, 이를 확인해 남은 가능성은 제약조건인가? 하고 하나하나 고쳐가던 중

문제는 하위 요소의 제약조건을 제대로 걸지 않고 상위로 이를 결정지으려했음을 확인.

이후에 스택뷰 내에 버튼 인스턴스 생성 시 size에 대한 명확한 조건을 주어 오히려 상위 뷰의 제약조건이 하위 뷰를 따라가도록 설정.

 

결국, 하위뷰의 제약조건이 확실히 정해져있으면 상위 뷰는 이를 따라갈 수 있다고 전에 포스팅한 바 있는데 거꾸로는 안될까하고 시도했던 게 되지 않는 것을 확인하고 좋은 경험했다 !