ListViewで、写真付き間食カロリー確認アプリを作った
App Inventor を使い始めた時に、ちょっと苦労したのが情報の少なさ。MITホームページのドキュメントは、コンポーネントとブロックの機能は記述してあるが、どう使うかが書いてない。せめてサンプルあれば・・・
ということで、今日作ったアプリを紹介します。
今回は、ListView(リストビュー)に写真を表示しました。
目次
アプリの動作
作成したアプリはこんな感じです。これは、アプリを起動したときの画面。登録した間食とそのカロリーをリスト表示しています。
1.「DB呼出」ボタン:TinyDBに保存したデータを呼出し、ListViewに表示します。起動時にも同様の働きをします。
3.「写真を選択」ボタン:このボタンをクリックし、写真は撮影済みの物を写真フォルダーから選択します。
2.「リストに追加」ボタン:写真と食品名とカロリーをセットしたら、このボタンでListViewに追加します
3.「削除」ボタン:ListViewから間食のデータを削除します
4.「DB保存」ボタン:リストに追加したり、リストから削除した最新のデータ(間食リスト)をTinyDBに保存します。
実際の操作は、後述の方法で aiaファイル をダウンロードして試してください。
デザイン編集画面
利用したコンポーネントとその働きは、次の通りです。
◎表示コンポーネント
・Drawing and AnimationグループのCanvas(キャンバス):間食の写真を表示
・メディアグループの ImagePicker(イメージピッカー):スマホに保存されている写真ファイルの選択
・インターフェースグループのListView(リストビュー):間食データをリスと形式で表示、選択
その他、インターフェースグループのボタン、ラベルなど
◎非表示コンポーネント
・TinyDB(タイニーDB):間食リストの保管
・Nitifier(警告):「リストに追加」ボタンを押した時、写真、間食名、カロリーがそろっていないと警告を発し、保存されません。
ブロックの説明
ブロックの全体図は下記の通り(右クリックで「新しいタブで画像を表示」で拡大表示できます)
ポイントを追加説明
1.ListViewに新規項目を追加する方法
下記の通り、CreateElementブロックの各項目に、値をセットします。
imageName には、Canvasの画像をCanvas.BackgroundImage でセットします。
2.リストの項目の表示方法は、でデザイン画面で設定します。
3.リストから各項目(写真、間食名、カロリー)を取り出す方法
ListElementに何をセットするのか分かりにくかったのですが、ListView.Selection ではエラーになり下記の指定方法にたどり着きました。
サンプルのaiaファイルをダウンロードして、実際に動かしてみてください。
サンプルのソースファイルは、下記からダウンロードし、自分のPCに読込み利用できます。
サンプルファイルのダウンロードと利用方法はこちらを参照願います。https://note.com/tech4world/n/n5c73815637de
あとがき・・・
ListViewは結構使いますが、画像付きリストをちゃんと使ったのは今回が初めてで 「ポイントを追加説明」で記述したあたりは少し試行錯誤しました。
ご意見・質問等ありましたら、コメントをお願いします。記事に反映していきます。