Irisで画像付きのボタンを作成する方法

# 目次
1. はじめに
1. 完成イメージ
1. 実装方法
1. まとめ


# はじめに

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


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

https://qiita.com/VoltMX_Team/items/8685b53a8878d41cdaf6

# 完成イメージ
このような画像付きのボタンを作っていきます。

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

![ezgif-1-f803112d7a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ce37ba1d-f09b-50b6-58f5-f0dfca7344bb.gif)


#  実装方法

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

### パターン①：ButtonのBackGroundに画像を設定する

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

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

#### 画像を用意

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

|Normal|Focus|
|--|--|
|![pencil_circleのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6d82ea9e-343c-4e02-5611-b309c4af3974.png)|![pencil_circle_focusのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/48c36972-7531-79ef-3986-8f425e3a0f92.png)|

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

![①動作確認.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/86d0b0c2-c399-a065-8380-2a28bf8c7799.jpeg)


画像が用意できたら、IrisのAssets->Commonを右クリックして、  
Import Imagesをクリックして画像をインポートします。
![スクリーンショット 0006-01-18 14.42.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6e10d3bf-fc38-730d-23e3-04b09b165309.png)

#### Widget配置
Buttonを配置します。今回このように作成しました。
丸い形は画像で表現できているので、ボタンウィジェット自体の見た目を変更する必要はありません。
![スクリーンショット 0006-01-18 15.11.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/090f06dd-2193-f203-eac0-af4c89502ea8.png)

#### Normal設定
ボタン通常表示時の設定を行います。
Buttonを選択して、PROPERTIES->Skin->Normalを選択します。
![スクリーンショット_0006-01-18_14_06_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5c41c44c-0d4c-bbdc-61ba-471795412d96.png)

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

![スクリーンショット_0006-01-18_15_15_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d00084aa-07de-eae5-f0bb-7f1eeedaa307.png)

Normal時のボタンが完成しました。
![スクリーンショット 0006-01-17 15.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8f761c04-7527-c803-3c0a-69af75e05163.png)


#### Focus設定

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

![スクリーンショット_0006-01-18_15_19_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8e3c5121-8a38-0a63-3e98-3166f4d79026.png)

先ほど同様、BackGroundのTypeでImageを選択し、ImageにFocus時の画像を指定しましょう。
![スクリーンショット_0006-01-18_15_19_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/86aa95fc-a68d-07a0-03d9-ce5604060712.png)

Focus時のボタンも完成しました。
![スクリーンショット 0006-01-18 15.22.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/805d80ab-a6a9-1557-a572-a3dc9fa8df24.png)

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

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

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

### パターン②：FlexContainerにImageを入れる

2つ目の方法は、FlexContainerでボタンの色・形を指定し、その中に画像を入れて作成する方法です。
この方法では、FlexContainerで透明度の調整をすることでフォーカス時の見た目を変更することができます。

#### 画像用意
パターン②ではFlexContainerでボタンの色と形を表現するので、用意する画像は1つでOKです。
白抜きの鉛筆画像を1つだけ用意しました。

↓こちらの画像を使用
![pencil 1のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f5be418e-d763-c4de-3fbc-dee21a9a1267.png)


#### Widget配置
FlexContainerの中にImageを配置します。
Lookタブでの設定はそれぞれこのように指定しました。
|FlexContainer|Image|
|--|--|
|![スクリーンショット 0006-01-18 15.50.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/75fa16b6-b697-3dad-2ba6-f44a1bfd29d3.png)|![スクリーンショット 0006-01-18 15.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dfb9f043-5b9c-320b-bc32-6362beb697f1.png)|

#### Normal設定
見た目の変更を行っていきます。
FlexContainerを選択して、PROPERTIES->Skin->Normalを選択します。

今回の場合、FlexContainerでボタンの形・色を決めるので、
BackGroundを指定したい色（#eb455f）に変更します。

次に丸いボタンを作りたいので、
Border: 1px、Style: Costom、Raduis: 100pxに変更しましょう。
この時Borderの色もBackGroundに指定した色と同じになるようにしてください。
![スクリーンショット_0006-01-18_15_55_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5f8c881a-1feb-f73b-e541-b3d8828eda7c.png)

ボタンの色・形が決まったので、中に表示する画像を指定しましょう。

Imageを選択し、PROPERTIES->Imageを選択します。
SourceのEditボタンを押して、用意した画像を指定しましょう。
![スクリーンショット_0006-01-18_15_57_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/05e501f7-0b7e-9829-31a1-546ac789baaf.png)

Normalのボタンが完成しました。
![スクリーンショット 0006-01-18 15.59.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8771bcd1-2be2-fb0d-2240-f2a52349028a.png)

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

NormalのSkinを複製し、Opacity（透明度）のみを80%に変更してください。
Borderの変更も忘れないようにしましょう。
![スクリーンショット_0006-01-18_16_04_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/333a09fb-4bdc-0802-6e60-6cc66d7d96eb.png)

Focus時のボタンも完成しました。
![スクリーンショット 0006-01-18 16.07.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0e9bfa23-416d-a456-0e9d-d93f380fdb3e.png)


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

👍良い点：ボタンの中の画像を変更する必要が出てきた場合、Image Widgetで画像を差し替えるだけでOK
🙅‍♂️悪い点：FlexContainerとImageを2つ配置する必要があり、形もFlexContainerで指定する必要がある
:::

# 最後に
最後に2つのパターンの完成イメージを見てみましょう。

![ezgif-1-f803112d7a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ce37ba1d-f09b-50b6-58f5-f0dfca7344bb.gif)

それぞれ作成方法は違いましたが、同様の見た目でボタンが表示できていますね👀

今回は画像付きのボタンを作成する方法について紹介しました！
各パターンで、それぞれ良い点・悪い点をまとめましたので、
実装や変更のしやすさに応じてお好みの方法で作ってみてくださいね👍