Material-components-iOSでiPhoneにマテリアルデザインを組み込む

使ってみてよかったので共有する 今回使用するファイルはこちら https://github.com/material-components/material-components-ios

インストール

Githubの手順通りに進めていく

  1. cocoapodsのインストール(インストール済みの場合はスキップ)
sudo gem install cocoapods 
  1. podファイル作成(作成済みの場合はスキップ)
pod init
  1. podファイルに下記を追加
pod 'MaterialComponents'
  1. コンポーネントのインストール
pod install
  1. Xcodeで開くワークスペースを変更

スクリーンショット 2017-08-08 23.07.50.png

使ってみる

Raised button

storybordにボタンを追加してclassを「MDCButton」にする

スクリーンショット 2017-08-08 23.11.37.png

すると、マテリアルボタンができる

MaterialButton.gif

Floating action button

これも同じ手順で下記を「MDCFloatingButton」を設定する

スクリーンショット 2017-08-08 23.15.30.png

すると、Floating Buttonが作成できる

FloatingButton.gif

ボタンの色や、背景色を変更する場合は下記のコードを追加

  • 文字色の変更
materialButton.setTitleColor(UIColor.white, for: .normal)
  • 背景変更
materialButton.setBackgroundColor(UIColor.blue, for: .normal)

Material dialog

  • podファイルに下記を追加する
pod 'MaterialComponents/Dialogs'
  • インストールする
pod install
  • ダイアログを出したいときに下記のコードを追加する
let alertController = MDCAlertController(title: "Material Dialog", message: "This is Material Dialog! Let's Start Now!")
let action = MDCAlertAction(title:"OK")
alertController.addAction(action)
        
present(alertController, animated:true)

すると、ダイアログが出る

MaterialDialog2.gif

他にもいろんなcomponentが用意されているのでぜひ使ってみてください https://material.io/components/ios/