BOID

[iOS] 텍스트필드 델리게이트 패턴 구현하기 ( 2 / 2 ) -HoonIOS 본문

IOS 시작기

[iOS] 텍스트필드 델리게이트 패턴 구현하기 ( 2 / 2 ) -HoonIOS

HoonIOS 2021. 4. 19. 23:28

안녕하세요, HoonIOS입니다. :)

저번에는 텍스트 필드의 델리게이트에 대해 포스팅을 했습니다.

 

boidevelop.tistory.com/65

 

[iOS] 텍스트필드 델리게이트 패턴 구현하기 ( 1 / 2 ) -HoonIOS

안녕하세요 HoonIOS입니다. :) 저번에는 델리게이트에 대해 알아봤습니다. boidevelop.tistory.com/64 [iOS] 델리게이트 패턴이란? - HoonIOS 안녕하세요 HoonIOS입니다. :) 이번에는 iOS의 하나의 디자인 패턴인..

boidevelop.tistory.com

 

이번에는 텍스트필드의 델리게이트 패턴을 통해 델리게이트 메서드를 한번 적용하는 예제를 만들어 보겠습니다. :)

 

 

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

 

텍스트 필드에 델리게이트 패턴을 적용해보겠습니다.

 

제일 먼저 텍스트 필드를 스토리보드에 만들어 주고 아울렛 변수를 선언해줍니다.

 

* 설명

  • 스토리보드와 이어주기 위해 아울렛 변수를 viewController와 이어주게 만들어줍니다.

 

이제 그다음에 뷰컨트롤러에 UITextFieldDelegate프로토콜 구현을 선언해주어야겠죠?

 

이제 델리게이트 패턴의 설정이 끝난 게 아닙니다. 어느 게 남았을까요?

.

.

.

.

.

바로 텍스트 필드에 대한 특정 이벤트가 발생하면 나한테 코드를 알려달라는 코드를 작성을 안 했습니다.

 

특정 이벤트가 발생하면 나야 나를 해야겠죠?

 

* 코드 설명

  • 객체. delegate = self의 코드를 통해 이 객체의 델리게이트( 특정 이벤트 )가 발생하면 나한테 알려줘라는 것을 선언해주게 됩니다.
  • 여기서 작성 위치가 중요한데요 메모리에 뷰 컨트롤러가 올라가는 순간 발생하는 viewDidLoad 생명주기 메서드에 선언을 해줘야 합니다.
  • 델리게이트에 넣어준 self라는 것은 현재의 뷰 컨트롤러 인스턴스( viewController )를 의미합니다.
    ( 이 말은 뷰 컨트롤러가 텍스트 필드의 델리게이트 객체로 지정됐다고 생각하면 됩니다. )

 

텍스트 필드뿐만 아니라 많은 다른 델리게이트 객체들도 특정 이벤트가 발생해서 알려줄 때에는 델리게이트 메서드를 이용을 하는 것입니다.

 

또 델리게이트 메서드는 각종 이벤트마다 호출하기로 약속되어 있어 메서드가 알맞아 정해져 있다고 말씀드렸죠? 

 

그럼 이 델리게이트 메서드는 어떻게 호출이 되는 걸까요?

 

바로바로 이 메서드들은 델리게이트 객체에서 찾아 호출을 하게 됩니다.

 

 

※ 위 내용을 간단하게 요약해보겠습니다.

 

* 설명

  • 특정 이벤트(①)가 발생하면 해당 객체의 델리게이트 객체(②)를 찾습니다.
    그다음 델리게이트 객체에 해당 델리게이트 메서드(④)가 구현되어 있으면 필요한 인자 값을 담아서 메서드를 실행(⑤)시키고 구현되어 있지 않으면(⑥) 안 알려주도 되나 보다 하고 그대로 종료를 시킵니다.

 

 

 

그럼 텍스트 필드 델리게이트에는 어떤 델리게이트 메서드가 있는지 애플 문서를 통해 확인해 볼까요?

 

 

* 설명

  • 위 텍스트 필드 델리게이트 메서드는 크게 3 부분으로 나뉩니다.
  1. 첫 번째 부류는 텍스트 필드의 편집 허용 여부를 관리하는 것
    ( 텍스트 편집을 시작할 때 멈출 때 등도 해당합니다. )
  2. 두 번째 부류는 텍스트 필드의 편집에 관련한 것
  3. 세 번째 부류는 텍스트 섹션의 관리 관련한 것
  • 이들 메서드를 통해서 필요한 델리게이트 메서드를 사용하면 됩니다.

 

※ 계획

우선 저는 이번 텍스트 편집을 시작할 때, 삭제할 때 print로 콘솔에 알려주는 메서드를 구현해주고 리턴키를 눌렀을 때 최초 응답자를 잃게 해 주겠습니다.

또, 텍스트 필드의 텍스트를 8자 이하로 입력되게 구현을 해보고 만약 8자가 넘어가면은 alert창으로 넘었다고 알려주는 코드를 구현해 보겠습니다.
아아 나중에는 번외로 숫자만 입력해주는 방법도 알아보겠습니다.

 

위의 계획대로 하나하나씩 델리게이트 메서드를 작성해 보겠습니다.

 

 

제일 먼저 구현한 델리게이트 메서드는 텍스트 필드의 편집이 시작했을 때 텍스트 필드를 편집시작했다고 알려주도록 print해주는것을 구현해보겠습니다.

 

 

작동 영상도 같이 확인해보겠습니다.

 

* 설명

  • 텍스트 필드에서 텍스트 편집이 시작했을때 호출하는 델리게이트 메서드인 textFieldShouldBeginEditing을 호출하므로 이 함수 안에 작성을 해주면 됩니다.
  • 만약 텍스트 필드의 객체를 편집하기 위해 클릭하면 텍스트 필드 델리게이트 객체를 찾아 해당하는 델리게이트 객체의 메서드인 textFieldShouldBeginEditing메서드를 호출시키게 됩니다.
  • 이 함수는 Bool타입이므로 false를 반환하면 메서드가 동작을 하지 않아 사용을 하려면 꼭 true를 반환해 주어야 합니다.

두 번째 메서드로는 텍스트 필드의 텍스트가 제거될 때 호출하는 델리게이트 메서드를 호출해주겠습니다.

 

* 설명

  • 이 메서드는 하나하나 delete키로 지울 때 호출하는 메서드가 아니고 안에 있는 값들이 한 번에 없어지거나 할 때 발생하는 메서드입니다.
  • 그래서 여기서 clearsOnBeginEditing의 속성을 줘서 다시 텍스트 필드를 선택을 하면 안에 있는 텍스트가 모두 제거돼 textFieldShouldReturn메서드가 호출이 됩니다.
  • 그래서 다음 세 번째 메서드에서 clearOnBeginEditing메서드를 작동시키기 위해 리턴키를 눌렀을 때 최초 응답자를 잃어주는 메서드를 작성해줄겁니다 . :)

 

 

 

세번째 메서드로는 리턴키를 눌렀을때 최초응답자를 텍스트 필드에서 잃게 하도록 하겠습니다.
(여기서 최초 응답자는 이번 주 안에 포스팅 예정입니다.!)

 

 

영상으로 확인해 보겠습니다.

 

* 설명

  • 최초 응답자를 잃게 해주는 이유는 추후. clearOnBeginEditing 메서드를 사용하기 위해서입니다.
  • 이 메서드를 사용한 이유는 최초 응답자를 잃어야지 다시 텍스트 필드를 선택했을 때 안에 있는 텍스트가 제거되면서 textFieldShouldBeginEditing 메서드를 호출되기 때문입니다. 

 

 

네 번째 메서드로 텍스트를 8자 이하로만 작성되게 하겠습니다.

 

근데 여기서 사용자가 갑자기 텍스트 필드의 입력이 안되면 당황스러우니 8글자가 넘으면 alert창(boidevelop.tistory.com/50)을 띄어 보겠습니다.

 

 

영상으로 한번 살펴보겠습니다.

 

* 설명

  • 위 코드처럼 경고 메시지와 경고내용을 적어주었습니다. alert창은 사용자에게 알려주기 위한 목적이기 때문이죠 :)
  • 사용자가 ok버튼을 누르면 해당 안의 텍스트는 초기화해주고 cancel로 가면 그냥 텍스트 필드의 입력 값들은 나오게 알림 창 버튼을 구현했습니다.

 

 

네 번째 메서드에 추가 내용 갑자기 하나 더 추가해 주고 싶은 내용이 있어서 구현하게 되었습니다. :)

 

바로 숫자만 들어가게 해주고 싶어 졌습니다. 예를 들어 전화번호를 입력하려면 숫자만 입려 되어야지 문자가 들어가면 안 되겠죠?

 

이 메서드는 앞에서 구현을 해준 textField(_:shouldChangeCharactersIn:replacementString:)에 추가를 하면 됩니다.

 

* 설명

  • 해당 함수의 세 번째 매개변수의 string은 텍스트 필드의 입력값을 나타냅니다. 따라서 이 매개변수를 통해 조건을 달아주면 원하는 타입을 받게 할 수도 있고 못받게 할수도 있습니다.
    (즉 필터가 된다는 말입니다.)
  • 이 매개변수는 또 전부 입력이 되고 난 후 저장 시점에서 입력된 값을 체크해서 원하지 않는 문자열 입력된 것을 구분할 수 있습니다.
  • 여기서 저는 숫자만 받게 하고 문자열은 못 받게 조건을 걸어뒀습니다. ㅎㅎ

 

저는 우선 여기서 간단한 메서드 4개를 구현했습니다.

 

위의 텍스트 필드의 델리게이트 메서드는 훨씬 더 많습니다. 따라서 원하는 상태에 따라서 원하는 델리게이트 메서드를 구현해 주면 되겠습니다. :)

 

 

반응형
Comments