はじめに
こんにちは、nukkyです。
UITextFieldにはプレースホルダが標準で用意されていますが、UITextViewには用意されていません。
そこで、今回はUITextViewにプレースホルダっぽいものを表示できるようなクラスを作成したいと思います！
前提条件
Xcode 9.1
iOS 11 Simulator
Swift 4.0
実装
まずはUITextViewを継承したクラスを作成します。
プレースホルダをStoryboard上で確認するために＠IBDesignableを宣言します。
| 1 2 3 | import UIKit @IBDesignable class PlaceHolderTextView: UITextView { |
プレースホルダ表示用のUILabelを用意します
| 1 2 3 4 | private lazy var placeHolderLabel: UILabel = UILabel(frame: CGRect(x: 6.0, y: 6.0, width: 0.0, height: 0.0)) |
プレースホルダ表示用のUILabelを構築します
| 1 2 3 4 5 6 7 8 9 10 | private func configurePlaceHolder() { self.placeHolderLabel.lineBreakMode = .byWordWrapping self.placeHolderLabel.font = self.font self.placeHolderLabel.textColor = UIColor(red: 0.0, green: 0.0, blue: 0.0980392, alpha: 0.22) self.placeHolderLabel.backgroundColor = .clear self.addSubview(placeHolderLabel) } |
プレースホルダの表示/非表示を切り替えるメソッドを用意します
| 1 2 3 4 5 6 7 | private func changeVisiblePlaceHolder() { if self.placeHolder.isEmpty || !self.text.isEmpty { self.placeHolderLabel.alpha = 0.0 } else { self.placeHolderLabel.alpha = 1.0 } } |
プレースホルダを用意するということはキーボードを表示し入力すると思うので、UITextViewは改行に対応しているためコードでキーボードのUIToolbarに閉じるボタンを追加します
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | private func setToolBar() { // 仮のサイズでツールバー生成 let kbToolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: 320, height: 40)) kbToolBar.barStyle = UIBarStyle.default // スタイルを設定 kbToolBar.sizeToFit() // 画面幅に合わせてサイズを変更 // スペーサー let spacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil) // 閉じるボタン let commitButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.done, target: self, action: #selector(PlaceHolderTextView.commitButtonTapped)) kbToolBar.items = [spacer, commitButton] self.inputAccessoryView = kbToolBar } @objc private func commitButtonTapped (){ self.endEditing(true) } |
awakeFromNibで上記のメソッドをよんでおきます、それとこのタイミングでプレースホルダの表示/非表示を切り替えるためにNotificationCenterからUITextViewTextDidChangeを検知するようにします
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | override func awakeFromNib() { super.awakeFromNib() self.configurePlaceHolder() self.changeVisiblePlaceHolder() self.setToolBar() NotificationCenter.default.addObserver(self, selector: #selector(textChanged), name: .UITextViewTextDidChange, object: nil) } @objc private func textChanged(notification: NSNotification?) { changeVisiblePlaceHolder() } deinit { NotificationCenter.default.removeObserver(self) } |
最後にStoryboardからプレースホルダを編集できるように@IBInspectableを用意します
| 1 2 3 4 5 6 7 | @IBInspectable var placeHolder: String = "" { didSet { self.placeHolderLabel.text = self.placeHolder self.placeHolderLabel.numberOfLines = 0 self.placeHolderLabel.sizeToFit() } } |
さいごに
これでUITextViewにプレースホルダっぽいものを表示できるようになります！
個人的には結構UITextViewにプレースホルダをつけたい機会は多いと思っているので同じような思いをしている人のお役に立てればと。
![](<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=12&l=ur1&category=amazonrotate&f=ifr&linkID=b58084340147c66533fd679fc7896f47&t=nukky1985-22&tracking_id=nukky1985-22" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>)
![](<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=42&l=ur1&category=literaturebooks&banner=0E3R1FMFGRH02M3C66R2&f=ifr&linkID=f9a0550b8551699876e6550703fc853b&t=nukky1985-22&tracking_id=nukky1985-22" width="234" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>)