2024年8月16日  最終更新日時 :2024年8月16日

Adaloの解説動画　App Bar

兵庫県神戸市でアプリ開発事業を営んでいる ミコミアのハタイはです。
動画にてノーコードアプリ開発ツールAdaloの説明を行なっており、今回はその動画の文字起こし記事となります。
該当動画はこちらです。

【アプリ上部に置くと便利】App Bar　Adalo 講座　Bコース - YouTube
https://www.youtube.com/watch?v=J2UaZPMjCpY

今回はadaloの コンポーネント押していただいて、4つ目にあるアップバー(App Bar)というものを扱います。タップしていただくと、自動的に上に出るかと思います。これは アプリの上に置くものです。

バックグランドイメージということで画像 を入れてみたり、自由にカスタマイズ することができます。
アイコンのカラーを変更しますとアイコンの部分が変わります。今回は白でいきます。上のアップバーの部分のカラーは、特にいじらず、ちょっと明るめにしておきます。シャドウを入れると下に影ができてちょっと浮いているようにみえます。
ボトムボーダーというところをONにしますと、ボーダーが出てきまして、線を入れることができます。

ボーダーウィドゥス(Border Width)というのは仕切り線の幅です。ボーダーの幅があるので、これを調整していただくと大きくしたり小さくしたりすることができます。

次にレフトアイコンです。これはAllow Backということで、一般的によく ある「戻るボタン」です。
アドアクション(Add Action)していただいて、例えばですね、 リンクのバックにしてもらうと、後ろのページに戻るという実装が簡単にできます。

次にタイトルですね。今はスクリーンタイトルと出てます。ここを好きな文字に変えてみてください。すると、反映されましたね。右側や左側に寄せたり、真ん中に寄せたりすることができます。

ライトアイコンをオンにしていただくとハートマークが出てきました。アイコンとトグル を選べます。トグルはTrueやFalseによって表示を切り替えることができるものです。いいねマーク とかお気に入りマークとかに使用されるケースが多いです。2個目のアイコンを右側に寄せることができます。検索結果を表示することや、お気に入りを見るために表示したりと色々な用途で使うことができます。基本的にAdaloのアップバーはアイコンが2個までなので、2個の中で考えて いただくという形になります矢印をつけていただいて次の ページにするだったり戻ったりとかできる アプリが作れますね。

以上で、アップバー の解説終わります。

動画ではより詳しく解説しています。