swift) TextView에 Placeholder 기능 추가하기

안녕하세요. 데클렌입니다.

최근에 공부를 하면서 다시금 글을 적어야 겠다는 생각이 들어서 열심히 적어보려고 합니다..!

 

이번에 TextView를 다루다가 TextField와 같이 플레이스 홀더 기능을 만들 일이 있어서 이렇게 한 번 글을 쓰게 되었습니다!

위에 사진은 TextField입니다. 

플레이스 홀더는 여러 앱에서도 볼 수 있듯이 '이곳에 이러한 내용을 적어주세요'라는 용도로 많이 사용됩니다. 

이용자에게 해당 위치에 어떤 값을 적어야 하는지 짧은 도움말을 보여줍니다.

 

하지만 이러한 기능은 TextView에서는 찾아볼 수 없습니다..!

 

 

여기서 TextViewd와 TextField의 차이를 간단히 살펴 보자면

 

TextField는 단일 줄의 텍스트를 처리하는데 용이한 컨트롤러로 UIView를 상속받고

TextView는 여러 줄의 텍스트를 처리하는데 용이한 컨트롤러이고 UIScrollView를 상속 받습니다.

 

 

다시 돌아와서 이제 TextView에 PlaceHolder 기능은 없지만 

최대한 비슷하게 만들어 보도록 하겠습니다!

 

우선 TextView를 하나 위치해줍니다!

 

 

 

 

그리고 viewDIdLoad 안에 UITextViewDelegate를 상속시켜줍니다.

그리고 viewDIdLoad 안에 플레이스 홀더처럼 보이게 끔 만드는 코드를 작성해줍니다.

 

 

여기서 두 가지 함수를 사용할 건데 

 

textViewDidEndEditing : 지정된 텍스트 뷰의 편집이 끝나는 시기를 알려주는 메소드

textViewDidBeginEditing : 지정된 텍스트 뷰의 편집이 시작할 때를 알려주는 메소드

 

입니다.

 

흐름을 보자면

처음 화면이 로드 되었을 때 텍스트뷰의  그레이색의 텍스트가 있다. 

-> 텍스트가 그레이 색이면 텍스트 뷰가 시작될 때 텍스트를 비우고 텍스트 색상을 검정색으로 바꾼다. 

-> 텍스트뷰가 또 비어 있다면 플레이스 홀더처럼 텍스트를 입력해주고 텍스트 색상을 그레이 색으로 바꿔준다.

 

이렇게 순환되게 만들어 주는 것입니다. 

 

 

이렇게하면 끝입니다. 생각보다 간단합니다

 

하지만 이렇게 하면 textViewDidEndEditing 메서드를 호출할 수가 없습니다. 텍스트뷰 편집을 끝나게 만들어 주는 것이 없기 때문입니다.

그래서 텍스트 뷰 바깥을 클릭했을 때 텍스트뷰 편집을 끝나게 할 수 있게끔

 

다음과 같은 함수를 추가하여

터치가 이뤄졌을 때 텍스트뷰를 첫번째 반응에서 사임시켜줘서 

textViewDidEndEditing 이 함수가 실행될 수 있게끔 만들어주겠습니다

 

전체 코드는 다음과 같습니다!

감사합니다!!

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var myTextView: UITextView!
    

    
    override func viewDidLoad() {
        super.viewDidLoad()
        //textview에 delegate 상속
        myTextView.delegate = self
        
        //처음 화면이 로드되었을 때 플레이스 홀더처럼 보이게끔 만들어주기
        myTextView.text = "플레이스홀더입니다."
        myTextView.textColor = UIColor.lightGray
        
        
        //텍스트뷰가 구분되게끔 테두리를 주도록 하겠습니다.
        myTextView.layer.borderWidth = 1
        myTextView.layer.borderColor = UIColor.black.cgColor

    }
    
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.myTextView.resignFirstResponder()
    }
    
    
}

extension ViewController: UITextViewDelegate {
    
    
    
    func textViewDidEndEditing(_ textView: UITextView) {
        if myTextView.text.isEmpty {
            myTextView.text =  "플레이스홀더입니다"
            myTextView.textColor = UIColor.lightGray
        }

    }

    
    func textViewDidBeginEditing(_ textView: UITextView) {
        if myTextView.textColor == UIColor.lightGray {
            myTextView.text = nil
            myTextView.textColor = UIColor.black
        }
    }


}