[트러블슈팅 | Acon] 태그 버튼 재사용 및 레이아웃 (feat. UIStackView)

1️⃣ 구현하려는 것

• 같은 태그 버튼이 여러 번 재사용되고 있음.
• 태그 버튼들은 모두 일정한 간격으로 떨어져 있고, 왼쪽 정렬이 되어 있음. (오른쪽 여백의 너비는 매번 달라짐)
• 장소 검색 시 필터링을 위해 어떤 버튼이 선택 되었는지 알 수 있어야 함.

 

 

2️⃣ 생각한 방법

2.1. 컬렉션뷰로 할까?

컬렉션뷰로 구현한다면 데이터 파악과 UI 설정이 쉬울 것이라 생각했습니다.

이유:

1. 인덱스 번호로 어떤 버튼이 선택되었는지 쉽게 알 수 있고
2. 버튼이 너비를 넘어갈 경우 컬렉션 뷰가 자동으로 2번째 줄로 넘겨주기 때문에

2.2. 컬렉션뷰 기각!

하지만 레이아웃을 매 아이템마다 다르게 업데이트 해줘야 하는 번거로움이 있었습니다.

2.3. 스택뷰로 가자!

위와 같은 이유로 스택뷰로 구현하게 되었습니다.

→ 반복되는 코드를 줄이고 재사용하기 위해 버튼과 스택뷰를 컴포넌트로 만들었습니다.

 

그러나 스택뷰도 편하지만은 않았습니다.

 

3️⃣ 스택뷰 사용의 트러블 & 슈팅

3.1. 태그 버튼 2줄

트러블) 태그 버튼이 2줄인 경우, 직접 데이터를 나눠야 함.

 

슈팅1) 버튼을 생성할 때

위 사진처럼 태그 버튼이 2줄로 나뉘는 경우가 있기 때문에

firstLineStackView, secondLineStackView를 생성했고,

데이터를 2줄로 분리해서 버튼을 생성했습니다.

let firstLine: [String] = Array(tagTexts[0..<spotType.firstLineCount])
let secondLine: [String] = Array(tagTexts[spotType.firstLineCount...])

 

슈팅2) 어떤 버튼이 선택 되었는지 확인할 때

arrangedSubViews 속성과 반복문을 활용해 확인했습니다.

for (i, button) in spotListFilterView.firstLineSpotTagStackView.arrangedSubviews.enumerated() {
    let tagButton = button as? FilterTagButton ?? UIButton()
    if tagButton.isSelected {
        optionList.append(optionServerkeys[i])
    }
}

for (i, button) in spotListFilterView.secondLineSpotTagStackView.arrangedSubviews.enumerated() {
    let tagButton = button as? FilterTagButton ?? UIButton()
    if tagButton.isSelected {
        optionList.append(optionServerkeys[i + spotType.firstLineCount])
    }
}

 

3.2. 태그 버튼 오른쪽 여백

트러블) 스택뷰 특성상, 오른쪽에만 여백을 두는 방법 없음

태그 버튼 사이즈와 간격이 고정이기 때문에 디자인상 오른쪽에 여백이 있습니다.

하지만 스택뷰 특성상, 너비가 고정된 상태에서 오른쪽에만 여백을 두는 방법이 없습니다. (혹시 있나요…?)

spacing을 조정하거나, buttonSize를 조정하는 방법만 있기 때문에,

 

슈팅) HuggingPriority가 낮은 emptyView 컴포넌트 생성

huggingPriority가 낮은 emptyView를 만들었습니다.

다른 부분에서도 이런 emptyView를 쓸 일이 있었기 때문에 별도의 컴포넌트로 만들었습니다.

class PriorityLowEmptyView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setContentHuggingPriority(.defaultLow, for: .horizontal)
        setContentHuggingPriority(.defaultLow, for: .vertical)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
}