スクロールコンテンツ
このガイドで学べること
このガイドでは、コンテナより大きいコンテンツをスクロールを通じて表示する基本を学びます。主にGroupノードのスクロールプロパティを使用し、スクロールに関連するレイアウトエンジンの動作について詳しく説明します。また、スクロール可能なコンテンツを簡単に構築できるPage Routerの組み込みスクロール機能についても見ていきます。
概要
このガイドでは、以下のトピックを取り上げます。
- Groupノードのサイズの取得方法
- Groupノード内のスクロール
- Page Routerノード内のスクロール
- スクロール中のGroupでの
Stickyレイアウト位置
このガイドでは、リストを作成するためにRepeaterノードを使用し、Page Routerを使用したナビゲ ーションにも触れます。そのため、このガイドを行う前または後にそれらのガイドを確認することをお勧めします。
また、レイアウトの基本についても理解しておくことをお勧めします。まだの場合は、このガイドを始める前にチェックしてください。
Groupノード内のスクロール
Groupノードはレイアウトを作成するための基本的なノードです。では、Groupノードの子が利用可能なスペースよりも多くのスペースを占める場合はどうなるでしょうか？ それは、そのサイズの設定方法に依存します。
Groupノードのサイズ
大まかには、水平および垂直方向に2つのオプションがあります。
- サイズが明示的に設定されています。そのサイズは、利用可能なスペースの%、ピクセル、またはvwで指定できます。
- サイズはその子の合計サイズによって決定されます。
したがって、1)の場合、子がGroup内で与えられたスペースよりも多くのスペースを占める場合、何が起こるかについてのみ心配する必要があります。"Hello World"テンプレートを使用して新しいプロジェクトを開始し、以下のノードに置き換えてみましょう。
Static Arrayノードにいくつかのデータを埋め込んでください。JSON形式に設定されていることを確認してください。
次に、以下のデータをStatic Arrayにコピー＆ペーストしてください。
[
{ "label": "アイテム 1" },
{ "label": "アイテム 2" },
{ "label": "アイテム 3" },
{ "label": "アイテム 4" },
{ "label": "アイテム 5" },
{ "label": "アイテム 6" },
{ "label": "アイテム 7" },
{ "label": "アイテム 8" },
{ "label": "アイテム 9" },
{ "label": "アイテム 10" },
{ "label": "アイテム 11" },
{ "label": "アイテム 12" },
{ "label": "アイテム 13" },
{ "label": "アイテム 14" },
{ "label": "アイテム 15" },
{ "label": "アイテム 16" },
{ "label": "アイテム 17" },
{ "label": "アイテム 18" },
{ "label": "アイテム 19" },
{ "label": "アイテム 20" }
]
次に、「List Item」という名前の新しい視覚的コンポーネントを作成します。
そして、以下のノード構造を作成します。
Objectノードにlabelというプロパティがあり、それがTextノードに接続されていることを確認してください。また、Groupノードのサイズを100%の幅と45pxの高さに設定し、下に5pxのマージンを付けます。また、きちんと見えるようにアウトラインを付けてください。
Textノードを垂直方向に中央揃えにします。
最後に、「App」コンポーネントに戻り、新しく作成したリストアイテムをテンプレートとして選択します。
これで、以下のようなものができあがります。（直接インポートするには、下の「インポート」をクリックしてください）。
リストが画面全体を占めており、非常に長い画面を持っていない限り、アイテムは画面外に流れ出します。コンテンツをスクロールすることはできません。
また、メインアプリのGroupノードの垂直サイズを50%に変更してみてください。
リストが画面の半分だけを覆うと思われるかもしれませんが、変化は見られません。これは、サイズが明示的に設定されたGroupのデフォルトの振る舞いは、子のサイズがGroupのサイズよりも大きい場合、子に合わせてサイズが拡大する ためです。
コンテンツをクリップする代わりに成長するというこの振る舞いを変更し、Groupにコンテンツをクリップするように指示することができます。GroupのClip Contentプロパティをチェックしてください。
Groupをスクロールさせる
別の方法として、Groupにスクロールを許可するように指示することができます。Clip Contentのチェックを外し、代わりにEnable Scrollをチェックしてください。これで、スクロール可能なリストができます。
一般的には、非常にカスタムなスクロールインタラクションを行っていない限り、Use native scrollをチェックしたままにしておくべきです。このガイドではそれについては取り上げません。
スクロールコンテンツの構造化
Groupノードのサイズを100%に戻してください。
次に、タイトルとフッターを追加しましょう。これらをGroupノードに追加すると、リストとともにスクロールされてしまいます。したがって、少し構造を変更する必要があります。
新しいGroupノードを作成します。既存のGroupノードを新しいGroupノードの子にします。
これで、ヘッダーとフッターを最上位のGroupに追加しても、スクロールによって影響を受けることはありません。 ヘッダーとフッターは、たとえばコンテンツの高さと100%の幅を持つGroupノードであり、その中にフォントサイズが大きいTextを追加することができます。
これで、ヘッダーとフッターがスペースを取りながら、スクロールコンテンツが残りのスペースを取り、収まらない場合にコンテンツをスクロールさせることができます。
Page Routers内のスクロール
Page Routerは、Noodlでナビゲーションを実装するための主要なノードの一つです。簡単に言うと、Page Routerはナビゲートするページを含んでいます。その意味で、Page RouterはGroupノードとかなり似ています。そのため、Page Routerにも、Clip Behaviorを選択し、Scrollingを設定することで、コン
テンツをスクロール可能にするオプションがあります。
試してみましょう！
新しい視覚的コンポーネントを作成します。「App 2」と呼びます。"Make Home"を選択して、新しいホームコンポーネントにします（つまり、ビューアーに表示されます）。
ルートGroupの最初の子としてPage Routerを追加します。
Page Routerをクリックし、Add new PageをクリックしてPage 1という新しいPageを追加します。
これで、以前の構造を簡略化できます。Page RouterがGroupの役割を果たすため、Repeater（およびアイテムを提供するStatic Array）を新しく作成したPageコンポーネントの直下に移動できます。
Page RouterのClip BehaviorをScrollingに設定すると、Page内のスクロール可能なコンテンツができあがります。試してみてください。
Sticky Layout Positionオプション
ヘッダーやフッターなどの要素を、スクロールが有効になっていてもGroupノードからスクロールされないようにするもう一つの方法があります。これを新しいPageで試してみましょう。新しい構造を作成する代わりに、ヘッダーとフッターをPageノードの直接の子として追加できます。そのため、それらをコピーしてRepeaterの前後に貼り付けます。
また、ヘッダーが上に、フッターが下に揃えられていることを確認してください。
今、スクロールしてみると、画面からスクロールされてしまいます。しかし、ヘッダーとフッターのGroupのPosition設定をStickyに変更すると、画面上に留まることがわかります。
ただし、リストがヘッダーとフッターの背後でスクロールするのが見えるかもしれません。これはおそらく望んでいる結果ではありません。
これを修正するには、背景色を透明でない白に設定します。また、Noodlはデフォルトでツリー内のすべてをその順序でレンダリングするため（ツリーで早いノードが後のノードに重なる場合、後のノードが上 にレンダリングされます）、ツリーで下にあるRepeaterより上に表示されるようにヘッダーのzIndexも1に変更する必要があります。
これで、スティッキーヘッダーとフッター
を持つ動作するスクロールリストができました。
全プロジェクトを試してみたい場合は、以下のプロジェクトをインポートしてください。
