텍스트 필드

텍스트 필드는 델리게이트 패턴을 사용하는 대표적인 객체 중의 하나이다.

기본적인 기능은 델리게이트 패턴 없이도 사용할 수 있지만, 입력값을 제어하는 등의 고급 기능을 구현하고 싶을 때에는 델리게이트 패턴을 적용해야 한다.

텍스트 필드에 델리게이트 패턴을 적용하려면 다음의 두 가지 작업이 필요하다.

1. 텍스트 필드에 대한 델리게이트 프로토콜 구현
2. 텍스트 필드의 델리게이트 속성을 뷰 컨트롤러에 연결

텍스트 필드 델리게이트 패턴 실습을 시작한다.

스토리보드에 텍스트 필드를 하나 만들고, 뷰 컨트롤러에 tf라는 IBOutlet으로 연결해주었다.

import UIKit

class ViewController: UIViewController {

@IBOutlet var tf: UITextField!

override func viewDidLoad() {
// 텍스트 필드 속성 설정
self.tf.placeholder = "값을 입력하세요."
self.tf.keyboardType = UIKeyboardType.alphabet // 키보드 타입 영문자 패드로
self.tf.keyboardAppearance = UIKeyboardAppearance.dark // 키보드 스타일 어둡게
self.tf.returnKeyType = UIReturnKeyType.join
self.tf.enablesReturnKeyAutomatically = true // 리턴키 자동 활성화 On

super.viewDidLoad()

}

}

• 텍스트 필드에 값이 비어 있을 때, “값을 입력하세요”라는 안내 메시지를 표시
• 키보드 타입을 영문자 패드 형태로 지정
• 키보드 스타일은 어둡게 설정
• 키보드의 리턴키 타입을 Join으로 설정
• 텍스트 필드에 값이 비어 있을 때 키보드의 리턴 키를 비활성화

// 텍스트 필드 스타일 설정
self.tf.borderStyle = UITextField.BorderStyle.line
self.tf.backgroundColor = UIColor(white: 0.87, alpha: 1.0)
self.tf.contentVerticalAlignment = .center // 수직 방향으로 텍스트가 가운데 정렬되도록
self.tf.contentHorizontalAlignment = .center // 수평 방향으로 텍스트가 가운데 정렬되도록
self.tf.layer.borderColor = UIColor.darkGray.cgColor // 테두리 색상을 회색으로
self.tf.layer.borderWidth = 2.0

텍스트 필드에 스타일을 설정해주었다.

// 텍스트 필드를 최초 응답자로 지정
self.tf.becomeFirstResponder()

최초 응답자란 UIWindow에서 이벤트가 발생했을 때 우선적으로 응답할 객체를 가리킨다.

위의 코드에서 텍스트 필드가 최초 응답자로 지정했으므로, 시뮬레이터가 로딩이 된 후에 바로 텍스트 필드 입력 대기 상태가 된다.

원래대로라면 이렇게 입력 대기 상태에서 키보드를 제거하려면, 값을 입력하고 리턴 키를 눌러서 입력을 완료하거나 화면 상의 다른 컨트롤을 클릭하여 최초 응답자 포인터를 다른 곳으로 옮겨야 한다.

하지만 최초 응답자 메소드를 사용하면 손쉽게 키보드를 없앨 수 있다.

@IBAction func confirm(_ sender: Any) {
// 텍스트 필드를 최초 응답자 객체에서 삭제
self.tf.resignFirstResponder()
}

이번에는 텍스트 필드를 직접 터치하지 않고도 버튼을 클릭하면 텍스트 필드가 입력 대기 상태가 되도록 한다.

@IBAction func input(_ sender: Any) {
// 텍스트 필드를 최초 응답자 객체로 지정
self.tf.becomeFirstResponder()
}

텍스트 필드에 델리게이트 패턴 적용

• 텍스트 필드 프로토콜에 대한 구현

class ViewController: UIViewController, UITextFieldDelegate

self.tf.delegate = self

텍스트 필드에서 정해진 특정 이벤트가 발생하면 현재의 뷰 컨트롤러에게 알려달라는 요청이다.

이를 뷰 컨트롤러가 텍스트 필드의 델리게이트 객체로 지정되었다고 표현한다.

func textFieldDidBeginEditing(_ textField: UITextField) {
print("텍스트 필드의 편집이 시작되었습니다.")
}

func textFieldShouldClear(_ textField: UITextField) -> Bool {
print("텍스트 필드의 내용이 삭제됩니다.")
return true // false를 리턴하면 삭제되지 않는다.
}

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
print("텍스트 필드의 내용이 \(string)으로 변경됩니다.")
return true // false를 리턴하면 내용이 변경되지 않는다.
}

// 텍스트 필드의 리턴키가 눌려졌을 때 호출
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
print("텍스트 필드의 리턴키가 눌려졌습니다.")
return true
}

// 텍스트 필드의 편집이 종료될 때 호출
func textFieldShouldEndEditing(_ textField: UITextField) -> Bool {
print("텍스트 필드의 편집이 종료됩니다.")
return true // false를 리턴하면 편집이 종료되지 않는다.
}

func textFieldDidEndEditing(_ textField: UITextField, reason: UITextField.DidEndEditingReason) {
print("텍스트 필드의 편집이 종료되었습니다.")
}

각각의 델리게이트 메소드는 실행 시점에 맞추어 호출된다.

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
print("텍스트 필드의 내용이 \(string)으로 변경됩니다.")
if Int(string) == nil { // 입력된 값이 숫자가 아니라면 true를 리턴
// 현재 텍스트 필드에 입력된 길이와 더해질 문자열 길이의 합이 10을 넘는다면 반영하지 않음
if (textField.text?.count)! + string.count > 10 {
return true
} else {
return false
}
} else { // 입력된 값이 숫자라면 false를 리턴
return false
}
}

추가적으로 위와 같은 코드를 델리게이트 메소드 안에 작성하면 텍스트 필드의 길이가 10까지만 입력되고, 숫자는 입력되지 않는다.

이미지 피커 컨트롤러

이미지 피커 컨트롤러는 카메라나 앨범 등을 통해 이미지를 선택할 때 사용하는 컨트롤이며, 델리게이트 패턴을 활용하는 또 다른 대표적인 객체이다.

@IBOutlet var imgView: UIImageView!

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}

@IBAction func pick(_ sender: Any) {
// 이미지 피커 컨트롤러 인스턴스 생성
let picker = UIImagePickerController()
picker.sourceType = .photoLibrary // 이미지 소스로 사진 라이브러리 선택
picker.allowsEditing = true // 이미지 편집 기능 On

// 이미지 피커 컨트롤러 실행
self.present(picker, animated: true)

}

이렇게 구현한 후, info.plist에서 아래와 같은 설정을 해준다.

위와 같이 구현한 경우, 델리게이트 메소드를 아직 구현하지 않았기 때문에 선택한 이미지가 이미지 뷰에 나타나지 않는다.

선택한 이미지를 전달받아 화면에 표시할 수 있도록 델리게이트 메소드를 구현한다.

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate

@IBAction func pick(_ sender: Any) {
// 이미지 피커 컨트롤러 인스턴스 생성
let picker = UIImagePickerController()
picker.sourceType = .photoLibrary // 이미지 소스로 사진 라이브러리 선택
picker.allowsEditing = true // 이미지 편집 기능 On

// 델리게이트 지정 (추가)
picker.delegate = self

// 이미지 피커 컨트롤러 실행
self.present(picker, animated: true)

}

델리게이트 처리 코드를 추가한다.

// 이미지 피커에서 이미지를 선택하지 않고 취소했을 때 호출되는 메소드
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
// 이미지 피커 컨트롤러 창 닫기
picker.dismiss(animated: false)

// 알림창 호출
let alert = UIAlertController(title: "", message: "이미지 선택이 취소되었습니다.", preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "확인", style: .cancel))
self.present(alert, animated: false)
}

이미지 피커 델리게이트 메소드에서 가장 먼저 처리해야 할 일은 현재의 이미지 피커 컨트롤러 창을 닫아주는 것이다.
델리게이트 메소드를 구현하지 않았을 때는 이미지 피커를 취소하거나 이미지를 선택하면 자동으로 해당 컨트롤러 창이 닫히지만, 일단 델리게이트 메소드를 구현하게 되면 컨트롤러 창을 닫기 위한 dismiss(animated:) 메소드를 직접 호출해 주어야 이미지 피커 창이 닫히고 원래의 뷰 컨트롤러로 돌아올 수 있다.

// 이미지 피커에서 이미지를 선택했을 때 호출되는 메소드
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
// 이미지 피커 컨트롤러 창 닫기
picker.dismiss(animated: false) { () in
// 이미지를 이미지 뷰에 표시
let img = info[UIImagePickerController.InfoKey.editedImage] as? UIImage
self.imgView.image = img
}
}

이 메소드는 이미지를 올바르게 선택했을 때 호출된다.

이미지를 올바르게 선택했을 때 이미지 피커 컨트롤러 창을 닫고 나서 원하는 로직을 차례로 구현하면 된다.

이 메소드에서 처리할 핵심 내용은 사용자가 선택한 이미지를 화면에 뿌려주는 것이다.

딕셔너리 타입으로 정의된 매개변수 info에는 사용자가 선택한 이미지 정보가 담겨서 전달되기 때문에 이미지 관련 키를 사용하여 원하는 이미지 정보를 추출할 수 있다.

Extension을 이용한 델리게이트 패턴 코딩

델리게이트 패턴은 최소한 하나 이상의 프로토콜을 구현해야 하기 때문에, 한 화면에서 다양한 객체의 델리게이트 패턴을 구현하다 보면 코드가 복잡해지기 쉽다.

이때 익스텐션을 활용하여 훨씬 깔끔하게 코딩할 수 있는 방법이 있다.

익스텐션은 클래스를 대신해서 프로토콜을 구현할 수 있기 때문에, 델리게이트 패턴에 사용되는 프로토콜을 익스텐션에서 구현하면 하나의 뷰 컨트롤러 클래스에 여러 프로토콜 메소드가 있는 것을 방지할 수 있다.

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
}

현재의 코드에서 익스텐션을 정의하면서 UIImagePickerControllerDelegate와 UINavigationControllerDelegate 프로토콜을 해당 익스텐션으로 옮긴다.

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
// 이미지 피커에서 이미지를 선택하지 않고 취소했을 때 호출되는 메소드
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
// 이미지 피커 컨트롤러 창 닫기
picker.dismiss(animated: false)

// 알림창 호출
let alert = UIAlertController(title: "", message: "이미지 선택이 취소되었습니다.", preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "확인", style: .cancel))

self.present(alert, animated: false)
// self.dismiss(animated: false) { () in
// // 알림창 호출
// let alert = UIAlertController(title: "", message: "이미지 선택이 취소되었습니다.", preferredStyle: .alert)
// alert.addAction(UIAlertAction(title: "확인", style: .cancel))
//
// self.present(alert, animated: false)
// }
}

// 이미지 피커에서 이미지를 선택했을 때 호출되는 메소드
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
// 이미지 피커 컨트롤러 창 닫기
picker.dismiss(animated: false) { () in
// 이미지를 이미지 뷰에 표시
let img = info[UIImagePickerController.InfoKey.editedImage] as? UIImage
self.imgView.image = img
}
}

}

그리고 구현했던 델리게이트 메소드를 작성해주면 끝이다.

그런데 모든 프로토콜을 반드시 하나의 익스텐션에 담을 필요는 없다.

// MARK:- 이미지 피커 컨트롤러 델리게이트 메소드
extension ViewController: UIImagePickerControllerDelegate {
// 이미지 피커에서 이미지를 선택하지 않고 취소했을 때 호출되는 메소드
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
// 이미지 피커 컨트롤러 창 닫기
picker.dismiss(animated: false)

// 알림창 호출
let alert = UIAlertController(title: "", message: "이미지 선택이 취소되었습니다.", preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "확인", style: .cancel))

self.present(alert, animated: false)
// self.dismiss(animated: false) { () in
// // 알림창 호출
// let alert = UIAlertController(title: "", message: "이미지 선택이 취소되었습니다.", preferredStyle: .alert)
// alert.addAction(UIAlertAction(title: "확인", style: .cancel))
//
// self.present(alert, animated: false)
// }
}

// 이미지 피커에서 이미지를 선택했을 때 호출되는 메소드
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
// 이미지 피커 컨트롤러 창 닫기
picker.dismiss(animated: false) { () in
// 이미지를 이미지 뷰에 표시
let img = info[UIImagePickerController.InfoKey.editedImage] as? UIImage
self.imgView.image = img
}
}

}

// MARK:- 내비게이션 컨트롤러 델리게이트 메소드
extension ViewController: UINavigationControllerDelegate {

}

프로토콜을 따로 구현해주고, 위와 같이 주석을 작성한다면 메소드 목록이 보기 좋게 정돈된다.

• 이 게시글은 HyunJi에 의해 4 years, 8 months 전에 수정됐습니다.
• 이 게시글은 HyunJi에 의해 4 years, 8 months 전에 수정됐습니다.