13
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-08

使ってみてよかったので共有する
今回使用するファイルはこちら
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/

13
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?