[TIL] 2024. 07. 04

UISegmentedControl

UISegmentedControl은 iOS 앱에서 여러 개의 세그먼트로 나누어진 컨트롤로, 사용자가 선택할 수 있는 버튼 그룹을 제공합니다. 각 세그먼트는 버튼처럼 동작하며, 하나의 세그먼트를 선택하면 다른 세그먼트는 자동으로 선택 해제됩니다. 이 컨트롤은 옵션을 그룹화하여 사용자가 하나의 옵션을 선택하도록 하는 데 유용합니다.

UISegmentedControl 사용 예시

주요 기능 및 사용 방법

1. 세그먼트 추가 및 설정
   • 각 세그먼트는 텍스트 또는 이미지로 설정할 수 있습니다.
   • 세그먼트를 프로그래matically 또는 인터페이스 빌더를 통해 추가할 수 있습니다.
2. 선택된 세그먼트 가져오기 및 설정
   • selectedSegmentIndex 속성을 통해 현재 선택된 세그먼트의 인덱스를 가져오거나 설정할 수 있습니다.
3. 이벤트 처리
   • UISegmentedControl의 값이 변경될 때마다 호출되는 타겟-액션 메커니즘을 사용하여 이벤트를 처리할 수 있습니다.

 

Swift 코드 예제

아래는 Swift로 UISegmentedControl을 설정하고 사용하는 간단한 예제입니다.

import UIKit
import SnapKit

class ViewController: UIViewController {

    let segmentedControl: UISegmentedControl = {
        let items = ["First", "Second", "Third"]
        let control = UISegmentedControl(items: items)
        control.selectedSegmentIndex = 0
        return control
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(segmentedControl)
        
        // SnapKit을 사용하여 Auto Layout 설정
        segmentedControl.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
            $0.width.equalTo(200)
        }
        
        // 값 변경 이벤트 처리
        segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), for: .valueChanged)
    }
    
    @objc func segmentedControlValueChanged(_ sender: UISegmentedControl) {
        switch sender.selectedSegmentIndex {
        case 0:
            print("First segment selected")
        case 1:
            print("Second segment selected")
        case 2:
            print("Third segment selected")
        default:
            break
        }
    }
}

주요 구성 요소 설명

1. UISegmentedControl 생성
   • let control = UISegmentedControl(items: items)를 통해 세그먼트를 생성합니다.
2. SnapKit을 사용한 Auto Layout 설정
   • segmentedControl.snp.makeConstraints { ... } 블록 내에서 SnapKit의 $0.centerX.equalToSuperview(), $0.centerY.equalToSuperview(), $0.width.equalTo(200)를 사용하여 제약 조건을 설정합니다.
3. 값 변경 이벤트 처리
   • segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), for: .valueChanged)를 통해 세그먼트의 값이 변경될 때 호출될 메서드를 지정합니다.

 

UISegmentedControl의 주요 속성 및 메서드

• items: 세그먼트의 항목을 설정합니다.
• selectedSegmentIndex: 현재 선택된 세그먼트의 인덱스를 가져오거나 설정합니다.
• insertSegment(withTitle:at:animated:): 특정 위치에 새로운 세그먼트를 추가합니다.
• removeSegment(at:animated:): 특정 위치의 세그먼트를 제거합니다.
• setTitle(_:forSegmentAt:): 특정 세그먼트의 제목을 설정합니다.
• setImage(_:forSegmentAt:): 특정 세그먼트의 이미지를 설정합니다.
• addTarget(_:action:for:): 세그먼트 값이 변경될 때 호출될 타겟과 액션을 설정합니다.

 

결론

UISegmentedControl은 여러 옵션 중 하나를 선택할 수 있는 간단하고 직관적인 방법을 제공합니다. 이를 통해 사용자는 여러 개의 관련된 옵션을 쉽게 선택하고 전환할 수 있으며, 개발자는 이를 통해 깔끔하고 효율적인 사용자 인터페이스를 구현할 수 있습니다.