Swifter {Swift Developer}

메뉴

UI요소 사용기본 – 1.아울렛 연결과 액션 연결하기

(1) Ui요소와 코드 연결하기

UI요소와 코드를 연결시키는 방법은 아울렛 연결과 액션 연결이 있다.  아울렛 연결코드쪽에서 UI요소에 대해 어떤 작업을 할 경우에 대한 연결 방법이다. 액션 연결은 UI요소에서 소스코드에 대해 어떤 알림을 실시하고 싶은 경우에 대한 연결방법이다.

예로 화면에 배치되어 있는 레이블 문자열을 소스코드에서 변경하고 싶은 경우 아울렛 연결을 한다. 반대로 화면에 배치되어 있는 버튼에 어떤 실행을 하기 위해 소스코드에 전달하기 위해 액션 연결을 한다.

(2) 아울렛 연결 만들기

화면에 배치한 UI요소를 소스코드에서 조작하기 위해서는 아울렛 연결을 만들어야 한다. 새 Single View Application프로젝트를 만들고 Main.Storyboard에 Label요소를 배치한다.

다음 도구모음에서 [Show the Assistant Editor]아이콘을 클릭하고 어시스턴트 편집기를 본다. 그럼 ViewController.swift코드가 표시된다. ViewController.swift는 사용자와 상호 작용하는뷰를 생성하는 클래스이다.

8-001-1

그럼 이제 Label을 스토리보드에서 배치하고 [Control]키를 누른 상태에서 Label을 ViewController.swift소스코드 위로 드래그하면 Label에서 파란색 연결선이 나오면 그것을 internal class ViewController: UIViewController { 아래에 드롭한다.

8-002

연결패널이 표시되면 Connection을 Outlet, Name에는 [msgLbl]을 입력하고 [Connect]버튼을 클릭한다. 이 설정은 화면에 배치된 Label요소에 대한 name필드에 입력한 [msgLbl]이름을 통해 코드에서 참조할 수 있게 되었다.

8-003

@IBOutlet 으로 시작되는 라인이 하나 소스코드에 추가된다. 변수명 msgLbl이 이제 소스코드내에서 해당 라벨을 참조할 때 사용하게 된다.

Main.storyboard 가 연결된 ViewController.swift 소스코드를 보면 다음과 같이 구성되어 있다.

우선 viewDidLoad라는 것으로 화면(View)가 로드가 완료될 땟길행되는 코드들이 정의되는 부분이다. 화면의 초기화되는 처리를 담당한다고 보면 된다. 다음은 didReceiveMemoryWarning으로 이는 앱이 메모리부족등의 경고가 발생시 처리해되는 코드들이 선언되는 부분이다.

그럼 이제 이 소스코드에 아울엣으로 연결한 레이블을 사용하는 예제를 하나 만들어보자. Label에 표시되는 텍스트는 text속성을 선언해서 처리할 수 있다. 여기서 Text속성에 “Hello World”를 지정해서 화면에 텍스트를 표시해보자.

(3) 액션 연결하기

UI요소에 대해 실행하는 동작을 소스코드에 전달하기 위한 작업 연결을 해봅시다. 우선 화면에 Button요소를 추구하고 배치된 Button을 선택하고 [Control]키를 누른 상태로 소스코드로 드래그해서 드롭하거나 마우스 오른쪽 버튼을 눌러 처리하자.

8-004

연결패널이 표시되면 Connection에서 [Action],  Name은  [runBtn]을 입력하고 Type은 [UIButton], Event는 [Touch Up Inside]로 설정하고 [Connect]버튼을 클릭한다.

8-005

ViewController 소스코드에 추가된 버튼이 터치가 될 때 실행된다.

@IBAction을 통해 프로그램에 연결되었다는 것을 나타내고 메소드명은 Name에 입력했던 runBtn이 등록된다.

위와 같이 작업연결을 사용하여 화면에 배치된 Button이 터치될 때 Label텍스트가 “대한민국”으로 변경되는 코드를 추가해보자.

8-006

UI요소에서 발생하는 주요 이벤트 종류

 

이벤트 설명
Did End On Exit 편집후 포커스 없어짐
Editing Changed 편집
Editing Did Begin 편집할 때
Editing Did End 편집 종료할 때
Touch Cancel 터치 취소할 때
Touch Down 터치 다운시
Touch Down Repeat 여러번 터치 다운시
Touch Drag Enter 드래그하여 객체에 들어갔을 떄
Touch Drag Exit 드래그하여 객체 벗어날 때
Touch Drag Inside 객체를 터치하고 드래그할 때
Touch Drag Outside 객체를 터치하고 드래그하여 객체 밖으로 나올때
Touch Up Inside 컨트롤에서 터치업할 때
Touch Up Outside 통제가 안되는 영역에서 터치업할 때
Value Changed 값이 변경될 때

 

참고로 @IBOutlet, @IBAction이 아울렛 연결 및 작업 연결을 할 떄 사용한다는 것을 이해했을 것이다. 앱에서 표시되는 UI요소가 많으면 이들 아울렛 및 작업 연결로 UI요소와 연결시키지 어렵다.  이런 경우 소스코드에서 아울렛이나 액션 선언된 코드 줄표시 앞에 O으로 표시된 부분을 눌러 어떤 요소에 사용중인지를 체크할 수 있다.

8-007

(4) 연결 해제

Assistant Editor에서 만든 연결에 대한 속성 및 메소드명을 변경해야 하는 경우 연결해제를 한 후에 진행해야 한다. 연결 관련 내용이 남아 있는 경우 명칭 변경시 오류가 발생하기 때문에 주의하자.

8-008

Connection Inspectors를 선택하고 연결관리자에서 선택된 객체와 View Controller연결에 표시된 것을 [X]버튼을 클릭해서 해제할 수 있다.

 

Facebook Comments

카테고리:   Swift

댓글

죄송하지만 댓글은 닫혀 있습니다.

UI요소 사용기본 – 1.아울렛 연결과 액션 연결하기

(1) Ui요소와 코드 연결하기

UI요소와 코드를 연결시키는 방법은 아울렛 연결과 액션 연결이 있다.  아울렛 연결코드쪽에서 UI요소에 대해 어떤 작업을 할 경우에 대한 연결 방법이다. 액션 연결은 UI요소에서 소스코드에 대해 어떤 알림을 실시하고 싶은 경우에 대한 연결방법이다.

예로 화면에 배치되어 있는 레이블 문자열을 소스코드에서 변경하고 싶은 경우 아울렛 연결을 한다. 반대로 화면에 배치되어 있는 버튼에 어떤 실행을 하기 위해 소스코드에 전달하기 위해 액션 연결을 한다.

(2) 아울렛 연결 만들기

화면에 배치한 UI요소를 소스코드에서 조작하기 위해서는 아울렛 연결을 만들어야 한다. 새 Single View Application프로젝트를 만들고 Main.Storyboard에 Label요소를 배치한다.

다음 도구모음에서 [Show the Assistant Editor]아이콘을 클릭하고 어시스턴트 편집기를 본다. 그럼 ViewController.swift코드가 표시된다. ViewController.swift는 사용자와 상호 작용하는뷰를 생성하는 클래스이다.

8-001-1

그럼 이제 Label을 스토리보드에서 배치하고 [Control]키를 누른 상태에서 Label을 ViewController.swift소스코드 위로 드래그하면 Label에서 파란색 연결선이 나오면 그것을 internal class ViewController: UIViewController { 아래에 드롭한다.

8-002

연결패널이 표시되면 Connection을 Outlet, Name에는 [msgLbl]을 입력하고 [Connect]버튼을 클릭한다. 이 설정은 화면에 배치된 Label요소에 대한 name필드에 입력한 [msgLbl]이름을 통해 코드에서 참조할 수 있게 되었다.

8-003

@IBOutlet 으로 시작되는 라인이 하나 소스코드에 추가된다. 변수명 msgLbl이 이제 소스코드내에서 해당 라벨을 참조할 때 사용하게 된다.

Main.storyboard 가 연결된 ViewController.swift 소스코드를 보면 다음과 같이 구성되어 있다.

우선 viewDidLoad라는 것으로 화면(View)가 로드가 완료될 땟길행되는 코드들이 정의되는 부분이다. 화면의 초기화되는 처리를 담당한다고 보면 된다. 다음은 didReceiveMemoryWarning으로 이는 앱이 메모리부족등의 경고가 발생시 처리해되는 코드들이 선언되는 부분이다.

그럼 이제 이 소스코드에 아울엣으로 연결한 레이블을 사용하는 예제를 하나 만들어보자. Label에 표시되는 텍스트는 text속성을 선언해서 처리할 수 있다. 여기서 Text속성에 “Hello World”를 지정해서 화면에 텍스트를 표시해보자.

(3) 액션 연결하기

UI요소에 대해 실행하는 동작을 소스코드에 전달하기 위한 작업 연결을 해봅시다. 우선 화면에 Button요소를 추구하고 배치된 Button을 선택하고 [Control]키를 누른 상태로 소스코드로 드래그해서 드롭하거나 마우스 오른쪽 버튼을 눌러 처리하자.

8-004

연결패널이 표시되면 Connection에서 [Action],  Name은  [runBtn]을 입력하고 Type은 [UIButton], Event는 [Touch Up Inside]로 설정하고 [Connect]버튼을 클릭한다.

8-005

ViewController 소스코드에 추가된 버튼이 터치가 될 때 실행된다.

@IBAction을 통해 프로그램에 연결되었다는 것을 나타내고 메소드명은 Name에 입력했던 runBtn이 등록된다.

위와 같이 작업연결을 사용하여 화면에 배치된 Button이 터치될 때 Label텍스트가 “대한민국”으로 변경되는 코드를 추가해보자.

8-006

UI요소에서 발생하는 주요 이벤트 종류

 

이벤트 설명
Did End On Exit 편집후 포커스 없어짐
Editing Changed 편집
Editing Did Begin 편집할 때
Editing Did End 편집 종료할 때
Touch Cancel 터치 취소할 때
Touch Down 터치 다운시
Touch Down Repeat 여러번 터치 다운시
Touch Drag Enter 드래그하여 객체에 들어갔을 떄
Touch Drag Exit 드래그하여 객체 벗어날 때
Touch Drag Inside 객체를 터치하고 드래그할 때
Touch Drag Outside 객체를 터치하고 드래그하여 객체 밖으로 나올때
Touch Up Inside 컨트롤에서 터치업할 때
Touch Up Outside 통제가 안되는 영역에서 터치업할 때
Value Changed 값이 변경될 때

 

참고로 @IBOutlet, @IBAction이 아울렛 연결 및 작업 연결을 할 떄 사용한다는 것을 이해했을 것이다. 앱에서 표시되는 UI요소가 많으면 이들 아울렛 및 작업 연결로 UI요소와 연결시키지 어렵다.  이런 경우 소스코드에서 아울렛이나 액션 선언된 코드 줄표시 앞에 O으로 표시된 부분을 눌러 어떤 요소에 사용중인지를 체크할 수 있다.

8-007

(4) 연결 해제

Assistant Editor에서 만든 연결에 대한 속성 및 메소드명을 변경해야 하는 경우 연결해제를 한 후에 진행해야 한다. 연결 관련 내용이 남아 있는 경우 명칭 변경시 오류가 발생하기 때문에 주의하자.

8-008

Connection Inspectors를 선택하고 연결관리자에서 선택된 객체와 View Controller연결에 표시된 것을 [X]버튼을 클릭해서 해제할 수 있다.

 

Facebook Comments

카테고리:   Swift

댓글

죄송하지만 댓글은 닫혀 있습니다.