注意書き
今回はあくまで簡単(機能する程度)に実装するだけですので、Usageに書かれていることとは違うと思いますが、ゴリゴリに実装したい方は、この記事を読まず公式ガイドのUsageを熟読することをおすすめします。
※こんな感じで少し雑な記事になると思いますがお許しください。。。
今回使うライブラリ
今回使うのは、GoogleがデザインしたMaterialDesignです。
iOS(Swift,Objective-C)だけでなく、Android(Java,Kotolin),Web(HTML,CSS,JavaScript?)もあります。
(詳しくはこちら)
パーツは material.io/components から探せるので、気に入ったものを探してみてください。
その中でも今回はTextFieldを使いたいと思います。
Podライブラリ導入
・Podファイルの生成
$ pod init
・Podファイルに追加
pod 'MaterialComponents/TextFields'
・Podインストール
$ pod install
使い方
・.workspaceファイルを開きます。
・ストーリーボードに普通のUITextFieldを配置します。
・ViewController.swiftにMaterialComponents.MaterialTextFieldsをインポートします。
ViewController.swift
import MaterialComponents.MaterialTextFields
・先ほどStoryboardに配置したUITextFieldとコードを関連付けをします。
ViewController.swift
@IBOutlet weak var GoogleTextField: UITextField!
・Storyboardに戻り、TextFieldのカスタムクラスを、MDCTextFieldに変更します。
・こんな感じで実装できました！
しっかり表示されました！
・背景にこんな感じの入力する項目(Placeholder)みたいなのをつけたいという方は・・・
・Placeholderの項目を変更してみてください！
サンプルGIF
サンプルプロジェクト