SwiftUIの基本を身につけたい方はこちら

【Xcode/Swift】XcodeでAndroidのマテリアルデザインが使えるライブラリ「MaterialComponents」の使い方を解説

この記事では、「MaterialComponents」というライブラリの使い方について解説していきたいと思います。

MaterialComponentsとは?

MaterialComponentsとは、XcodeでAndroidのマテリアルコンポーネントが使えるライブラリです。要はAndroidのパーツが使えるようになるライブラリです。

まず、Androidと、iOSは全く画面のデザインコンセプトが違います。

Androidは紙と紙を重ね合わせたようなデザイン(マテリアルデザイン)に対して、iOSはガラスにパーツを置いたようなデザインという違いがあります。

で、このライブラリを使えば、iOSでAndroidのデザインが使えるようになるというわけです。(まぁiOSならiOSのデザインで作った方が良いとは思いますが、、、)

以下のようなボタンとかも作れたりします。

引用元:Material Design-(Buttons)

使い方

ライブラリ導入

まずは、以下のライブラリをcocoapodsで導入してください。

pod 'MaterialComponents/Buttons'
【Xcode/Swift】CocoaPodsの使い方を徹底解説

マテリアルコンポーネントを配置

では、マテリアルコンポーネント(Androidデザイン)を使ってみましょう。

STEP.1

①Main.storyboardを選択
②プラスボタンをクリック
③Buttonを画面の中央にドラッグ&ドロップ

STEP.2

①Buttonを選択
(Shoe the Size inspector)をクリック
③WidthとHeightを100に変更

STEP.3

①Buttonを選択
Show (Shoe the Attributes inspector)を選択
③BackgroundをSystem Yellow Colorに変更

STEP.4

①Buttonを選択
Show (Show the Identity inspector)をクリック
③ClassのところをMDCFloatingButtonに変更

これで実行してみると、このようにAndroidのボタンが表示されます。

評価