今回は、番外編として、一つのスクリーンで複数の画面を作るということについて復習してみたい。
「新ことわざ遊び」では、メイン画面に、データ追加画面、データ編集画面（更新および削除）の３つのスクリーンで構成し作成した。複数スクリーン間での関数、変数の使い回しができず、かなり重複したブロック・コードとなった。
そこで、スクリーン一つで作り直してみることとした。
レイアウト用のcomponentであるVerticalArrangementを縦に３つ配置。
VerticalArrangement（垂直配列）とは、MIT App Inventor2（日本語版）によれば、
***********************************************************************
|
垂直配列
|
|
上下に表示されるコンポーネントを配置する書式設定要素です。 (最初の子コンポーネントは一番上に保存され、2 番目の子コンポーネントはその下に保存されます。) コンポーネントを並べて表示したい場合は、代わりに |
***********************************************************************
要するに、コンポーネントを縦方向に配置する場合に使うのがVerticalArrangement（垂直配列）で、横方向に配置する場合に使うのがHorizontalArrangement（横配列）。
各VerticalArrangementの高さを「Fill parent」に設定。「Fill parent」は、使うことができるスペースいっぱいに高さを設定することになる。
このように設定すると、以下左図のように、３つのVerticalArrangementがスクリーンの高さを1/3ずつ占拠する結果となる。
このようにスクリーンを３分割しているのは、各VerticalArrangementのVisible属性をtrue（上記ではチェックが入っている状態）になっていることによる。
ここで、Layout Componentについて復習してみると。。。
Layout Component の VerticalArrangement と HorizontalArrangement にはスクロールタイプのものもある。スクリーン・キャプチャーでみてみると次の通り。上から、VerticalArangement、VerticalScrollArrangement、HorizontalArrangement、HorizontalScrollArrangementとなる。もちろん、これらlayout componentの中にlayout componentを配置し、さらに複雑なレイアウトを設定することもできる。
本題に戻り、今回の「ことわざ遊び」の画面に合わせると下の左図通りとなる。
そして、VerticakArrangement2 (Add Screen)およびVerticalArrangement3 (Edit Screen) のVisible属性をfalseに設定（非表示）すると右図の通りとなり、メインスクリーンのみの画面となる。
後は簡単。
「ADD」ボタンをタップしたら、VerticalArrangement1 (Main Screen)を非表示 (visible = false)として、VerticalArrangement2 ( Add Screen) を表示 (visible = true) とすれば、以下の図のように、あたかも画面展開をしているように見える。これは、今まで「お天気アプリ」、「MovieDB」など色々なアプリで使ってきたやり方で特に目新しいものではないが。
この方法の利点は、スクリーンが一つなので関数、変数の使い回しができること。例えば、Public APIを利用している場合など、データを取得する関数は一つ作っておけば何度でも使い回しができる。
************************************************************
次回 新ことわざ遊び -番外編 2- では、この方法で、実際に「ことわざアプリ（英語版）」を作ってみる予定。
（実際には、ランディングページがあるので２つのスクリーンとなる予定）
************************************************************
＜余談＞
以前にも紹介したが、MIT App Inventor2は簡単に言語の切り替えができますよ！
ユーザーインターフェイスのメニューを英語と日本語で見たら以下の通り。
英語そのままのものもあるし、全体的に慣れのせいか英語の方がしっくりくる。
