[iOS] 텍스트 필트(UITextField) 커서 숨기기

 

간혹 UITextField를 사용할 때 커서를 숨겨야 할 때가 있다.

대표적으로 UIPickerView나 UIDatePicker같은 PickerView를 사용해 사용자가 뭔가를 선택하고, 그 값을 UITextField에 입력하는 기능을 만드는 경우가 그렇다. 이때 UITextField에 사용자가 직접 입력값을 입력하지 않고 PickerView의 값이 입력되는데, 사용자가 입력 불가능한데도 불구하고 커서가 깜빡인다면 굉장히 어색할 것이다.

이럴 때를 위해 깜빡이는 커서를 숨기는 방법을 알아보자.

 

 

깜빡이는 커서 숨기기

기본적으로 UITextField를 터치하면 커서가 깜빡인다.

입력된 글 바로 뒤에 커서가 깜빡이는 걸 확인할 수 있다.

 

커서를 숨기기 위해 UITextField를 상속한 클래스를 하나 생성해주자. 그리고 다음과 같이 함수를 오버라이딩 해준다.

class HIdeCursorTextField: UITextField {
    override func caretRect(for position: UITextPosition) -> CGRect {
        return CGRect.zero
    }
}

 

스토리보드로 돌아가 UITextField의 커스텀 클래스를 방금 만든 클래스로 지정해준다.

커스텀 클래스 지정하기

 

위 과정 후 다시 시뮬레이터를 실행해보면 UITextField를 터치하고 문자를 입력해도 커서가 보이지 않는 것을 확인할 수 있다.

커서가 사라졌다!

 

caretRect(for:) 란?

커서를 사라지게 만든, 우리가 오버라이딩한 함수 caretRest(for:)란 무엇일까?

도큐먼트를 살펴보면 다음과 같이 정의되어 있다.

특정 삽입 위치에 caret(탈자 기호, 삽입 표시 기호 라고 번역되는데, 우리가 흔히 아는 커서라고 생각하면 될 듯?)을 그리는 직사각형을 반환한다. 라고 되어있다. 즉, 아래 코드는 커서의 X, Y좌표 및 width, height를 모두 0으로 설정한 것이다. 

class HIdeCursorTextField: UITextField {
    override func caretRect(for position: UITextPosition) -> CGRect {
        return CGRect.zero
    }
}

 

 

여기서 한 가지 의문이 드는데, 그렇다면 저 함수를 이용해서 내가 커서 위치를 0이 아니라 임의로 조정할 수 있을까?

임의로 아래 코드처럼 CGRect를 지정해봤다. (현재 UITextField의 높이는 40)

class HIdeCursorTextField: UITextField {
    override func caretRect(for position: UITextPosition) -> CGRect {
        return CGRect(x: 10, y: 20, width: 3, height: 20)
    }
}

 

바뀐 값을 저장하고 시뮬레이터를 돌리면 아래처럼 커서가 바뀐 걸 확인할 수 있다.

커서의 x는 10, y는 20(높이의 절반)부터 시작하고 width는 3, height는 20(높이의 절반) 이 된 것을 확인할 수 있다. 함수에서 우리가 x, y의 값을 고정했기 때문에 UITextField에서 문자를 입력해도 커서의 위치는 바뀌지 않고 계속 같은 자리에서 깜빡인다.