【iOS】プレースホルダー付きのUITextViewを実装してみました

IMG_8803

iOS開発担当の鶴本です。

最近まで開発していたアプリにユーザー情報を入力するためにTextViewを使用しましたが、TextFieldにある入力フォームにおなじみのプレースホルダーがTextViewにはありません。

ある程度文字数が多くなる入力フォームでは、TextFieldでは対応できないので、プレースホルダーが付いているTextViewが欲しくなる時があります。

ということでプレースホルダー付きのTextViewをSwiftで実装してみました。

ソースコード

import UIKit

@IBDesignable
class PlaceHolderTextView: UITextView {
    
    // プレースホルダーのラベル
    private var placeHolderLable: UILabel = UILabel()
    
    // MARK: - ストーリーボードからの呼び出し
     required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        initialize()
    }
    
    // MARK: - コード上からの呼び出し
    init(frame: CGRect) {
        super.init(frame: frame, textContainer: nil)
        initialize()
    }
    
    // MARK: - 初期化メソッド
    func initialize() {
        NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(self.TextChanged(_:)),
            name: UITextViewTextDidChangeNotification,
            object: nil)
        
        self.textContainerInset = UIEdgeInsetsMake(5, 5, 5, 5)
        placeHolderLable = UILabel(frame: CGRect(x: 8, y: 5, width: self.bounds.size.width - 16, height: 0))
        placeHolderLable.font = UIFont.systemFontOfSize(14.0)
        placeHolderLable.lineBreakMode = NSLineBreakMode.ByCharWrapping
        self.addSubview(placeHolderLable)
    }
    
    // MARK: - プレースホルダーのテキスト設定
    @IBInspectable var placeHolder: String = "Place Holder" {
        didSet {
            self.placeHolderLable.text = placeHolder
            self.placeHolderLable.sizeToFit()
        }
    }
    
    // MARK: - プレースホルダーの色の設定
    @IBInspectable var placeHolderColor: UIColor = UIColor.lightGrayColor() {
        didSet {
            self.placeHolderLable.textColor = placeHolderColor
        }
    }
    
    // MARK: - プレースホルダーの枠線の色の設定
    @IBInspectable var borderColor: UIColor = UIColor.clearColor() {
        didSet {
            self.layer.borderColor = borderColor.CGColor
        }
    }
    
    // MARK: - プレースホルダーの枠線の色の設定
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }
    
    // MARK: - プレースホルダーの角の丸みの設定
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            self.layer.cornerRadius = cornerRadius
            self.layer.masksToBounds = true
        }
    }
    
    // MARK: - プレースホルダーの枠線の色の設定テキストが変更された際に呼ばれる
    func TextChanged(notification: NSNotification) {
        placeHolderLable.hidden = (0 == text.characters.count) ? false : true
    }
    
    // MARK: - 通知の解放
    deinit {
        NSNotificationCenter.defaultCenter().removeObserver(self)
    }
}

使用例

クライアントコードでは例えば以下のように書きます。

    override func viewDidLoad() {
   
        super.viewDidLoad()
        
        // 初期化
        let placeHolderTextView = PlaceHolderTextView.init(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
        
        // プレースホルダーに値を設定する
        placeHolderTextView.placeHolder = "プレースホルダー"
        placeHolderTextView.placeHolderColor = UIColor.grayColor()
        placeHolderTextView.borderColor = UIColor.blueColor()
        placeHolderTextView.borderWidth = 5
        placeHolderTextView.cornerRadius = 10
        
        // 画面に表示
        self.view.addSubview(placeHolderTextView)
    }

プレビュー

実行結果です。

IMG_0308_png

 

まとめ

使用例ではコードで生成しましたが、ストーリーボードでも生成できます。その際ストーリーボード上でのプレースホルダーのレイアウトが少し崩れてしまうので、その点が課題として挙げられます。
機会があれば今後も自分が実装したものについて書いていきたいと思います。

それでは。

 

鶴本 賢太朗
システム開発事業部のiOSの開発担当。
Swift,Objective-Cを用いての開発がメイン。

Egg Device Application

東京品川のスマホアプリ開発会社です。
一般アプリ、業務用アプリからVRまで開発可能。

ライター一覧

求人情報

スマホアプリ開発の
相談を受け付けています

メールでのご相談

お電話でのご相談
TEL 03-5422-7524
平日10:00~18:00