はじめに

Irisのワークスペースの左下にあるDefault Libraryの中にはWidgetの一覧が並んでいますが、
もっと下にスクロールすると、すぐに使用できるボタンやチャート、アイコンのテンプレートが用意されています。

今回は、画像ファイルを使わずにDefault Libraryの中にあるアイコンを使って、
下記のような現在のステータスを表示するUIを作成してみたいと思います！

作りながら、使用方法も紹介するので是非参考にしてみてくださいね！
アイコンの使用方法のみ知りたい方は、チェックアイコンの作成で確認できます👀
またどんなアイコンがあるのか知りたい方は、アイコン一覧をチェックしてみてくださいね！

実装方法

UIを作成する前にヘッダー部分の各要素を格納するためのFlexContainerを用意しましょう。
今回はこのように配置しました。

では早速、ステータスバーを作成する方法を1つずつ紹介していきます！

二重丸の作成

それでは早速、入力画面の二重丸を作っていきましょう。
このUIはFlexContainerを2つ使うことで作成ができます。

まず1つめの外側のFlexContainerをこのように配置しました。

次にSkinタブを開いて、FlexContainerの見た目を変更します。
太い線で青色（#042b99）の丸い円を描きたいので、次のように各値を設定しましょう。

Style: Custom、Radius: 100pxにすることで正円を描くことができます。

Skinが出来上がったら、確認画面でもこの見た目を使いたいので、
GeneralのNameでSkin名を変更するようにしておきましょう。
今回はsknFlxBlueBorderという名前にしました。

では次に、中に入っている丸のUIを作成します。
先ほど配置したFlexContainerの中に、新たにFlexContainerを入れます。

外側のFlexContainerを選択した状態で、Widgetをドラックアンドドロップすると中にWidgetを配置することができます。

このようになればOKです。

内側のFlexContainerのLookタブではこのように設定しました。
外側のFlexContainerよりも、幅と高さが小さくなるように設定しています。

次にSkinタブを開いて、青丸を作ります。
BackGroundを青色（#042b99）でOpacity（透明度）を100%にすることで青丸を作ることができます。

Skin名は、sknFlxBlueとして設定しました。

これで二重丸を作成することができました！
次に真ん中にあるボーダーを作っていきましょう！

ボーダーの作成

ボーダーを作る時もFlexContainerを使うことで実装が可能です。

FlexContainerを配置したら、Lookタブで次のように設定をします。
少し太めの線を描きたいので、Height: 5px、Width: 60%にしました。

次に、線の色を灰色（#c9c9c9）で表示したいので、Skinタブで設定していきます。
背景を灰色にするために、Color: #c9c9c9、Opacity: 100%と変更しました。

Skin名： sknFlxLineGray

これでボーダーも完成しました！

丸の作成

灰色の丸も作成していきましょう。二重丸の作成できていれば簡単です。
二重丸の作成と同様に、FlexContainerを配置します。

Skinタブで、背景の色を灰色（#c9c9c9）に変更し、
正円となるようBorderの値を変更すれば、灰色の丸の完成です。

Skin名： sknFlxGray

チェックアイコンの作成

次に確認画面のチェックアイコンを作成していきましょう！
このUIは、FlexContainerとDefault Libraryのデフォルトアイコンを使うことで実装可能です。

まずFlexContainerをこのように配置しました。

背景を青色にしたいので、入力画面の二重丸の作成の際に使用したSkinを流用します。
GeneralのName内にある検索アイコンをクリックして、sknFlxBlueを指定しましょう。
すると、青色背景の丸を作成することができました。

次に、青丸の中にチェックアイコンを入れていきます。
Default Libraryの検索ボックスで「Check」と入力すると、チェックアイコンがいくつか表示されます。
今回は一番左のアイコンを配置したいので、ドラックアンドドロップでFlexContainerの中に配置しましょう。

中央に配置したいので、Lookタブではこのように設定をしました。

デフォルトだとアイコンの色が灰色になっているため、Skinタブで色を変更していきます。

通常Image Widgetを使ってアイコン画像を配置すると、Iris上で画像自体の色を変更することはできませんが、
Default Libraryにあるデフォルトアイコンは、
Label Widgetで作成されているため、Skinタブで色や形を自由に変更することができます。

アイコンの色や大きさは、SkinタブのFontsで変更することができます。
アイコンの色を白色、大きさをデフォルトよりも少し大きくしたかったので、
Color: #ffffff、Size: 180%に変更しました。

Skin名： sknLblCheckWhite

画像ファイルを使わずに、FlexContainerとLabelのみでチェックアイコンを作成することができました！

残りの青色の線と二重丸の実装は、作成したSkinを流用して作成することができます。

今回はチェックアイコンのみ紹介していますが、
Default Libraryには、チェック以外にもさまざまなデフォルトアイコンが用意されています。
デザインが統一されており、よく使われるアイコンが揃っているため、とても使いやすいです。
最後にアイコンの一覧を添付していますので、是非参考にしてみてください