SwiftでGoogleのMaterialDesignを簡単に使ってみる

4072 ワード
google Swift MaterialDesign Design Xcode google テキストリンク

注意書き

今回はあくまで簡単(機能する程度)に実装するだけですので、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

サンプルプロジェクト