MDCTextFieldでテキストを入力してもplaceholderが移動しない場合の対処法

概要

MDCTextFieldでplaceHolderが以下のようになる場合の対処法です。

• NGパターン
  

• OKパターン
  

前提知識

placeHolderをfloatingさせる場合には、
MDCTextFieldのスタイルを設定するMDCTextInputController〜クラスを使う必要があります。

MDCTextInputController〜クラスは以下参照。
https://github.com/material-components/material-components-ios/tree/develop/components/TextFields/styling

この記事ではMDCTextInputControllerUnderlineクラスを例として使います。

イニシャライザに対象のMDCTextFieldインスタンスを渡すと
placeHolderがfloatingするようになります。

MDCTextInputControllerUnderline(textInput: $(MDCTextFieldのインスタンス))

原因と対策

問題点は、MDCTextInputControllerUnderlineのインスタンスの宣言位置です。
クラスのプロパティとして宣言しなければ正常に動作しません。
メソッドのローカル変数ではダメ。

サンプルコードは以下です。
- OKパターン

class MDCSample {
    var style: MDCTextInputControllerUnderline!

    private func setUp() {
        style = MDCTextInputControllerUnderline(textInput: $(MDCTextFieldのインスタンス))
    }
}

• NGパターン

class MDCSample {
    private func setUp() {
        var style: MDCTextInputControllerUnderline!
        style = MDCTextInputControllerUnderline(textInput: $(MDCTextFieldのインスタンス))
    }
}

ネタ元