[iOS] UITextView에 Placeholder만들기

UITextField 클래스 안에는 기본적으로 placeholder프로퍼티가 있다.

 

 

하지만 UITextView에는 placeholder가 없기때문에 직접 구현을 해야한다.

 

 

구현해보기전에 TextField에서의 placeholder의 특징을 생각해보자.

 

-> 텍스트필드가 비어있는 경우엔 placeholder가 보인다.

-> 텍스트필드 편집을 시작하면 placeholder가 사라진다.

-> 편집을 끝냈을때 텍스트필드가 비어있다면 placeholder를 다시 보여주고, 텍스트가 있는 경우엔 텍스트를 보여준다.

 

위의 특징들을 똑같이 구현하여 TextView에서도 placeholder를 사용해보자.

 

 

먼저, TextView를 추가하고 레이아웃을 잡아준다.

 

 

Editing 기능 관련 메서드를 사용하기 위해서는 UITextViewDelegate를 채택해야한다.

 

따라서, Delegate 프로토콜을 채택하고 Outlet을 연결하여 대리자를 지정해준다.

 

 

이제 TextViewDelegate 프로토콜 내의 메서드를 이용해서 위에서 말한 특징을 구현해야한다.

 

 

일단 처음에 보여지는 placeholder는 기본적으로 미리 설정되어 있어야하므로 viewDidLoad에서 구현해준다.

 

 

이제 편집을 시작했을때(커서가 깜빡일때) TextView내부의 텍스트가 지워지고 텍스트의 색이 검은색으로 바뀌어야한다.

-> "편집을 시작했을때"와 관련된 메서드를 찾아보자.

 

textViewShouldBeginEditing와 textViewDidBeginEditing가 있다.

 

 

둘의 차이점은 일단 시작되기 전에 ShouldBeginEditing이 호출되고 이후에 DidBeginEditing이 호출된다.

 

또한, ShouldBeginEditing에서는 Bool타입의 값을 리턴해야하는데 false를 리턴하면 편집이 되지 않는다고 한다.

 

 

그렇다면 일단 DidBeginEditing을 이용해보자.

 

 

편집이 시작되면 TextView의 텍스트가 없어야하고 글씨색이 바뀌어야한다.

extension TextViewController: UITextViewDelegate {
    
    func textViewDidBeginEditing(_ textView: UITextView) {
        
        textView.textColor = .black
        textView.text = ""
        
    }
}

 

 

이제 마지막으로 편집이 끝났을때 TextView가 비어있다면 다시 placeholder가 보여지도록 해야한다.

 

 

마찬가지로 "편집이 끝났을때"와 관련된 메서드를 찾으면 똑같이 두 가지가 나올텐데 동일하게 DidEndEditing을 이용해보겠다.

 

 

편집을 끝내기 위해 버튼을 하나 추가해 resignFirstResponder() 메서드를 이용하였다.

(관련해서는 나중에 따로 글을 정리해보겠다)

 

 

결과

 

 

간단한 방법으로 TextView에서도 placeholder를 구현할 수 있다.

 

 

전체코드

import UIKit

class TextViewController: UIViewController {

    @IBOutlet weak var myTextView: UITextView!
    
    let placeholder = "텍스트를 입력해주세요."
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myTextView.delegate = self
        
        // placeholder
        myTextView.text = placeholder
        myTextView.textColor = .lightGray

    }
    @IBAction func tapBtn(_ sender: UIButton) {
        myTextView.resignFirstResponder()
    }
}

extension TextViewController: UITextViewDelegate {
    
    func textViewDidBeginEditing(_ textView: UITextView) {
        
        textView.textColor = .black
        textView.text = ""
        
    }
    func textViewDidEndEditing(_ textView: UITextView) {
        if textView.text == "" {
            textView.text = placeholder
            textView.textColor = .lightGray
        }
    }
}