UIStackView 안 버튼 정렬

hyun·2025년 6월 22일

목록 보기

21/54

벨로그 오류 뜨는 거 때문에
게시가 안 됐길래 확인해보니 썼던 내용 다 날렺버림ㄹㅇㅁ르,.ㅇㄴㄹ.....

ScrollView
 └── ContentView (UIView)
      └── StackView (UIStackView)
           ├── Book Info
           ├── Dedication
           ├── Summary
           └── Chapters

이 구조로 설계를 한 상황일 때

 UIStackView 안에서 버튼을 오른쪽 정렬하는 방법

 문제 상황

UIStackView에 UIButton을 넣었는데

버튼이 가운데에 정렬돼서 오른쪽으로 이동시키기 어려웠음

alignment, distribution 같은 기본 속성 때문에 위치 제어가 잘 안 됨

 원인

UIStackView는 축(axis) 방향으로 뷰를 배치하고

alignment는 축과 직각 방향 정렬을 결정함

수직 스택뷰(axis = .vertical)에 버튼 하나를 넣으면

alignment 기본값(.center)에 의해 수평 가운데 정렬됨

버튼이 하나일 경우 intrinsic content size만큼 공간을 차지하고

스택뷰는 그 버튼의 사이즈만큼 줄어들어 가운데 배치된 것처럼 보임

 컨테이너 뷰를 활용한 오른쪽 정렬

버튼을 감싸는 UIView를 만들고 그 UIView를 StackView에 넣고 내부에서 제약으로 버튼을 오른쪽 정렬함

 구조

UIStackView
└── UIView (컨테이너)
    └── UIButton (오른쪽 정렬)

 코드

let buttonContainer = UIView()
buttonContainer.addSubview(summaryToggleButton)

// 버튼을 컨테이너 오른쪽에 정렬
summaryToggleButton.snp.makeConstraints { make in
    make.trailing.equalToSuperview()
    make.top.bottom.equalToSuperview() // 세로 방향 고정
}

// 스택뷰에 버튼 대신 컨테이너 추가
summaryStackView.addArrangedSubview(buttonContainer)

// 컨테이너가 스택뷰 폭을 다 차지하게 설정
buttonContainer.snp.makeConstraints { make in
    make.leading.trailing.equalToSuperview()
}