[iOS] 텍스트 필드(textField 객체) 란? - HoonIOS

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

오늘은 델레 게이트 패턴 공부를 하다가 제일 기본적인 UITextFieldDelegate를 공부하다가 그전에 textField에 대해 알아보려고 합니다.

 

 

 

 텍스트 필드란?

 

우선 기본적으로 애플 문서부터 봐야겠죠? ㅎㅎ

 

애플 문서를 보면 인터페이스 안에서 편집 가능한 텍스트 영역을 표시하는 객체라고 합니다 ㅎㅎ

 

쉽게 설명하면 불특정한 값을 입력할 수 있도록 제공하는 사각형의 직사각형 컨트롤러라고 생각을 하시면 됩니다.

 

어떤 형태인지 사진으로 한번 봐볼까요?

 

이것은 정말 아무것도 설정하지 않은 순수 그 자체의 기본 텍스트 필드입니다.

 

만약 텍스트 필드를 스토리보드로 추가해도 이것이 나오고 만약 UI코드로 UITextField로 객체를 만들어서 추가해도 위 같은 기본 텍스트 필드가 나옵니다.

 

근데 앱을 사용하시다 보면 그냥 위같은 텍스트 필드를 뿐만 아니라 텍스트 필드에 글자를 모두 지울 수 있는 x버튼이 있는 것도 있고 글자는 입력이 안되고 숫자만 입력되는 키보드 창이 띄는 텍스트 필드도 있습니다.

 

그럼 한번 텍스트 필드를 꾸미는 것에 대해 알아보겠습니다 :)  

 

 텍스트 필드 테두리 꾸미기

 

제일 먼저 텍스트 필드의 테두리 스타일을 바꿔보겠습니다.

 

테두리 스타일을 변경하는 방법은 총 2가지 방법이 있습니다.

• 어트리뷰트 인스팩터 탭을 이용
• 코드로 UI를 작성

우선 제일 먼저 어트리뷰트 인스팩터를 이용해보겠습니다.

 

- 텍스트 필드를 선택하고 어트리뷰터 인스팩터에서 아래 그림에 있는 Border Style을 이용해 바꿔주면 됩니다.

 

 

이제 코드로 UI를 작성해보겠습니다.  UITextField.BorderStyle을 통해 정의를 할 수 있습니다.

 

※ 여기서 설명된 코드는 공통적으로 UITextField객체를 생성해주고 객체의 위치를 지정해 주는. frame과 테두리 스타일을 지정해주는. borderStyle 고나 텍스트 필드 안에 표시될. placeholder을 지정해준 것입니다.

- .roundRect

. roundRect 속성은 모서리가 둥근 것으로 아래의 기본 텍스트 필드보다 더 둥근 것을 알 수 있습니다.

 

- .bezel

. bezel 속성은 아래 기본 텍스트 필드보다 두껍고(?) 각져있는 것을 볼 수 있습니다.

 

- .line

. line 속성은. bezel속성같이 테두리가 두꺼운 선처럼 보이지만. bezel은 입체가 있는 형태이고. line은 bold형 줄이라고 생각을 하면 됩니다.

 

- .none

.none이라고 해서 그냥 default값이라고 생각하실 수 있지만 예시를 보면 그냥 테두리 자체를 없애 버린 것입니다.

이 특성은 주변 배 경하고 어울리는 자연스러운 입력 폼을 구성하는 용도로 사용을 합니다.

 

 

 텍스트 필드에 Clear Button을 추가 

 

 Clear Button은 텍스트 필드의 맨 오른쪽에 추가 되는 겁니다. 이 버튼을 클릭했을 시 안에 있는 입력했던 내용을 삭제하게 됩니다.

텍스트 필드의 어트리뷰트의 Clear Button을 보면 여러 개의 특성이 있는데 표시 안 함/ 편집하는 동안에만 표시/ 편집하지 않을 때만 표시/ 항상 표시라는 특성이 있는데

 

이것 또한 그냥 UI코드를 통해 작성을 할 수 있습니다. 

 

 

UI코드로 작성을 하려면 위 코드에서  textField객체에 clearButton을 통해 선택을 하면 됩니다. clearButtonMode의 값들은 enum타입으로 아래 case에 따라 원하는 속성을 선택하면 됩니다.

 

 

 

라고 하시면 뭐 이리 불성실해 ㅡ_ㅡ라고 생각하실 수 있죠? ㅎㅎ

 

• never
  - never일 때는 표현을 하지 않겠다. 무엇을 하든 Clear Button을 나타내지 않습니다.
• whileEditing
  - 텍스트를 편집하는 동안에만 Clear Button을 나타냅니다.
• unlessEditing
  - 텍스트를 편집하지 않는 경우에만 Clear Button을 나타냅니다.
• always
  - 무엇을 하든 시도 때도 없이 아무 상황이나 Clear Button을 무조건 나타냅니다.

 

텍스트 필드에 작성된 내용을 수정하려고 터치를 하는 순간 내용이 지워지는 경우가 있습니다. 

( 저는 가끔씩 비밀번호를 한 글자 잘 못써서 터치를 했는데 그냥 지워버리는... 다시 써야 해서 귀찮았던 적이 한두 번이 아니었는데 이때 바로 이 속성을 사용합니다. )

 

 Clear Button의 Clear when editing begins를 체크하면 텍스트 필드를 체크하는 순간 안에 내용이 삭제가 됩니다....

 

 

만약 UI코드로 작성을 해보겠습니다.

 

 

textField 객체에. clearOnBeginEditing을 통해 정해주면 되는데 이것은 Bool타입이므로 해당 기능을 사용하려면  true를 반환하면 됩니다.

 

 

뭐지 텍스트 필드가 이게 끝인가? 라고 생각하실수 있지만 아닙니다...

 

제일 길고 험한 Text input traits특성인 텍스트피드의 입력 특성에 대해 알아보겠습니다.