[UIKit] UITextView placeholder

이번에는 UITextView의 placeholder를 구현하는 방법을 알아봅시다!

 

우리가 일반적으로 이메일, 비밀번호, 이름, 전화번호 등등 각종 정보들을 위주로

길어도 한줄씩만 적는 칸을 만들때 쓰는게 UITextField입니다.

 

UITextField의 Placeholder

UITextField는 placeholder를 다음과 같이 쓸 수 있죠.

var uiTextField: UITextField = {
    let view = UITextField()
    view.placeholder = "플레이스 홀더를 이렇게 설정"
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

그럼 아래와 같이 될겁니다.

UITextField 예시

 

반면에

일기라던가, 메모처럼 입력할 내용이 길어질때는 UITextView를 쓰는데요,

UITextView에는 placeholder가 없습니다...

그래서 UITextView는 placeholder를 넣어주려면 약간의 꼼수를 부려야 하는데요,

바로 포커싱이 되기전까지 디폴트로 위치해있을 텍스트를 미리 넣어주면 되는겁니다!

폰트 색까지 바꾸면 더욱 진짜같겠죠?

이제부터 한번 알아봅시다!

 

예시코드

1. delegate 설정

class ViewController: UIViewController, UITextViewDelegate {
...이전코드

var uiTextView: UITextView = {
    let view = UITextView()
    view.text = "텍스트를 입력해주세요"
    view.textColor = .placeholderText
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

override func viewDidLoad() {
	super.viewDidLoad()
    
    uiTextView.delegate = self
}

...이후코드

우선 `uiTextView`를 선언해주고 14번째 줄과 같이 delegate를 self로 지정해주면서

첫번째 줄에 있는 UITextViewDelegate프로토콜을 채택해줍니다.

7번째 줄처럼 텍스트 컬러를 placeholderText로 설정해주면 완전 placeholder처럼 보이겠죠?

 

2. 메서드 생성

우리가 `UITextView`에서 placeholder를 볼때는 언제일까요?

텍스트를 입력하기전, 텍스트를 입력하고 나서 아무런 내용이 없을때.

두가지겠죠?

위의 두가지 경우에만 보이면 되는거니까

`func textViewDidBeginEditing(_:)`와 `func textViewDidEndEditing(_:)` 두가지 메서드만 설정해주면 됩니다.

func textViewDidBeginEditing(_ textView: UITextView) {
	if textView.textColor == .placeholderText {
		textView.textColor = .black
    	textView.text = nil
	} else {
    	return
	}
}
    
func textViewDidEndEditing(_ textView: UITextView) {
	if textView.text.isEmpty {
    	textView.text = "텍스트를 입력해주세요"
        textView.textColor = .placeholderText
}

그럼 아래처럼 됩니다!

UITextView 예시

 

유의할점은 UITextView는 영역을 설정해주지않으면 화면에 보이지 않으니 꼭 너비, 높이를 꼭 설정해주세요!

 

다음의 글을 참고하였습니다.

https://velog.io/@yc1303/ios-UITextView의-placeholder-구현

[ios] UITextView의 placeholder 구현