浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Swift】Materialデザインをアプリに簡単に組み込めるフレームワーク「Material」

先週に引き続き、以前開発した iOS アプリのリファクタリング作業中に導入したフレームワーク「Material」のご紹介です。
アプリにはもともと「MaterialKit」というライブラリを使用していたのですが、動作確認を行った際、こちらのライブラリでは Swift 3 で廃止した関数がいくつか使われていたようで…一気に 100個くらいのエラーが発生してしまいました。
そのため、「Material」フレームワークに乗り換えることにしました。

GitHub のページはこちらから。

GitHub – CosmicMind/Material: A UI/UX framework for creating beautiful applications.
https://github.com/CosmicMind/Material

 

インストール方法ですが、今回は CocoaPods を利用しました。
CocoaPods の導入手順については、今回は割愛します。

まず、Podfile に下記を追加します。

pod 'Material', '~> 3.1.0'

上記を追加したらファイルを保存し、下記のコマンドを実行します。

pod install

特に問題がなければ、これでライブラリのインストールは完了です。
あとは、Xcode でプロジェクトを開き、使用したいボタンなどを Controller に追加していくだけです。

下記のサンプルコードは、フローティングアクションボタン(FloatingActionButton)の実装方法です。

let button = FABButton(image: UIImage(named: "[画像名]"), tintColor: .white)
button.pulseColor = .white
button.backgroundColor = Color.white

self.view.layout(button)
    .width(70)
    .height(70)
    .bottomRight(bottom: 20, right: 20)

1行目で ボタンに表示する画像を指定し、2、3行目でボタンの背景色などを設定します。
pulseColor はイマイチ良く分かっていませんが…動かした感じだと、押した時にフワッと広がるエフェクトの色かな。
で、5〜8 行目でボタンの縦横サイズと、表示位置を指定します。
今回は 縦横 70 で、表示位置は 画面右下隅です。
ちなみに、画面ギリギリに表示されるのではなく 右・下に 20 余白をつけています。
ボタンの表示はこれだけで実装できます。

初めて触ったフレームワークですが、わかりやすくて良いですね。
他にも様々なコンポーネントが用意されているので、少しずつ置き換えていきたいと思います。

 

以上、iOS アプリに、Material デザインを簡単に実装できるフレームワーク「Material」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (0)