Visualizerでプルダウンアイコンを変更したい場合の手順

#目次
1. はじめに
2. ListBoxの基本操作
2. 実装方法
3. 最後に



#はじめに
アプリを開発していて、プルダウンを表示して選択させるような機能を実装することが多々あると思います。
アプリによって、プルダウンのアイコンを変更したりする場合の
実装方法について紹介します！

#ListBoxの基本操作
ListBoxのアイコンは、**Drop Down Image**から画像を指定することができます。
![スクリーンショット 2021-01-15 13.41.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6916d0f3-4b0a-24b4-804d-3b176d6ac03a.png)
しかし、画像ダウンロードサイト等からそのまま画像を指定すると、
以下のようにサイズがあっていない状態で表示されてしまいます。
![IMG_2905.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1bcdf574-f193-d1bd-923e-e05850f64f21.jpeg)
ListBoxのdropDownImageのサイズは、
**iOSの場合、
Retina非対応のデバイスは、20px * 33px、**
**Retina対応デバイスは、40px * 66px**
のサイズで指定する必要があります。
特定のドロップダウンアイコンを指定したい場合、
デザインツールがある場合は、
指定したい画像をダウンロードして上記サイズに収まるように
画像を作成すれば正常に表示させることができます。
今回は、デザインツールがある場合と、ない場合の2通りの方法で説明していきます！
**※注意※
<font color="Red">Webの場合はDrop Down Imageをメニューから指定することができないため、
`listbox名.dropDownImage="downarrow.png";`
のように、Controllerで設定してください。（Version9のみ対応）</font>**
参考：https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#ListBox_Basic_Properties.htm
#実装方法
今回はこのようなプルダウンアイコンを使って、プルダウンを表示したいと思います。
![arroq.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b23989a8-3202-bf6c-f6bb-0501afa2a538.png)
【完成イメージ】
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/qjvSoszO3W">pic.twitter.com/qjvSoszO3W</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1349745955554246657?ref_src=twsrc%5Etfw">January 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## デザインツールがある場合

###画像の作成
デザインツールがある場合、
設定したい画像をダウンロードして、背景を設置後、
以下のように画像サイズを20px * 33pxのサイズで作成します。

今回はSketchというデザインツールを使っています。
![スクリーンショット 2021-01-15 11.47.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2b50a1d9-3fd8-b2e8-30c0-711434963f93.png)

アイコンが作成できたら、保存して、Visualizerで画像の設定を行います。

###Drop Down Imageで画像を指定
ListBox Widgetを選択した状態で右メニューの**ListBox**タブを選択
**Drop Down Image**に作成した画像を指定してください。
![スクリーンショット 2021-01-15 13.41.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6916d0f3-4b0a-24b4-804d-3b176d6ac03a.png)
そうするとこのように表示されるかと思います。
![スクリーンショット 2021-01-15 11.51.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8f6a41bd-1e6c-d3dd-28f2-f38b3e753777.png)
###サイズ・位置の調整
この状態だとアイコンが右に寄りすぎてしまっているため、
PaddingメニューでRightの値を3%にしてみます。
画像の通り、右に余白が開いたのがわかるかと思います:eyes:

TopやLeftの値やサイズも調整できるため、適宜こちらもデザインに合わせて変更してください。
![スクリーンショット 2021-01-15 11.54.06 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/718a31a4-66c1-ac75-d73c-8f8a8e5150db.png)
これで実装は完了です！
どのように表示されるかみてみましょう。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/b1TbGLInin">pic.twitter.com/b1TbGLInin</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1349920935499886592?ref_src=twsrc%5Etfw">January 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
右の余白もとれており、ちゃんと指定した画像が表示されていることがわかりますね！
次にデザインツールが無い場合の対処法を紹介します。
##デザインツールがない場合
デザインツールがなく、ダウンロードサイトから画像を指定したい場合、
規定のサイズに指定することができないため、以下の方法で対処することが可能です。
デザインツールがある場合と同様、
今回は、このようにFormにListBox Widgetを追加しました。
![スクリーンショット 2021-01-15 0.21.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a9e93212-abff-eab5-6676-3cc253f046cd.png)
###Drop Down Imageに背景と同色の画像を指定
**Drop Down Image**にはデフォルトで必ずアイコンが表示されてしまうため、
これを隠すために背景と同色の画像を用意します。
今回はこちらを利用します。（見えませんが白色の画像を貼っています）
----白画像----
![white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6a65063f-a781-1465-c854-ada57d6cb476.png)
----白画像----
こちらの画像を**Drop Down Image**の画像に指定します。
![スクリーンショット 2021-01-15 13.48.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/20631d4d-71e1-4333-c73c-42fbb319322f.png)
###ImageWidgetに画像を指定
FormにImage Widgetを追加して、今回指定したい画像を指定します。
![スクリーンショット 2021-01-15 0.41.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/282704cf-73d6-6812-6a29-78c8bd9f0898.png)
ListBox WidgetとImage Widgetの高さや幅を調整するために、
FlexContainerでグループ化します。
![スクリーンショット 2021-01-15 0.45.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/407e9324-0891-d153-ab70-5f9cf6ae6def.png)
###サイズ・位置の調整
プルダウンアイコンを表示したい位置、大きさによって調整してください。
今回は、右側を少しあけたかったのでこのように設定しています。
![スクリーンショット 2021-01-15 0.47.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e23b1f92-9fe8-14cc-6653-e183e67bc265.png)
ここまででプルダウンアイコンの設定は完了しました！
最後にどのようになったかみてみましょう！
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/qjvSoszO3W">pic.twitter.com/qjvSoszO3W</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1349745955554246657?ref_src=twsrc%5Etfw">January 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
デザインツールで画像を調整しなくてもプルダウンアイコンを変更することができました！
#まとめ
今回は、プルダウンアイコンを設定するためのご紹介をしました！
プルダウンを利用する機会は多々あるかと思いますので、
是非活用してみてくださいね:information_desk_person_tone1:
#参考
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#ListBox_Basic_Properties.htm
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/ListBox.htm