■StackLayoutを使って2つのビューを用意する
では、2つのビューを用意し、「リストをクリックしたらもう1つのビューに移動し、クリックしたデータを表示する」といった、2つのビューを連携した処理を作成してみることにしましょう。
まずは、2つのビューをどういう形で用意し、組み込むかです。これにはいろいろな方法がありますが、「StackLayout」という部品を使うのがよいでしょう。StackLayoutはコンテナ(部品を中に組み込むことの出来る部品)です。コンテナはいくつもの部品を自身の中に配置することができます。
StackLayoutでは、複数のビューを積み重ねるようにして管理し、一番手前にあるものだけが画面に表示される、という形で部品を表示します。必要に応じて別のビューを一番手前に移動すれば、ビューの表示を切り替えることができるというわけです。
では、ライブラリパレットの「部品」から、StackLayoutを探してアプリの画面に配置しましょう。idは、"stackLayout"としておいてください。StackLayoutは、デフォルトでは2つのサブビュー(自身に組み込まれたビュー)を持っています。これは、属性パレットの「サブビュー」という項目で追加したり削除したりすることができます。では、StackLayoutの2つのビューに、それぞれ以下のように部品を用意しましょう。
・1つ目のビュー(view1)
テキスト――id = "text1"としておきます。
リスト――先ほど作成したリストをそのままここに配置しましょう。新たに作り直す人は、リストを組み込んだ後、データソースからitemsのnameをラベルのtext属性に接続しておくのを忘れないでください。id = " list"としておきます。
・2つ目のビュー(view2)
テキスト――3つのテキストを用意します。それぞれid = "text2", "subtitle", "contents"としておきます。これらは、データのname、subtitle、contentをそれぞれ表示するためのものです。
プッシュボタン――前のビューに戻るためのものです。表示場所や表示テキストなどは適当に設定しておきましょう。
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
記事のリストに戻る