[iOS] TextView Placeholder 구현하기

적용 화면

안녕하세요, 이번엔 textField는 가지고 있지만, TextView는 없는 Placeholder를 만들어보겠습니다.
TextView에 Placeholder를 구현하는 방법은 사실 다양하지만, 저는 UILabel를 활용하여 구현해 보겠습니다.
Label을 활용하는 경우 적은 코드로 쉽게 구현할 수 있으며, Placeholder가 없어지는 시점이 Text가 입력되는 순간에 없어지도록 할 수 있습니다. (더욱 Placeholder 다운 느낌🤔)

 

먼저, 

import UIKit

import SnapKit

final class PlaceholderTextView: UIView {
  
}

저는 코드로 UI를 구현할 거기 때문에 UIView를 상속받는 Class를 하나 만들어 줍니다.

 

다음으로, UITextView와 Placeholder가 될 UILabel를 구현해 주도록 하겠습니다.

final class PlaceholderTextView: UIView {
  let textView: UITextView = {
    let textView = UITextView()
    textView.font = .systemFont(ofSize: 18)
    textView.layer.borderWidth = 1
    textView.layer.borderColor = UIColor.black.cgColor
    return textView
  }()
  
  let placeholderLabel: UILabel = {
    let label = UILabel()
    label.textColor = .systemGray3
    label.font = .systemFont(ofSize: 18)
    label.text = "내용을 작성하세요."
    return label
  }()
}

다음으로 Autolayout을 잡아 주도록 하겠습니다.

private func configureUI() {
    addSubview(textView)
    textView.addSubview(placeholderLabel)
    
    textView.snp.makeConstraints { make in
      make.center.equalToSuperview()
      make.width.equalTo(300)
      make.height.equalTo(400)
    }
    
    placeholderLabel.snp.makeConstraints { make in
      make.directionalEdges.equalToSuperview().inset(7)//1
    }
  }

저는 SnapKit을 이용하여 Autolayout을 잡아주었는데 SnapKit을 사용하지 않더라도 상관없습니다. SnapKit은 단지 도구일 뿐이니깐요!!

다른 부분은 중요하지 않고,  1  로 표시해둔 부분만봐주시면 될것 같습니다. TextView 같은 경우 View의 테두리와 Text의 일정 간격이 있기 때문에 Placeholder 또한 그에 맞춰 일정 간격을 inset을 통해 주었습니다.

 

만약 inset이 없다면😳,

넵 위와 같이 살짝? 어색한 화면이 보이게 됩니다.

 

네!! 여기까지 화면 구현이 끝이 났습니다. 아주 간단하게 화면을 구현해 보았습니다.

 

이번엔 TextView에 Text를 입력하면, Placeholder가 Hidden될 수 있도록 UITextViewDelegate를 통해 구현해 보겠습니다.

extension ViewController: UITextViewDelegate {
  func textViewDidChange(_ textView: UITextView) {
    mainView.placeholderLabel.isHidden = !textView.text.isEmpty
  }
}

UITextViewDelegate의 func textViewDidChange(_ textView: UITextView) 메소드를 이용하여 위와 같이 Text가 입력될 때 Placeholder를 Hidden 시켜줄 수 있습니다.

 

⚠️ TextView의 delegate 설정하는 것을 잊지 마세요!!