swift マテリアルデザイン　テキストフィールド

swiftのマテリアルデザイン　テキストフィールドを実装

ポイントは各画面のViewのクラスはAppleのデフォルトのコントローラーに接続すること。

f:id:happy_teeth_ago:20191106232616g:plain

pod file

# Uncomment the next line to define a global platform for your project
platform :ios, '11.0'

target 'Shrine' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  use_frameworks!

  # Pods for Shrine
  if(ENV['TEST_BRANCH'])
    pod 'MaterialComponents', :git => 'https://github.com/material-components/material-components-ios', :branch => ENV['TEST_BRANCH']
  elsif(ENV['TEST_COMMIT'])
    pod 'MaterialComponents', :git => 'https://github.com/material-components/material-components-ios', :commit => ENV['TEST_COMMIT']
  elsif(ENV['TEST_TAG'])
    pod 'MaterialComponents', :git => 'https://github.com/material-components/material-components-ios', :tag => ENV['TEST_TAG']
  elsif(ENV['DEFAULT_BRANCH'])
    pod 'MaterialComponents', :git => 'https://github.com/material-components/material-components-ios', :branch => ENV['DEFAULT_BRANCH']
  else
    pod 'MaterialComponents', :git => 'https://github.com/material-components/material-components-ios', :branch => 'google-io-codelabs-2019'
  end

end

実装

import UIKit
//コンポネント
import MaterialComponents


//MDCTextFieldを利用
//テキストフィールドを作成
   let usernameTextField: MDCTextField = {
        let usernameTextField = MDCTextField()
        usernameTextField.translatesAutoresizingMaskIntoConstraints = false
        usernameTextField.clearButtonMode = .unlessEditing
        usernameTextField.backgroundColor = .white
        return usernameTextField
    }()
    
    let passwordTextField: MDCTextField = {
      let passwordTextField = MDCTextField()
      passwordTextField.translatesAutoresizingMaskIntoConstraints = false
      passwordTextField.isSecureTextEntry = true
      passwordTextField.backgroundColor = .white
      return passwordTextField
    }()


    //TODO: Add text field controllers
    let usernameTextFieldController: MDCTextInputControllerOutlined
    let passwordTextFieldController: MDCTextInputControllerOutlined
    // Buttons

    //TODO: Add buttons 他のプロパティを使わないからどこでもインスタンス作れる
    let cancelButton: MDCButton = {
        let cancelButton = MDCButton()
        cancelButton.translatesAutoresizingMaskIntoConstraints = false
        cancelButton.setTitle("CANCEL", for: .normal)
        cancelButton.addTarget(self, action: #selector(didTapCancel(sender:)), for: .touchUpInside)
        return cancelButton
    }()

    let nextButton: MDCButton = {
        let nextButton = MDCButton()
        nextButton.translatesAutoresizingMaskIntoConstraints = false
        nextButton.setTitle("NEXT", for: .normal)
//objective-Cを呼び出す
        nextButton.addTarget(self, action: #selector(didTapNext(sender:)), for: .touchUpInside)
        return nextButton
    }()
    
    
    @objc func didTapNext(sender: Any) {
       self.dismiss(animated: true, completion: nil)
     }

     @objc func didTapCancel(sender: Any) {
       self.dismiss(animated: true, completion: nil)
     }


//初期化時に忘れないこと
 override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
    //TODO: Setup text field controllers
    usernameTextFieldController =  MDCTextInputControllerOutlined(textInput: usernameTextField)
    passwordTextFieldController =  MDCTextInputControllerOutlined(textInput: passwordTextField)

Storyboardでもクラスが選択できる

f:id:happy_teeth_ago:20191106232917p:plain