脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

プログラミングなし!簡単メニューアプリ作成(③ジャンルでページわけ編)|初心者のアプリ開発|Nocode Adalo

f:id:yuka-edu:20211017175857p:plain

こんにちは!ゆかゆかです。

 

これまでAdaloを使って簡単にシンプルなメニューアプリを作成しました。

リンク:簡単3ステップでメニューアプリを作ってみる(①シンプル編)

 

前回はメニューの詳細をポップアップで表示する設定を行いました。

今日はジャンルに分けてメニュー表示する設定を追加します!

 

まずは出来上がりのイメージです。

f:id:yuka-edu:20211017121513p:plain

画面の下にメニューのジャンルを表示します。

今回ジャンルとしては3つ用意しました。(ドリンク、食事、スイーツ)

 

スイーツをタップすると、スイーツだけのメニューを表示します。

f:id:yuka-edu:20211017121500p:plain

 

これでメニューが見やすくなりますね。

それでは設定をしていきます〜

 

 

1.メニューの表示設定

簡単3ステップでメニューアプリを作ってみる(①シンプル編)」で作成した、

メニューの一覧はジャンルで絞っておきます。

ここではドリンクに絞ります。

f:id:yuka-edu:20211017121606p:plain

 

メニューページを丸ごとコピー(Ctr+C)し、ペースト(Ctr+V)します。

f:id:yuka-edu:20211017121615p:plain

 

新しいページのメニューのジャンルを絞る設定を変更します。

ここでは、食事に絞ります。

f:id:yuka-edu:20211017121624p:plain

 

最終的に3つのジャンルごとにメニューページを作成しました!

f:id:yuka-edu:20211017121631p:plain

 

2.タブバーの設定

続いて、タブバーを設定していきます〜

 

  1. +ボタンを選択
  2. ADD COMPONENTを選択
  3. Tab barを選択
  4. 画面の下に設定

f:id:yuka-edu:20211017121548p:plain

 

Tabの表示設定

Icon と名称を設定していきます。

タブは左から、First tab, Second tab…と並んでいます。

最大5個設定でき、表示不要なタブはオフできます。

f:id:yuka-edu:20211017121703p:plain

 

Active Tab は今表示中の画面を意味します。

ドリンクメニュー画面はFirst tabに設定しました。

f:id:yuka-edu:20211017173303p:plain

 

Tabのリンク設定

Tabをタップした時に画面が切り替わる設定をします。

  1. Second Tab を選択
  2. + ADD ACTIONを選択
  3. LInk > 移動先の画面名を選択

f:id:yuka-edu:20211017121709p:plain

 

  1. Transactionは"None"を選択
  2. DONEを選択

"None"を選択すると、

まるで画面が切り替わっていない感じで、表示を切り替えられます。

f:id:yuka-edu:20211017121716p:plain

 

Third TabもSecond Tabと同じように設定しました。

f:id:yuka-edu:20211017121723p:plain

 

3.全てのメニュー画面にタブバーを設定

  1. Tab berをコピー(Ctr+C)し、他のメニュー画面にペースト(Ctr+V)
  2. Active Tab は貼り付けた先の画面に合わせて変更

f:id:yuka-edu:20211017121735p:plain

 

  1. Active Tab、First〜Fifth Tabのリンク先設定 を適宜変更

f:id:yuka-edu:20211017121750p:plain

 

それぞれのメニュー画面にTab Barの設定が完了しました!

f:id:yuka-edu:20211017121756p:plain

それでは、動かしてみましょ〜

 

プレビュー

「食事」タブをタップしてみます。

f:id:yuka-edu:20211017121804p:plain

 

食事メニューの一覧を表示しました!

ハンバーグをタップしてみます。前回設定したポップアップも表示できました。

リンク:メニューアプリ(②ポップアップ表示編)

f:id:yuka-edu:20211017121811p:plain

 

ちなみに、スイーツtabをタップすると、スイーツの一覧を表示しました!

f:id:yuka-edu:20211017121817p:plain

 

自分でアプリが作れるって、楽しいですよね❤︎

次はメニューの検索窓の設定をしてみようかと思っています〜

 

▼無料でも意外と使える Nocode開発ツール Adalo

www.adalo.com

 

▶︎続きはこちら

yuka-edu.hatenablog.com