はじめに

Irisで画面を作っていると、画像を含んだボタンを作成したい場面があると思います。
どのように作るのが正しいのか迷うポイントだと思うので、
今回は画像を含んだボタンを作る一般的な方法を2つ紹介したいと思います！

IrisでアプリのUIを作成する際、基本的な作成方法が学べるこちらの記事もおすすめです！
是非併せて確認してみてくださいね

完成イメージ

このような画像付きのボタンを作っていきます。

パターン①で作成したものが①に表示しているボタン、
パターン②で作成したものが②で表示しているボタンとなります。
それぞれボタンをタップ時に、少し色が薄くなるように設定しています。

では早速、作り方を紹介していきます！

まず1つ目の方法は、Button WidgetのBackGroundに表示したい画像を指定する方法です。
この方法では、ボタンの背景に色ではなく画像を指定するため、
通常時とフォーカス時でそれぞれ2つの画像を用意する必要があります。

具体的な作り方をNormal（通常表示）時とFocus（ボタン押下）時で紹介します。

まず、背景付きの丸いボタンをNormal時とFocus時で2種類用意します。
今回はこのような画像を作成しました。

Normal	Focus

丸い画像を表示したいのに、四角い画像をボタンの背景に指定すると、
実機で確認した際にButton Widgetから画像がはみ出てしまい、
四角い画像が表示されてしまうことがあるので注意するようにしましょう。（下記参照）

画像が用意できたら、IrisのAssets->Commonを右クリックして、
Import Imagesをクリックして画像をインポートします。

Buttonを配置します。今回このように作成しました。
丸い形は画像で表現できているので、ボタンウィジェット自体の見た目を変更する必要はありません。

ボタン通常表示時の設定を行います。
Buttonを選択して、PROPERTIES->Skin->Normalを選択します。

Buttonの背景に画像を指定したいので、BackGroundのTypeでImageを選択します。
Imageの項目でChooseボタンをクリックして、作成したNormalの画像を指定しましょう。

Normal時のボタンが完成しました。

次にボタン押下時の設定を行っていきます。
Buttonを選択して、PROPERTIES->Skin->Focusを選択します。

先ほど同様、BackGroundのTypeでImageを選択し、ImageにFocus時の画像を指定しましょう。

Focus時のボタンも完成しました。

この方法で実装した場合の良い点と悪い点をまとめてみました。

👍良い点：画像を用意さえすれば、Widget 1つで実装ができるため簡単
🙅‍♂️悪い点：ボタンの画像を差し替える必要が出てきた場合、2つ画像を作成しそれぞれ画像を指定する必要がある

次にパターン②を紹介していきます！