リストとデータソース (5/8)

では、２つのビューを用意し、「リストをクリックしたらもう１つのビューに移動し、クリックしたデータを表示する」といった、２つのビューを連携した処理を作成してみることにしましょう。

まずは、２つのビューをどういう形で用意し、組み込むかです。これにはいろいろな方法がありますが、「StackLayout」という部品を使うのがよいでしょう。StackLayoutはコンテナ（部品を中に組み込むことの出来る部品）です。コンテナはいくつもの部品を自身の中に配置することができます。

StackLayoutでは、複数のビューを積み重ねるようにして管理し、一番手前にあるものだけが画面に表示される、という形で部品を表示します。必要に応じて別のビューを一番手前に移動すれば、ビューの表示を切り替えることができるというわけです。

では、ライブラリパレットの「部品」から、StackLayoutを探してアプリの画面に配置しましょう。idは、"stackLayout"としておいてください。StackLayoutは、デフォルトでは２つのサブビュー（自身に組み込まれたビュー）を持っています。これは、属性パレットの「サブビュー」という項目で追加したり削除したりすることができます。では、StackLayoutの２つのビューに、それぞれ以下のように部品を用意しましょう。

・１つ目のビュー（view1）
テキスト――id = "text1"としておきます。
リスト――先ほど作成したリストをそのままここに配置しましょう。新たに作り直す人は、リストを組み込んだ後、データソースからitemsのnameをラベルのtext属性に接続しておくのを忘れないでください。id = " list"としておきます。

・２つ目のビュー（view2）
テキスト――３つのテキストを用意します。それぞれid = "text2", "subtitle", "contents"としておきます。これらは、データのname、subtitle、contentをそれぞれ表示するためのものです。
プッシュボタン――前のビューに戻るためのものです。表示場所や表示テキストなどは適当に設定しておきましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。