20250401 계산기 앱 만들기 TIL

1. 중첩 스택 뷰의 계층적 레이아웃 시스템

구현내용

verticalStackView.axis = .vertical
horizontalStackView.axis = .horizontal
verticalStackView.addArrangedSubview(horizontalStackView)

동작원리

• 계층 구조:

  UIStackView는 arrangedSubviews를 자동으로 관리하는 컨테이너 뷰입니다.

   - 세로 스택(verticalStackView)이 행을 담당
  
   - 가로 스택(horizontalStackView)이 열을 담당
     → 4x4 그리드 완성
     

• 분배 방식:
  distribution = .fillEqually 설정시:

  1. 부모 스택 뷰의 사용 가능 공간 계산
  2. 모든 서브뷰에게 동일한 크기 할당

// 버튼 제약 조건 없이도 자동 균등 분할
horizontalStackView.distribution = .fillEqually

장점

• 반응형 레이아웃: 기기 회전시 자동 재배치
• 코드 효율성: AutoLayout 제약 조건 90% 감소
• 시각적 일관성: 모든 버튼의 크기/간격 통일

2. 이중 배열과 중첩 반목문의 전략적 활용

let buttonTitles = [
    ["7", "8", "9", "+"], // 1행
    ["4", "5", "6", "-"], // 2행
    ["1", "2", "3", "×"], // 3행
    ["AC", "0", "=", "÷"] // 4행
]

반복문 처리 흐름

for row in buttonTitles { // 1. 행 추출
    let horizontalStackView = UIStackView() // 행 컨테이너 생성
    
    for title in row { // 2. 열 순회
        let button = UIButton() 
        button.setTitle(title, for: .normal) // 버튼 생성
        horizontalStackView.addArrangedSubview(button) // 행에 추가
    }
    
    verticalStackView.addArrangedSubview(horizontalStackView) // 세로 스택에 행 추가
}