目次
- はじめに
- 実装方法
- まとめ
はじめに
Webやモバイル等のアプリを使っていると、データの読み込み中等に
よく以下のようなローディングアイコンが表示されるかと思います。
今回は、Konyで読み込み中のアイコンを表示する方法について、
ご紹介していきたいと思います！
実装方法
早速実装方法をご紹介していきたいと思います
①ローディングアイコンを表示
ローディングアイコンを表示するためには、
アイコンを表示したいフォーム内でアクションを設定し、
左メニューからLoading Indicatorを選択します。
今回は、ログインボタンクリック後にローディングアイコンを表示したいため、
ログインクリック時にアクションを設定しました。
ローディングを表示する場合は、
Loading IndicatorでShowを選択します。
その他、アイコンの下に文字を表示したい場合などはTextに文字を入力すると、
文字の表示も可能になります。
②読み込み終了後にアイコンを非表示
画面遷移後に、ローディングのアイコンが表示されたままだと困るので、
フォームが表示されたら、再度アクションを設定しアイコンが非表示になるよう設定します。
今回は、ログイン後に表示されるfrmMainのpreShowにアクションを設定しました。
ローディングを非表示にする場合は、アクションメニューでLoading Indicatorを選択し、
以下のようにDismissを選択すれば完了です。
ここまでの手順で、一旦ローディングが表示されるようになりました！
次にオリジナルのアイコンを表示したい場合の手順も紹介します
③アイコンデザインを変更
デフォルトのアイコンは、以下のようになっているかと思いますが、
アプリのテーマカラーや企業カラーに合わせて、
アイコンのデザイン自体を変更したい場合があるかと思います
その場合は、変更したいアイコンのファイル名をloading.gifという名前で保存し、
Assetタブから、該当のgifファイルをimportしてください。
そうすると、既存のデフォルトのローディングアイコンが上書きされ、
変更したファイルが適用されます。
ローディングアイコンについては、ご自身で作成しても良いですが、
「ローディングアイコン」と検索すると、無料でダウンロードできるサイトが沢山出てきますので、
お好みのものを探してダウンロードしてみてくださいね！
今回は、こちらを利用しました。
では、実際に動きをみてみましょう！
— Kony (@Kony12763790) September 23, 2020
ログインボタンクリック後、上記のアイコンが表示され、
画面遷移後にアイコンが消えていることがわかりますね！
〜補足〜
loading.gifファイルは、Assetsタブの画像ファイルには表示されませんが、
フォルダを見るとプロジェクトフォルダのimagesの下に画像ファイルが保存されています。
変更したいgifファイルと、このファイルを同じ名前で保存することにより、
アイコンが上書きされ、ローディング表示時のアイコンの挿し替えが可能になります。
まとめ
今回は、読み込みの際に表示するアイコン表示の方法について説明しました。
細かい機能ではありますが、アイコンがないとアプリが動いているのかそれとも止まっているだけなのか、
わかりにくい場合があるので、読み込み中はアイコンを表示してあげて、
更に、アイコンに自社のキャラクターを使えば、ユーザーが使っていてより楽しいものになるかと思います！
Konyでは、ローディングアイコンを表示するために特に長いコードを書く必要なく
アクションメニューで簡単に設定できるので、是非今回の手順を参考にしてみてくださいね！