본문 바로가기
UIKit

코드베이스로 UISegmentedControl 구현하기

by 리버🐦‍🔥 2023. 10. 11.
<UISegmentedControl>
  • 다중 선택 옵션을 제공하는 컨트롤
  • 여러 세그먼트 중 하나를 선택할 수 있다.
[Method & Property]
  • backgroundColor: 배경 색을 지정한다.
  • setTitle(): 버튼에 넣을 텍스트를 지정한다.
  • setTitleColor(): 버튼의 텍스트 색상을 지정한다.
  • addTarget(): 버튼의 이벤트에 대한 액션을 추가한다.
등… 프로퍼티 및 메서드 추가로 공부해보기!
//
//  UISegmentedControlTest.swift
//  UIKit-Study
//
//  Created by Kyungsoo Lee on 2023/09/30.
//

import UIKit

class UISegmentedControlTest: UIViewController {
    // MARK: - UISegmentedControl
    private lazy var uiSegmentedControl: UISegmentedControl = {
        let items = ["Item 1", "Item 2", "Item 3"]
        let segmentedControl = UISegmentedControl(items: items)
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged), for: .valueChanged)
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false
        return segmentedControl
    }()
    
    // MARK: - UISegmentedControl이 눌렸을 때 호출되는 액션 함수
    @objc func segmentedControlValueChanged() {
        let selectedSegmentIndex = uiSegmentedControl.selectedSegmentIndex
        print("Selected Segment Index: \\(selectedSegmentIndex)")
    }
    
    // MARK: - viewDidLoad
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        self.view.backgroundColor = .systemGray
        
        // 뷰 추가(아직 layout 설정 안된 상태)
        self.view.addSubview(self.uiSegmentedControl)
        
        setLayout()
    }
    
    // MARK: - UISegmentedControl
    private func setUISegmentedControlLayout() {
        let uiSegmentedControlConstraint = [
            uiSegmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            uiSegmentedControl.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ]
        NSLayoutConstraint.activate(uiSegmentedControlConstraint)
    }
    // MARK: - 전체 제약조건 설정
    // 컴포넌트들의 레이아웃을 설정한다
    private func setLayout() {
        // 프레임 기반의 레이아웃을 비활성화 하여 오토 레이아웃을 기반으로 설정할 수 있도록 한다.
        
        // UISegmentedControl 제약조건 설정
        setUISegmentedControlLayout()
    }
}

// UIKit으로 짠 화면을 SwiftUI로 바로 볼 수 있게 해주는 코드
import SwiftUI

@available(iOS 13.0.0, *)
struct UISegmentControlTestPreview: PreviewProvider {
    static var previews: some View {
        UISegmentedControlTest().toPreview()
    }
}