[Twitter Clone] Add Indicator button in profile view

🟨 구현 화면

 

 

🟨 구현 순서

• profile View 내의 카테고리 별 버튼이 눌렸을 때, 눌린 것과 안눌린 것의 굵기 정도 차이를 준다. 
• 버튼 아래에 indicator 라는 지시선을 생성한다. 

 

 

🟨 ProfileViewController.swift 코드 구현

• 화면이 처음 로드될 때, 활성화된 버튼을 표시하기 위해 굵기 정도에 차이를 준다. 

    override init(frame: CGRect) {
        super.init(frame: frame)
    	
        ...
        configureStackButton()
    }
    
    
    private func configureStackButton() {
        for (i, button) in sectionStack.arrangedSubviews.enumerated() {
            guard let button = button as? UIButton else { return }
            
            
            // 처음 화면이 로드 되었을 때 보여주기 위함
            if i == selectedTab {
                button.tintColor = .label
            } else {
                button.tintColor = .secondaryLabel
            }
            
            button.addTarget(self, action: #selector(didTapTab(_: )), for: .touchUpInside)
        }
    }

 

 

• indicator 라는 변수를 생성한다.

    // 각 카테코리 버튼 아래 지시선
    private let indicator: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .lightGray
        return view
    }()

 

 

• 각 버튼의 글씨의 처음과 끝에 맞게 지시선을 갖고가야 한다. 
• 이를 위해 leadingAnchor, TrailingAnchor 라는 변수를 생성한다. 

    // indicatore 관련 제약조건 설정
    private var leadingAnchors: [NSLayoutConstraint] = []
    private var trailingAnchors: [NSLayoutConstraint] = []

 

 

• 제약 조건을 설정한다. 
• 별도에 생성한 leadingAchor, trailingAnchor를 생성한다.
• 선택된 버튼의 leading,  trailingAnchor에 저장한다.

private func configureConstraints() {
        
        for i in 0..<tabs.count {
            let leadingAnchor = indicator.leadingAnchor.constraint(equalTo: sectionStack.arrangedSubviews[i].leadingAnchor)
            leadingAnchors.append(leadingAnchor)
            let trailingAnchor = indicator.trailingAnchor.constraint(equalTo: sectionStack.arrangedSubviews[i].trailingAnchor)
            trailingAnchors.append(trailingAnchor)
        }
        
        ...
        
        
        // indicator 지시선 제약조건
        let indicatorConstraints = [
            leadingAnchors[0],
            trailingAnchors[0],
            indicator.topAnchor.constraint(equalTo: sectionStack.arrangedSubviews[0].bottomAnchor),
            indicator.heightAnchor.constraint(equalToConstant: 4)
        ]
        
    
      ..
        
        NSLayoutConstraint.activate(indicatorConstraints)
}