Noodlで画面遷移

Noodlで今度は画面遷移

Noodlとは

スウェーデン発のプロトタイピングツールNoodlを触ってみた - Qiita

画面遷移する

Pages Page Page Navigation ノードを使うとできる

Create New Porject

各ページのComponentをつくる

左のナビバーの +Component から3つつくる

• page-top
• page-pink
• page-blue

Main componentをつくる

• Pagesノードを追加してRootの下に配置
• Pagesノードのプロパティ設定
  • Start Page: /page-top

page-top componentつくる

トップ画面用の画面
page-pinkへ遷移するボタンを持つ

• Pageノード追加し背景用のRectangleとボタン用のRectangleをPage配下に追加
• Page Navigation追加しプロパティ設定
  • Destination: /page-pink
• ボタンRectangleからPage Navigationへビヨーンと伸ばしプロパティ設定
  • Tap
  • Navigate To Page

page-pink componentつくる

トップから遷移先の画面
page-blueへ遷移するボタンをもつ

• page-topと同じくPageノード追加し背景用のRectangleとボタン用のRectangle追加
• page-topと同じ方法でpage-blueへのnavigation設定

page-blueつくる

最後の画面
page-pinkとトップへ戻るボタンをもつ

• これまでと同じようにPageノードつくりボタン2つおく
• Page Navigation Backノードを追加し、ボタンと接続する。Backは前の画面へ戻るノード。
  • Tap
  • Back
• もうひとつのボタンにはトップへ遷移するPage Navigation 追加する

デモ

補足

• 遷移時のアニメーションはPageのプロパティのTransitionから設定可能
• トップへの遷移等遷移の履歴を削除するときはPage Navigation のプロパティReset History でチェックできる