web-dev-qa-db-ja.com

材料コンポーネント-テキストフィールド-IOS

Swiftプログラミングの初心者です。フローティングプレースホルダー入力を使用してログインページを設計する必要があります。PODを使用してMDCTextInputをインストールしました。

追加されたインポート

import MaterialComponents.MaterialTextFields

そして、以下のコードが追加されたviewDidLoad（）で、

companyID.placeholder = "Company ID"
companyID.placeholderLabel.highlightedTextColor = UIColor.white
companyID.placeholderLabel.textColor = UIColor.white
companyID.underline?.color = UIColor.white
companyID.delegate = self

iOSの材料コンポーネントに記載されている手順に従いました

私はこの行について明確ではありません、

To achieve the animations and presentations defined by the guidelines (floating placeholders, character counts), a controller that conforms to protocol MDCTextInputController must be initialized to manage the text field.

私はフローティングプレースホルダーアニメーションを取得していません、Swift4でこれを行う方法は？誰もが私にアイデアを提供してください。

マテリアルiOS Githubリンク： material-components-ios

iosswift3material-design
6
US-1234

SkyFloatingLabelTextField Cocoaポッドを使用します。実装ははるかに簡単です。1行のコードを書く必要さえありません。ストーリーボードから構成できます。ここから取得できます： https://github.com/Skyscanner/SkyFloatingLabelTextFieldenter image description here

6
S.S.D

アニメーションを取得するには、varclassのサブクラスのMDCTextInputControllerBaseを作成できます（<-これらのクラスはMDCTextInputControllerFloatingPlaceholderプロトコルを確認します<-このプロトコルはMDCTextInputControllerprotocolを確認します）。 UIViewController内に変数を作成し、textInputを渡してinitしてMDCTextFieldを渡します。

なぜ？

But to achieve the animations and presentations defined by the guidelines (floating placeholders, character counts), a controller that conforms to protocol MDCTextInputController must be initialized to manage the text field.

これは、MDCTextInputControllerBaseのいずれかを初期化する必要があることを意味しますclass/MDCTextInputControllerプロトコル

十分な話。いくつかのコードを参照してください：

final class SomeVC: UIViewController {

           /* This is a subclass of MDCTextInputControllerBase */
    var textFieldControllerFloating = MDCTextInputControllerUnderline()

    /* For multiple textField */
    var arrayOftextFieldControllerFloating = [MDCTextInputControllerUnderline]()

    override func viewDidLoad() {
      let textFieldFloating = MDCTextField()
      self.view.addSubview(textFieldFloating)

      textFieldFloating.placeholder = "Full Name"
      textFieldFloating.delegate = self

      textFieldControllerFloating = MDCTextInputControllerUnderline(textInput: textFieldFloating) // This will animate the textfield's place holder

    /* If you have multiple textField */
      arrayOftextFieldControllerFloating.append(MDCTextInputControllerUnderline(textInput: textFieldFloating1)) 
      arrayOftextFieldControllerFloating.append(MDCTextInputControllerUnderline(textInput: textFieldFloating2))
      arrayOftextFieldControllerFloating.append(MDCTextInputControllerUnderline(textInput: textFieldFloating3))
     // Must have a MDCTextField / MDCMultilineTextField as textInput
    }
}
extension SomeVC: UITextFieldDelegate {}

注：MDCTextFieldまたはMDCMultilineTextFieldごとに新しいコントローラーを作成する必要があります

3
Subhajit Halder

フローティングラベルのあるUITextField：

TextFieldプレースホルダーをクリックすると、フローティングラベルが付いた上向きにアニメーション化します。

空のSwiftクラス名FloatingLabeledTextFieldを作成し、そのクラスのすべてのコードを貼り付けます。

使用法：オブジェクトライブラリからUITextFieldをドラッグします。 XcodeでTextFieldを選択し、Identity Inspectorに移動して、FloatingLabeledTextFieldにクラスを割り当てます。それでおしまい。

import UIKit

class FloatingLabeledTextField: UITextField {

  var floatingLabel: UILabel!
  var placeHolderText: String?

  var floatingLabelColor: UIColor = UIColor.blue {
    didSet {
        self.floatingLabel.textColor = floatingLabelColor
    }

   var floatingLabelFont: UIFont = UIFont.systemFont(ofSize: 15) {

      didSet {
        self.floatingLabel.font = floatingLabelFont
      }
   }

   var floatingLabelHeight: CGFloat = 30

   override init(frame: CGRect) {
     super.init(frame: frame)
   }

   required init?(coder aDecoder: NSCoder) {

    super.init(coder: aDecoder)

    let flotingLabelFrame = CGRect(x: 0, y: 0, width: frame.width, height: 0)

    floatingLabel = UILabel(frame: flotingLabelFrame)
    floatingLabel.textColor = floatingLabelColor
    floatingLabel.font = floatingLabelFont
    floatingLabel.text = self.placeholder

    self.addSubview(floatingLabel)
    placeHolderText = placeholder

    NotificationCenter.default.addObserver(self, selector: #selector(textFieldDidBeginEditing), name: UITextField.textDidBeginEditingNotification, object: self)

     NotificationCenter.default.addObserver(self, selector: #selector(textFieldDidEndEditing), name: UITextField.textDidEndEditingNotification, object: self)


}

@objc func textFieldDidBeginEditing(_ textField: UITextField) {

    if self.text == "" {
        UIView.animate(withDuration: 0.3) {
            self.floatingLabel.frame = CGRect(x: 0, y: -self.floatingLabelHeight, width: self.frame.width, height: self.floatingLabelHeight)
        }
        self.placeholder = ""
    }
}

@objc func textFieldDidEndEditing(_ textField: UITextField) {

    if self.text == "" {
        UIView.animate(withDuration: 0.1) {
           self.floatingLabel.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: 0)
        }
        self.placeholder = placeHolderText
    }
}

deinit {

    NotificationCenter.default.removeObserver(self)

  }
}

ViewControllerのビューでTextfieldをドラッグし、Identity InspectorでFloatingLabeledTextFieldにクラスを割り当てます。

Xcode Identity Inspector

結果：

Demo Image

1
Yogendra Singh