【Xcode】「material-components」を使ってiOSアプリにFloating Action Buttonを追加する

最近、久しぶりに Swift　で書かれたアプリを触っていますが、その際に Floating Action Button を実装したのでその方法についてまとめ。
タイトルにもある通り、「material-components」というライブラリを導入しました。

実装にあたり、参考にさせていただいた記事がこちら。

iOSでFABを表現する「material-components」「Floaty」 | RE:ENGINES
https://re-engines.com/2019/12/23/material-components-vs-floaty/

こちらのサイトでは「material-components」と「Floaty」の2つのライブラリが紹介されていましたが、私は「material-components」の方をチョイスしました。

ライブラリの導入手順ですが、「material-components」ライブラリは、Cocoapods のみサポートしているので、まずは Podfile に下記を追加します。

pod 'MaterialComponents/Buttons'

今回は、ボタンコンポーネントしか使わないので上記のように記述しています。
こちらを追加したら、pod install コマンドを実行します。
準備はこれでOKです。

Xcode でプロジェクトを開き、StoryBoard に Button を追加します。
あとは、その Button に設定を追加していくだけです。

まず、Custom Class に「MDCFloatingButton」と設定します。

次に、Type を「Custom」に変更します。
ボタンのアイコンは、Image で設定しましょう。
なお、このスクリーンショットでは欠けてしまっていますが、下の方の View カテゴリの Background でボタンの色を設定できます。

ちなみに、私の環境では、ボタンのアイコンにシステムアイコンを設定しましたが、アプリでは表示されませんでした。
システムアイコンは使わないつもりだったので、特に支障はないのですが…原因不明です。

最後に、今回私はボタンのアイコンに PNG 画像を指定したのですが、ボタンいっぱいにその画像が表示されてしまったので、Image Insets で余白を設定しました。

以上、iOS アプリに Floating Action Button を追加する方法についてでした。
ご参考になれば幸いです。