目次

はじめに
ListBoxの基本操作
実装方法
最後に

はじめに

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

ListBoxの基本操作

ListBoxのアイコンは、Drop Down Imageから画像を指定することができます。

しかし、画像ダウンロードサイト等からそのまま画像を指定すると、
以下のようにサイズがあっていない状態で表示されてしまいます。

ListBoxのdropDownImageのサイズは、
iOSの場合、
Retina非対応のデバイスは、20px * 33px、
Retina対応デバイスは、40px * 66px
のサイズで指定する必要があります。
特定のドロップダウンアイコンを指定したい場合、
デザインツールがある場合は、
指定したい画像をダウンロードして上記サイズに収まるように
画像を作成すれば正常に表示させることができます。
今回は、デザインツールがある場合と、ない場合の2通りの方法で説明していきます！
※注意※
Webの場合はDrop Down Imageをメニューから指定することができないため、
listbox名.dropDownImage="downarrow.png";
のように、Controllerで設定してください。（Version9のみ対応）
参考：https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#ListBox_Basic_Properties.htm

実装方法

今回はこのようなプルダウンアイコンを使って、プルダウンを表示したいと思います。

【完成イメージ】

pic.twitter.com/qjvSoszO3W
— Kony (@Kony12763790) January 14, 2021

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

画像の作成

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

今回はSketchというデザインツールを使っています。

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

Drop Down Imageで画像を指定

ListBox Widgetを選択した状態で右メニューのListBoxタブを選択
Drop Down Imageに作成した画像を指定してください。

そうするとこのように表示されるかと思います。

サイズ・位置の調整

この状態だとアイコンが右に寄りすぎてしまっているため、
PaddingメニューでRightの値を3%にしてみます。
画像の通り、右に余白が開いたのがわかるかと思います

TopやLeftの値やサイズも調整できるため、適宜こちらもデザインに合わせて変更してください。

これで実装は完了です！
どのように表示されるかみてみましょう。

pic.twitter.com/b1TbGLInin
— Kony (@Kony12763790) January 15, 2021

右の余白もとれており、ちゃんと指定した画像が表示されていることがわかりますね！次にデザインツールが無い場合の対処法を紹介します。 ## デザインツールがない場合デザインツールがなく、ダウンロードサイトから画像を指定したい場合、規定のサイズに指定することができないため、以下の方法で対処することが可能です。デザインツールがある場合と同様、今回は、このように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) ここまででプルダウンアイコンの設定は完了しました！最後にどのようになったかみてみましょう！

pic.twitter.com/qjvSoszO3W
— Kony (@Kony12763790) January 14, 2021

デザインツールで画像を調整しなくてもプルダウンアイコンを変更することができました！ # まとめ今回は、プルダウンアイコンを設定するためのご紹介をしました！プルダウンを利用する機会は多々あるかと思いますので、是非活用してみてくださいね

# 参考 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