[한글 번역_04] Start Developing iOS Apps (Swift) - Building the UI > Connect the UI to Code

안녕하세요 카레유입니다.

Apple에서 제공해주는 Swift iOS 앱 개발 가이드를 한글 번역해보았습니다.

영어실력도, 개발실력도, 심지어 한국어 실력도 미흡합니다.

부족한 부분이 많지만, 많은 도움 되시길 바라겠습니다.

아직 작성 중인 내용으로 시간을 갖고 개선해 나갈 생각입니다.

감사합니다.

이번에 배워볼 내용은 UI엘리먼트들을 코드에 연결해보는 작업입니다.

text field에 텍스트를 입력하고, button을 누르면, label에 그 텍스트가 표시될거에요

이 정도 할줄 알면 기본은 끝난거죠^^

화이팅하세요!

Connect the UI to Code

이번 레슨에서는 FoodTracker 앱의 UI들을 코드로 연결하고, 사용자가 이 UI들을 통해 몬가 해볼 수 있는 action을 만들어 보겠습니다.(버튼을 누르면 모가 바뀐다든지...) 이번 레슨을 다 마치고나면, 아래와 같은 앱을 만들어 낼 수 있습니다.

Learning Objectives

At the end of the lesson, you’ll be able to:

• 스토리보드의 scene과 view controller의 관계

• 스토리보드의 UI엘리먼트와 소스코드 사이에 outlet과 action 연결(connection)하기

• 사용자가 text field에 입력한 내용을 UI에 보여주기

• 프로토콜(protocol)을 준수(conform)하는 클래스(class)만들기

• 델리게이션(delegation)패턴에 대한 이해

• target-action패턴을 통해 앱 아키텍쳐 설계하기

Connect the UI to Source Code

스토리보드에 있는 엘리먼트들은 소스코드로 연결될 수 있습니다. 소스코드와 스토리보드 사이의 연결 관계를 이해하는 것은 매우 중요합니다.

스토리보드에서 scene은 일반적으로 하나의 화면과 하나의 view controller를 갖고 있습니다. view controller는 앱의 작동방식을 구현하는 역할을 수행하며, 뷰계층구조 상의 모든 서브뷰들을 담고있는 컨텐츠뷰(content view)를 관리하게 됩니다. 앱의 데이터를 캡슐화하고 있는 Data Model과 정보를 주고 받으며, 이 데이터들을 보여줄 view들을 관리합니다. 또한 앱에 포함된 컨텐츠뷰들의 생애주기(life cycle)를 관리하고, 디바이스의 가로/세로 화면전환에 따른 화면 조정 작업, 앱내에서의 화면간 이동(navigation)작업 및 사용자의 입력에 반응하여 처리해야할 내용도 구현합니다. iOS의 viewController는 모두 UIViewController 타입/서브클래스입니다. 

view controller는 UIViewController 클래스를 상속받아 커스텀 클래스를 생성/구현함으로써 만들 수 있습니다. view controller 클래스와 스토리보드의 scene을 연결(Connection)하여, 스토리보드에 배치한 UI가 실제로 view controller에 코딩한대로 작동하게 할 수 있습니다.

Xcode는 이미 ViewController.swift를 통해 ViewController클래스를 만들어 두었으며, 이미 스토리보드의 scene과 연결까지 해두었습니다. 하지만 scene을 추가하게 된다면 identity inspector를 통해 직접 연결(connection)을 해주어야합니다. 이 작업은 Identity inspector를 통해 스토리보드에 있는 object의 identity에 대한 설정을 편집함으로써 할 수 있습니다. 아래 화면처럼 스토리보드에 있는 object가 어느 class에 속하는지 등을 설정할 수 있습니다.

실행 환경(runtime : 앱이 실행되고 있는 동안)에 들어가면, 스토리보드는 우리가 직접 제작한 ViewController의 인스턴스(instance)를 생성합니다. 이를 통해 앱의 화면에는 우리가 스토리보드에 정의한 UI가 보일 것이고, ViewController.swift에 정의한 동작들이 작동하게 될 것입니다.

scene이 ViewController.swift에 연결되어 있긴 하지만, 현재 연결되어 있는 것은 단지 scene 뿐입니다. 더 연결해주어야할 것이 있습니다. 바로 scene에 포함되어 있는 view들입니다. ViewController의 소스코드가 스토리보드에 있는 view들과 연결이 되어야만 서로 통신을 하여 적절한 작업을 할 수 있게 되는 것입니다. 그리고 이 view들과 ViewController 소스코드 사이의 연결은 outlet과 action을 정의함으로써 할 수 있습니다. 

Create Outlets for UI Elements

스토리보드에 추가한 객체를 소스코드에서 참조하기 위해서 사용하는 것이 바로 Outlet입니다. outlet을 생성하기 위해서는 스토리보드에 있는 객체를 선택하고 control을 누른 상태에서 소스코드로 드래그하여 넣으면 됩니다. 이렇게 하면 자동으로 해당 view에 대한 outlet 프로퍼티가 ViewController 소스코드에 생성 됩니다. 이 outlet 프로퍼티를 통해 런타임(runtime : 앱 실행) 환경에서 소스코드가 이 view객체에 접근하고 조작할 수 있게 됩니다.

그럼 이제 text field와 label을 참조하기 위한 outlet을 만들어보기로 합시다.

To connect the text field to the ViewController.swift code

1. Main.storyboard 파일을 클릭하여 스토리 보드를 열어주세요

2. 툴바 우측에 있는 Assistant버튼을 눌러서 assistant editor를 열어주세요

   

3. 화면이 좁아서 잘 안보이면, 툴바 우측에서 project navigator와 utility area를 숨겨주세요

   

   물론 outline view도 숨겨도 좋습니다.

4. assistant editor의 상단에 있는 editor selector bar에서 "Preview"로 선택된 항목을 "Automatic>ViewController.swift"로 변경해주세요.

   

   ViewController.swift의 내용이 우측 에디터에 표시됩니다

5. ViewController.swift파일에서 아래와 같이 class가 선언되어 있는 라인을 찾으세요

   1. class ViewController: UIViewController {

6. class선언 라인 바로 밑에 아래 내용을 추가하세요

   1. // MARK: Properties

   방금 추가한 것을 주석(comment)이라고 합니다. 주석(comment)는 소스코드 상에서 중요한 정보나 설명을 적을 때 사용하며, 컴파일 되지 않습니다.

   방금 추가한 "// MARK:"는 조금은 특별한 형태의 주석입니다. 여기부터 프로퍼티들을 나열하겠다는 의미인데, 코드들을 찾아볼 때 유용하게 사용할 수 있습니다. 실제 어떻게 사용하는지는 나중에 살펴보겠습니다.

7. 스토리보드에서 "text field"를 선택하세요.

8. control을 누른채로 text field를 클릭하여 오른쪽 assistant editor의 소스코드로 드래그하세요. 방금 추가한 "// MARK: Properties" 주석 바로 아래에 드래그 하면 됩니다.

   

9. 다이얼로그가 나타나면 Name 필드에 "nameTextField"를 입력하세요

   아래 화면과 같이 나머지 옵션은 그대로 두세요.

   

10. "Connect"를 클릭하세요

    Xcode가 ViewController.swift에 text field에 대한 pointer를 저장하기 위한 코드를 추가하며, 스토리보드에도 해당 연결(connection)을 설정합니다.

    1. @IBOutlet weak var nameTextField: UITextField!

잠시 이 코드를 보면서 무엇을 의미하는 것인지 한번 생각해보세요

@IBOutlet 이라는 속성은 여기서 선언한 nameTextField프로퍼티를 통해 인터페이스빌더에 있는 text field와 연결할 수 있음을 의미합니다. (이 점이 바로 IB라는 접두어(prefix)가 붙어있는 이유입니다.) "weak" 키워드는  nameTextField 프로퍼티가 특정 시점에는 nil(값이 없음)이 될 수 도 있다는 것을 의미합니다. "var nameTextField: UITextField" 는 UITextField 타입의 nameTextField 변수를 선언한 것입니다.

맨 뒤에 느낌표가 있다는 사실에 주목하세요! AppDelegate.swift파일에서 뒤에 느낌표가 있는 타입을 본적이 있을겁니다. 느낌표는 이 변수가 optional(nil이 될 수도 있음)로 선언 되었지만, 일단 초기값이 할당된 후에는 반드시 값을 갖는다는 것을 의미합니다. 이를 "implicitly unwrapped optional"이라고 합니다.

이제 Label을 동일한 방식으로 소스코드에 연결해보겠습니다.

To connect the label to the ViewController.swift code

1. 스토리보드에서 Label을 클릭하세요

2. Label을 control을 누른채 드래그하여 오른쪽 assistant editor의 nameTextField프로퍼티 바로 아래로 연결하세요

   

3. 다이얼로그가 나타나면 Name필드에 "mealNameLabel"이라고 입력하세요

   나머지 옵션은 아래 화면처럼 그대로 두세요

   

4. "Connect" 버튼을 클릭하세요

마찬가지로 ViewController.swift파일에 Label에 대한 pointer를 저장하기 위한 코드가 생성되고, 스토리보드에도 해당 연결이 세팅됩니다. text field의 outlet과는 이름과 객체타입(UILabel)만 다르고 나머진 모두 같습니다.

1. @IBOutlet weak var mealNameLabel: UILabel!

Now that you have a way to refer to the interface elements from code, you need to define an user-initiated event that triggers interaction between those elements. That’s where actions come in. 이제 코드를 통해 인터페이스의 엘리먼트를 참조할 수 있게 되었습니다. 이제 사용자가 엘리먼트들에 이벤트를 발생시켰을때, 어떤 동작이 발생시킬지를 정의해야합니다. 바로 액션(Action)이 나설 차례입니다.

Define an Action to Perform

iOS앱 개발은 "이벤트 처리 프로그래밍(event-driven programming)"이라고 할 수 있습니다. iOS앱이란 시스템에서 발생시키는 이벤트나 사용자 액션에 의해 발생하는 이벤트에 반응하는 과정이라고 할 수 있기 때문입니다. 사용자는 버튼을 누르거나, 화면을 문지르는 등 인터페이스에 액션을 가하고, 이로 인해 발생하는 이벤트를 받은 앱은 사전에 정의된 로직에 따라 데이터를 조작하고 계산하여 알맞은 결과를 화면에 보여줍니다. 따라서 사용자가 어떤 액션을 가했는지를 정확하게 파악하고, 그에 알맞는 작동을 구현하는 것이 중요합니다.

액션(action 혹은 action method)는 앱에서 이벤트가 발생했을 때 수행할 코드를 말합니다. 즉, 이벤트가 발생하면 액션 메서드에 정의한 코드가 수행되며, 액션 메서드를 통해 데이터를 처리하고, UI를 변경할 수 있습니다. 이를 통해 사용자/시스템 이벤트에 반응하여 수행되는 앱의 흐름(flow)를 제어할 수 있습니다.

outlet을 만들었던 것과 동일하게 action을 만들면 됩니다. 즉, 스토리보드에 있는 객체를 control을 누른 상태로 드래그 하여 ViewController 파일로 연결하면 됩니다. action을 만들면 ViewController파일에 메서드가 생성되고, 연결된 객체에 이벤트가 발생하면 이 메서드가 수행됩니다.

먼저 간단한 action부터 만들어 보겠습니다. 사용자가 "Set Default Label Text"버튼을 누르면 Label의 텍스트를 "Default Text"로 바꾸는 것입니다.(text field에 입력한 텍스트를 Label에 표시하는 작업과 유사한 내용으로, 다음 섹션에서 실제로 작성해보겠습니다)

To create a label reset action in the ViewController.swift code ViewController.swift 파일에 Label을 리셋하는 액션 만들기

1. ViewController.swift파일의 마지막 괄호( } ) 앞에 아래의 주석을 추가하세요 

   1. // MARK: Actions

   이 주석은 여기부터 action들을 정의하겠다는 것을 의미합니다.

2. 스토리보드에서 "Set Default Label Text" 버튼을 클릭하세요

3. control을 누른상태에서 버튼을 드래그 하여 방금 추가한 주석 바로 아래로 연결하세요

   

4. 다이얼로그가 나타나면 Connection 필드를 Action으로 선택하세요

5. Name필드에 "setDefaultLabelText"라고 입력하세요

6. Type 필드는 UIButton을 선택하세요.

   Type필드의 디폴트 값은 "AnyObject"으로 되어 있습니다. Swift에서 AnyObject는 어떤 클래스라도 될 수 있는 객체를 의미하는 타입니다. 이 action method의  type를 UIButton으로 설정하면, 오직 button객체만 이 action에 연결될 수 있다는 걸 의미합니다. 지금 만드는 action에서는 별로 상관 없지만, 나중에는 아주 중요하게 사용될 것입니다.

   나머지 옵션들은 아래 화면처럼 그대로 두세요

   

7. "Connect"를 클릭하세요

아래와 같이 액션메서드(action method)가 ViewController.swift파일에 추가됩니다.

1. @IBAction func setDefaultLabelText(sender: UIButton) {
2. }

The sender parameter points to the object that was responsible for triggering the action—in this case, a button. The IBAction attribute indicates that the method is an action that you can connect to from your storyboard in Interface Builder. The rest of the declaration declares a method by the name of setDefaultLabelText(_:). "sender" 파라미터는 이벤트가 발생하는 객체(여기서는 버튼)를 의미하며, 이 객체에 이벤트가 발생하면 액션이 실행됩니다. @IBAction 속성은 이 메서드가 Interface Builder의 스토리보드로 부터 연결된 action임을 의미합니다. 나머지 부분은 "setDefaultLabelText(_:)"라는 이름의 메서드를 선언한 것입니다.

아직 메서드 구현부가 비어있습니다. Label의 값을 리셋하기 위해 필요한 코드는 매우 심플합니다.

To implement the label reset action in the ViewController code

1. 방금 연결한 "setDefaultLabelText" 액션메서드를 찾으세요

2. 메서드의 구현부( { }괄호 사이)에 아래의 코드를 작성하세요

   1. mealNameLabel.text = "Default Text"

   이 코드는 Label의 text프로퍼티 값을 "Default Text"로 설정합니다.

   "Default Text"의 타입을 따로 명시할 필요는 없습니다. Swift의 타입 추론(Type Inference) 기능이 자동으로 NSString 타입이라는걸 추론해서 타입을 지정해주기 때문입니다.

iOS handles all of the redrawing code for you, so this is actually all the code you need to write for now. Your setDefaultLabelText(_:) action method should look like this: 우리가 작성해야할 코드는 이게 전부입니다. iOS가 텍스트에 표시하기 위한 모든 코드들을 내부적으로 구현해주기 때문입니다. 완성된 "setDefaultLabelText(_:)메서드는 아래와 같습니다.

1. @IBAction func setDefaultLabelText(sender: UIButton) {
2. mealNameLabel.text = "Default Text"
3. }

Checkpoint: 시뮬레이터에서 앱을 실행하고 테스트 해보세요. "Set Default Label Text" 버튼을 누르면 Meal Name(스토리보드에 설정한 값) 텍스트가 Default Text(action에 의해 설정된 값)로 변경될 것입니다.

지금 우리가 구현한 방식이 바로 iOS 앱 설계에서 "target-action"패턴이라고 하는 것입니다. "Target-action"이란 특정 이벤트가 발생했을 때 한 객체가 다른 객체에게 메시지를 보내는 설계(design)방식을 말합니다. 우리의 앱에서 "이벤트"는 "사용자가 버튼을 클릭하는 것"이고, "액션"은 "setDefaultLabelText" 메서드가 되며, "Target"은 액션메서드가 정의된 "ViewController"가 되며, "sender"는 "Set Default Label Text"버튼이 됩니다. "message"는 소스코드에 정의된 "action method"입니다. "message"를 받는 객체인 "target"은 action을 수행할 객체가 됩니다. action message를 보내는 객체는 일반적으로 사용자의 탭, 드래그, 값변경과 같은 상호작용에 반응해 "event"를 발생 시키는 button, slider, switch와 같은 control입니다. 이 "target-action"패턴은 iOS 프로그래밍에서 매우매우 자주 사용되며, 남은 수업 전체에 걸쳐 훨씬 더 자주 보게 될 것입니다. (*역자: sender - 버튼과 같은 control, 이벤트 - touch up inside 등, 타겟 - 해당 이벤트를 처리한 액션메서드가 정의된 viewController객체, 액션/메시지 - 액션메서드, 즉 스토리 보드에 있는 버튼에 이벤트가 발생하면 해당 이벤트를 처리할 액션 메서드가 정의된 viewController 객체에 메시지를 보내 해당 메서드를 실행시킨다)

Process User Input

Label의 텍스트를 디폴트 값으로 리셋하는 방식을 구현하였으니, 이제 text filed에 입력한 값을 Label의 텍스트로 설정하는 기능을 추가해보겠습니다. 단순하게 만들기 위해 text field에 텍스트를 입력하고, 키보드의 return key 를 누르면 Label의 텍스트로 설정되는 방식으로 구현해보겠습니다.

사용자가 text field에 입력하는 내용을 받아서 작업할 때, text field delegate를 이용하는 것이 좋습니다. delegate는 역할을 위임받는 객체입니다. 즉, 다른 객체를 대신하여(혹은 협업하여) 작업을 수행하는 객체입니다. 여기서 역할을 delegating(위임을 맡기는)하는 객체는 text field입니다.(text field가 delegate객체에게 역할을 위임함) 따라서 text field가 해야할 일을 delegate객체가 위임 받아 대신 일을 처리해줍니다. text field는 위임 받은 객체인 delegate에 대한 참조를 갖게되며, 필요할 때 delegate객체에 메시지를 보냅니다. 메시지의 내용은 text field가 처리해야 할(혹은 처리한) 이벤트에 대한 것입니다. 이벤트에 대한 메시지를 전달 받은 delegate객체는 자기 자신, 혹은 다른 객체의 모양이나 상태를 바꾸기도 하고, 곧 발생할 이벤트를 다루기 위한 값을 반환하기도 합니다.

text field의 delegate는 text field의 텍스트가 편집되는 동안 text field와 계속해서 커뮤니케이션을 합니다. 이를 통해 사용자가 텍스트를 입력하기 시작하거나, 입력을 마치는 것과 같은 이벤트의 발생에 대해 모두 알게 됩니다. delegate는 이 정보를 이용해 필요한 시점에 데이터를 저장하거나 삭제하고, 키보드를 내리는 등의 작업을 수행할 수 있습니다.

Any object can serve as a delegate for another object as long as it conforms to the appropriate protocol. The protocol that defines a text field’s delegate is called UITextFieldDelegate. In this case, because ViewController keeps a reference to the text field, you’ll make ViewController the text field’s delegate. d어떤 객체라도 그에 해당하는 프로토콜(protocol)만 준수(conform)하면 다른 객체의 delegate가 될 수 있습니다. text field의 delegate가 되기 위해 준수해야하는 프로토콜은 UITextFieldDelegate입니다. 우리 앱에서는 ViewController가 text field에 대한 참조체(reference)를 보유하고 있기 때문에, ViewController를 text field의 delegate로 만들어 보겠습니다.

First, you need to have ViewController adopt the UITextFieldDelegate protocol. You adopt a protocol by listing it as part of the class declaration line. 가장 먼저해야 할 일은 ViewController에 UITextFieldDelegate 프로토콜을 채택(adopt)하는 것입니다. 프로토콜을 적용하기 위해서는 클래스 선언부에 해당 프로토콜을 선언해주면 됩니다.

To adopt the UITextFieldDelegate protocol

1. assistant editor가 열려있다면, Standard버튼을 눌러서 standard editor 로 돌아가세요.

   

   툴바에서 project navigator와 utility area를 열어주세요

2. project navigator에서 ViewController.swift를 선택하세요

3. ViewController.swift파일에서 아래와 같은 클래스 선언부를 찾으세요

   1. class ViewController: UIViewController {

4. UIViewController뒤에 콤마(,)를 찍고, UITextFieldDelegate를 추가해주세요.

   1. class ViewController: UIViewController, UITextFieldDelegate {

이 프로토콜을 채택함으로서 ViewController클래스 자체가 UITextFieldDelegate로서의 능력도 수행할 수 있게 되었습니다. 즉, ViewController클래스를 text field의 delegate로 활용하여, 사용자가 text field에 발생시키는 이벤트(입력 등)를 처리할 수 있게 되었습니다.

To set ViewController as the delegate for nameTextField

1. ViewController.swift 파일에서 아래와 같이 선언된 viewDidLoad() 메서드를 찾으세요

   1. override func viewDidLoad() {
   2. super.viewDidLoad()
   3. // Do any additional setup after loading the view, typically from a nib.
   4. }

   메서드에 템플릿으로 구현된 부분에는 주석(comment)이 있습니다. 필요 없는 내용이므로 지워버리셔도 됩니다.

2. super.viewDidLoad() 메소드 내부에서 한칸 띄고, 아래와 같이 작성하세요

   1. // Handle the text field’s user input through delegate callbacks.
   2. nameTextField.delegate = self

   self는 ViewController 클래스 영역내에서 사용되면, 자기 자신의 객체를 참조하는 키워드 입니다. 

   주석을 추가해서 여기에서 무엇을 한다고 명시하면 코드를 이해하기 쉬워집니다.

현재까지 작업한 viewDidLoad()메서드의 내용은 아래와 같습니다.

1. override func viewDidLoad() {
2. super.viewDidLoad()
4. // Handle the text field’s user input through delegate callbacks.
5. nameTextField.delegate = self
6. }

이제 ViewController는 nameTextField의 delegate가 되었습니다.

UITextFieldDelegate 프로토콜은 optional 메서드를 갖고 있습니다. optional메서드란 꼭 구현하지(implement) 않아도 상관 없는 메서드입니다. 하지만 delegate가 제공하는 특정 기능을 구현하기 위해서는 아래의 두 메서드를 구현해야합니다.

1. func textFieldShouldReturn(textField: UITextField) -> Bool
2. func textFieldDidEndEditing(textField: UITextField)

이 메서드들이 언제 호출(call)되고, 무엇을 하는지 알기 위해서는 text field가 사용자의 이벤트에 어떻게 반응하는지를 이해해야합니다. 사용자가 text field를 탭하면, text field는 자동으로 첫번째 반응자(first responder)가 됩니다. 첫번째 반응자(first responder)란 앱에서 발생하는 다양한 이벤트(키 이벤트, 모션 이벤트 등)를 처음으로 받는 객체를 말합니다. 즉, 사용자의 다양한 이벤트가 제일 먼저 도달하는 객체를 말합니다.(만약 텍스트 필드 위에 버튼이 겹쳐져 있다면, 버튼이 first responder가 되겠지요)

text field가 first responder가 되었기 때문에 iOS는 키보드를 노출시키고, text field에 대한 편집 세션(editing session)을 시작합니다. 사용자가 키보드로 타이핑하는 것dl text field에 삽입됩니다.

사용자가 text field에 대한 편집을 종료하려 할때, text field는 자신의 보유한 first-responder 상태를 반납해야합니다. 즉, text field는 더이상 active 상태의 객체가 아니므로, 이벤트는 다른 객체에게로 전달되어야합니다.

이 때가 바로 UITextFieldDelegate의 메서드가 개입되어야 상황입니다. 사용자가 text field에서 편집을 멈추기 위한 버튼을 누를 때, text field가 first-responder 상태를 반납하게 정의해야합니다. textFieldShouldReturn(_:)메서드에서 이러한 작업을 할 수 있습니다. 이 메서드는 사용자가 키보드의 Return(여기서는 Done)키를 누를 때 호출됩니다.

To implement the UITextFieldDelegate protocol method textFieldShouldReturn(_:)

1. ViewController.swift 파일에서 "// Mark: Actions" 섹션 바로 위에 아래와 주석을 삽입하세요.

   1. // MARK: UITextFieldDelegate

   This comment is used to organize your code and to help you (and anybody else who reads your code) navigate through it. 이렇게 주석을 작성하면 코드의 영역별로 배치되기 때문에 추후에 찾아보기 쉬워집니다.

   지금까지 몇 개의 주석을 추가했습니다. Xcode는 각 섹션 타이틀로 구분하여 주석에 해당하는 내용의 목록을 제공합니다. editor 영역의 상단에서 파일 이름을 누르면 볼 수 있는 functions menu에서 섹션타이틀과 그에 해당하는 내용들이 표시됩니다. "// MARK: " 주석에 의해 섹션이 구분되며, 클릭하면 코드의 해당 라인으로 이동합니다.

   

2. 주석 아래에 아래의 함수를 추가하세요

   1. func textFieldShouldReturn(textField: UITextField) -> Bool {
   2. }

3. 메서드의 구현부에 다음의 코드를 작성하여 text field의 first-responder 상태를 반환할 수 있도록 해주세요. 이 코드가 무슨일을 하는지 표시하기 위해 주석도 추가해주세요

   1. // Hide the keyboard.
   2. textField.resignFirstResponder()

   복사/붙여넣기 하지 말고, 직접 코드를 작성해보세요. Xcode에서 코딩할 때 시간을 엄청나게 단축시켜줄 "code completion"기능을 발견할 수 있습니다. Xcode가 후보군의 목록들을 보여주면 스크롤하면서 원하는 것을 찾고 엔터키를 치면 해당 코드가 자동으로 입력됩니다. 

   

4. 함수 구현부 맨 뒤에 아래 내용을 추가해주세요

   1. return true

   Because this method returns a Boolean value, returning the value true indicates that the text field should respond to the user pressing the Return key by dismissing the keyboard. 이 메서드는 Boolean값을 반환하게 선언 되어 있으며, true를 리턴하면 키보드에서 return키를 눌렀을 때 키보드가 내려가야 한다는 것을 지정합니다.

완성된 textFieldShouldReturn(_:) 메서드는 아래와 같습니다.

1. func textFieldShouldReturn(textField: UITextField) -> Bool {
2. // Hide the keyboard.
3. textField.resignFirstResponder()
4. return true
5. }

두 번째로 구현해야할 메서드는 textFieldDidEndEditing(_:)입니다. 이 메서드는 text field가  first-responder상태를 포기할 때 호출됩니다. 따라서 textField.resingFirstResponder()를 구현해둔 textFieldShouldReturn메서드가 실행된 직후 호출 됩니다.

textFieldDidEndEditing(_:)메서드는 text field에 입력된 정보를 읽어서 이용할 수 있는 기회를 제공해줍니다. 이 경우엔 text field에 입력된 텍스트를 읽어서 label의 텍스트를 변경하는데 이용할 수 있습니다.

To implement the UITextFieldDelegate protocol method textFieldDidEndEditing(_:)

1. ViewController.swift 파일에서 textFieldShouldReturn(_:)메서드 바로 다음에 아래의 메서드를 추가하세요

   1. func textFieldDidEndEditing(textField: UITextField) {
   2. }

2. 메서드 구현부에 아래 코드를 t작성하세요

   1. mealNameLabel.text = textField.text

이제 끝났습니다.  완성된 textFileDidEndEditing(_:) 메서드는 아래와 같습니다.

1. func textFieldDidEndEditing(textField: UITextField) {
2. mealNameLabel.text = textField.text
3. }

Checkpoint: 시뮬레이터에서 앱을 실행하고 테스트 해보세요. text field를 탭하고, 텍스트를 입력해보세요. 키보드에서 Done버튼을 누르면 키보드가 사라지고 text field에 입력한 내용이 Label에 표시됩니다. 다시 "Set Default Label Text"버튼을 누르면  Label의 텍스트가 "Default Text"로 변경됩니다.(버튼의 액션 메서드에서 설정한 값입니다)

NOTE

To see the completed sample project for this lesson, download the file and view it in Xcode.

Download File