[iOS] UI ↔ Swift Code 연결하기

2024년 3월 21일 목요일  

 

Xcode에서 main Storyboard와 ViewController를 연결하는 기본적인 로직을 정리해 봅니다.

 

#1 Storyboard와 ViewController 연결

#2 @IBOulet 을 사용하여 UITextLabel 과 Code 연결

#3 @IBAction 을 사용하여 UIButton 과 Code 연결

 

---

 

#1
Storyboard와 ViewController 연결

 

우측 Identity Inspector에서 Custom Class 영역의 Class 부분을 확인하고

해당 부분에서 원하는 커스텀하게 만들어준 ViewController와 연결하기

 

 

#2
@IBOutlet 사용하여 UITextLabel ↔ 코드 연결

 

@IBOutlet이란?

인터페이스 빌더와 코드를 연결하기 위해 사용되는 것으로 사용자 인터페이스의 요소인 버튼, 레이블, 텍스트필드 등의 뷰 컴포넌트를 코드와 연결하는데 사용되는 선언으로 연결된 코드는 해당 요소에 대한 참조를 얻을 수 있다. 일반적으로 UI 요소의 속성을 코드에서 변경하거나 상태를 읽어온다.

 

 

ctrl + drag 한 상태로 오른쪽 코드에 캔버스를 끌고와 놓아주고, 선언될 변수명을 입력한다음 Connect 버튼을 클릭하면, Storyboard와 ViewController의 textLabel 변수와 연결된다.

 

 

#3
@IBAction 을 사용하여 UIButton ↔ 코드 연결

 

@IBAction이란?

사용자가 특정 이벤트를 트리거할 때 실행될 함수와 연결지어주는 기능으로 사용자가 상호작용할 때 실행되는 메서드를 정의하기 위해 사용되며 주로 버튼 탭, 스위치 변경 등과 같은 이벤트에 응답하는 메서드와 연결한다.

 

 

1. Collection을 Action으로 변경
2. 선언될 함수명 입력
3. Type을 UIButton으로 설정 후 Connect 클릭
4. Storyboard와 ViewController의 tappedButton 함수가 연결 확인

 

▽. 버튼을 클릭하면 UILabel의 텍스트를 변경하고, UIButton을 비활성화 하는 코드

@IBOutlet weak var textLabel: UILabel!
    
@IBAction func tappedButton(_ sender: UIButton) {
    self.textLabel.text = "버튼을 클릭했습니다"
    let button = sender as? UIButton
		button?.isEnabled = false
}