【Swift】UITextViewにプレースホルダーをつける
はじめに
テキストビューにもテキストフィールドのようにプレースホルダーをつけたい時があるかと思います。
なので、今回はテキストビューにプレースホルダーをつけるにはどうすればいいのかを解説します。
完成するもの
GitHub
実装
まずは、PlaceTextViewというカスタムクラスを作るためのswiftファイルとxibファイルを作成してください。
コードを書いていきます。
final class PlaceTextView: UITextView {
var placeHolder: String = "" {
willSet {
self.placeHolderLabel.text = newValue
self.placeHolderLabel.sizeToFit()
}
}
private lazy var placeHolderLabel: UILabel = {
let label = UILabel()
label.lineBreakMode = .byWordWrapping
label.numberOfLines = 0
label.font = self.font
label.textColor = .gray
label.backgroundColor = .clear
label.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(label)
return label
}()
override func awakeFromNib() {
super.awakeFromNib()
NotificationCenter.default.addObserver(self,
selector: #selector(textDidChanged),
name: UITextView.textDidChangeNotification,
object: nil)
NSLayoutConstraint.activate([
placeHolderLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 7),
placeHolderLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 7),
placeHolderLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 5),
placeHolderLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 5)
])
}
@objc private func textDidChanged() {
let shouldHidden = self.placeHolder.isEmpty || !self.text.isEmpty
self.placeHolderLabel.alpha = shouldHidden ? 0 : 1
}
}
Main.storyboardでUITextViewを配置します。
配置したUITextViewのカスタムクラスに先ほど書いたカスタムクラスを継承させます。n
ViewControllerではどのようなプレースホルダーを表示させるのかを設定します。
final class ViewController: UIViewController {
@IBOutlet private weak var textView: PlaceTextView!
override func viewDidLoad() {
super.viewDidLoad()
textView.placeHolder = "入力してください。"
}
}
解説
表示させるプレースホルダーのテキストをこちらで指定し、入ってきた値をラベルのテキストにします。
var placeHolder: String = "" {
willSet {
self.placeHolderLabel.text = newValue
self.placeHolderLabel.sizeToFit()
}
}
ラベルの設定をします。
private lazy var placeHolderLabel: UILabel = {
let label = UILabel()
label.lineBreakMode = .byWordWrapping
label.numberOfLines = 0
label.font = self.font
label.textColor = .gray
label.backgroundColor = .clear
label.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(label)
return label
}()
オブザーバーを追加します。UITextView.textDidChangeNotification
なので、このオブザーバーはテキストが入力または消去された時に通知されます。
NotificationCenter.default.addObserver(self,
selector: #selector(textDidChanged),
name: UITextView.textDidChangeNotification,
object: nil)
先ほど追加したオブザーバーで通知されるたびに呼ばれるメソッドです。
初回で入力されたまたは全てテキストが消去されたときにalphaを変更することで表示非表示を切り替えます。
@objc private func textDidChanged() {
let shouldHidden = self.placeHolder.isEmpty || !self.text.isEmpty
self.placeHolderLabel.alpha = shouldHidden ? 0 : 1
}
オートレイアウトの指定です。これを指定しないと左上つめつめになってしまうので余白として制約を貼りました。
NSLayoutConstraint.activate([
placeHolderLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 7),
placeHolderLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 7),
placeHolderLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 5),
placeHolderLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 5)
])
あとはViewControllerでIBOutlet接続をしてプレースホルダーを設定してあげましょう。
final class ViewController: UIViewController {
@IBOutlet private weak var textView: PlaceTextView!
override func viewDidLoad() {
super.viewDidLoad()
textView.placeHolder = "入力してください。"
}
}
おわりに
公式でサポートしてほしいですね、、、
Author And Source
この問題について(【Swift】UITextViewにプレースホルダーをつける), 我々は、より多くの情報をここで見つけました https://qiita.com/REON/items/a5b2122785792f83f851著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .