2023년 1월 1일
08:00 AM
Buffering ...

최근 글 👑

[Swift-Study] IOS 앱 개발 입문 1주차 - 로직다루기

2024. 4. 2. 01:12ㆍIOS/Swift-Study
SMALL

로직다루기

UI ↔ Swift Code를 연결

"Storyboard"와 "ViewController" 연결 및 확인

 

"ViewController"와 연결할 스토리보드를 클릭 -> 우측 "Identity Inspector"에서 "Custom Class"영역의 "Class" 부분을 확인

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


@IBOutlet 사용 -> UITextLabel ↔ Code 연결

"Storyboard"에서 배치한 UI 컴포넌트들과 코드를 연결시켜주는 개념

@IBOutlet이란?

인터페이스 빌더와 코드를 연결하기 위해 사용되는 것

사용자 인터페이스의 요소인 버튼, 레이블, 텍스트필드 등의 뷰 컴포넌트를 코드와 연결하는데 사용되는 선언

일반적 - UI 요소의 속성을 코드에서 변경 or 상태를 읽어오기 위해 사용

STEP 1

Storyboard -> TextLabel 생성 -> Constraints 설정

STEP 2

Storyboard 우측 상단 두번째 버튼 클릭 -> Assistant 클릭

STEP 3

Main.storyboard와 연결된 ViewController.swift 파일 확인

STEP 4

ctrl + 드래그 ->  오른쪽 코드에 캔버스를 끌고와서 선언될 변수명을 입력 -> Connect 버튼을 클릭
"Storyboard"와 "ViewController"의 "textLabel" 변수와 연결된 것 확인


@IBAction 을 사용 -> UIButton ↔ Code 연결

@IBAction을 통해 UIButton의 클릭 이벤트를 받는 방법

@IBAction이란?

- 사용자가 특정 이벤트를 트리거할 때 실행될 함수와 연결지어주는 기능

- 실제로 사용자가 상호작용할 때 실행되는 메서드를 정의하기 위해 사용

- 주로 버튼 탭, 스위치 변경 등과 같은 이벤트에 응답하는 메서드와 연결

STEP 1

"UIButton"을 생성 -> "Constraints"를 설정

 

ctrl + drag -> 오른쪽 코드 캔버스

"Collection"을 "Action"으로 변경 -> 선언될 함수명을 입력

"Type"을 "UIButton"으로 설정 -> "Connect" 클릭

STEP 3

"Storyboard"와 "ViewController"의 "tappedButton" 함수가 연결된 것 확인

STEP 4

버튼을 클릭 -> "UILabel"의 텍스트를 변경 -> "UIButton"을 비활성화 하는 코드 작성

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