スクリーン グループは、複数の画面で構成されるレイアウト コンテナーで、ページをスクロールして表示するコンテンツやウィジェットを整理できます。 各画面はメイン ステージがあり、スクリーン グループのテンプレートに応じてスクロール パネルを設定することもできます。 スクリーン グループにスクロールすると、画面全体の高さで表示されます。 スクリーン グループにスクロール パネルがある場合、エンド ユーザーはパネル内のコンテンツをスクロールしても、メイン ステージはそのまま表示され、最後のパネルまでスクロールされたときにのみ切り替わります。 スクリーン グループにパネルが存在しない場合、メイン ステージが 1 画面分の高さまでスクロールされるまで表示され続けます。
例
スクリーン グループを使用して、次のようなアプリの設計要件をサポートします。
- 複数の画像があり、各画像の説明に長い段落が必要な場合、画像の位置を同じに保ったままコンテンツをスクロールする必要があるとします。 このような場合は、画面ページにスクロール パネルを含むスクリーン グループを追加し、画面のメイン ステージに画像を配置して、画面のスクロール パネルに対応する説明を配置することができます。
- スクロール ページのデフォルトのプッシュ効果ではなく、ページをめくる効果でコンテンツを表示する必要があるとします。 このような場合は、スクリーン グループ内の各画面間で異なるトランジション効果を設定したテンプレートを使用することができます。
使用上の注意
スクロール ページにスクリーン グループを追加するには、キャンバスの [スクリーン グループの挿入] ボタンをクリックし、スクリーン グループ テンプレートを選択します。 スクリーン グループがページに追加されると、そのスクリーン グループのキャンバスに個別のスクロール バーが表示されます。
スクリーン グループにスクロール パネルがある場合、パネルの高さはコンテンツに基づいて自動的に増加します。 パネルの中にウィジェットをドラッグするか、追加ボタンをクリックして、パネルにウィジェットを挿入できます。
現在、スクリーン グループを追加できるのは、大画面サイズのスクリーン グループのみで、中画面または小画面サイズのスクリーン グループは追加できません。 アプリを大画面サイズに構成してから、他の 2 つの画面サイズに調整します。
設定
スクリーン グループには次のような構成の設定があります。
- [スクリーン] - 複数の画面を一度に 1 つずつ追加するか、既存の画面と同じ背景またはレイアウトになるようにしたい場合は既存の画面を複製します。
- [名前の変更]、[複製]、および [削除] オプションを使用してグループ内の画面を管理します。 画面をドラッグして、スクリーン グループ内のスクロール順を変更します。 画面をクリックして、各画面のメイン ステージとスクロール パネルの設定にアクセスして変更します (メイン ステージが存在する場合)。
- [メイン ステージ] - 塗りつぶし色または画像を選択して、メイン ステージの背景を設定します。
- スクロール パネル
- [モード] - [ドッキング] および [フローティング] からモードを選択してレイアウトを変更します。
- [サイズ] - パネルの幅を定義します。 キャンバスでパネルの端をドラッグしてサイズを変更することもできます。
- [位置] - ドッキング パネルを左または右に、フローティング パネルを左、右、または中央に配置します。 フローティング パネルの場合、水平方向のオフセットをピクセル単位で設定し、その配置に基づいてパネルの位置を調整します。
- [間隔] - ネストされたウィジェット間のスペースを指定します (ピクセル単位)。
- [埋め込み] - パネルの内側エッジの周囲に埋め込みスペースを追加します。
- [背景] - 塗りつぶし色または画像を選択して、スクロール パネルの背景を変更します。
ヒント:
スクリーン グループの内容を編集するとき、フローティング パネルに [デザイン ビューで非表示] ボタン
が表示されます。このボタンをクリックすると、パネルを一時的に最小化して、背後のメイン ステージを表示することができます。 メイン ステージの右下隅にある [デザイン ビューで表示] ボタン 
をクリックすると、パネルが再び表示されます。 パネルを非表示にしても、ライブ ビューまたはプレビューでのスクリーン グループの外観は影響を受けません。
テンプレート
ウィジェットのレイアウトに加えて、スクリーン グループ テンプレートには、トランジション効果、パネル間の間隔、次の画面をトリガーするタイミングなどの他のプリセット設定があります。 ギャラリーでスクリーン グループ テンプレートを選択する際、テンプレート カードにポインターを合わせると、アニメーションのプレビューが表示されます。
構成可能なスクリーン グループには、次の事前定義済みテンプレートが用意されています。
- [カスケード] は、フローティング パネルを含み、複数画面で構成されるテンプレートです。 パネルがプッシュされ、メイン ステージには次のパネルがフェード インします。 下から次のパネルが表示されると、すぐに画面が切り替わります。
- [インデックス] はドッキング パネルを含むテンプレートで、[カスケード] と同様のトランジション効果があります。 次のパネルが低い位置までスクロールされると、画面が切り替わります。
- [フライヤー] は、マップおよびブックマーク専用の 1 画面で構成されるテンプレートです。 パネルがスクロールすると、メイン ステージ上のマップがブックマークの位置に自動的に移動します (ブックマーク ウィジェットの設定 [読み込み時にアクティブ] を使用します)。
- [ストリーム] は、フローティング パネルを含み、複数画面で構成されるテンプレートです。 選択した画面のパネルと選択されていない画面のパネルの間には視差効果があります。 次のパネルが高い位置までスクロールされると、次のパネルが画面にフェード インします。
- [ガイド] は、次のパネルが低い位置にスクロールされると画面が切り替わる、視差効果を含むテンプレートです。
- [ショーケース] は、中央にフローティング パネルを含み、複数画面で構成されるテンプレートです。 現在のパネルのスクロールが完了すると、メイン ステージはカバー トランジション効果で次のパネルに切り替わります。
- [スライドショー] は、ドッキング パネルを含み、複数画面で構成されるテンプレートです。 現在のパネルのスクロールが完了すると、メイン ステージはプッシュ トランジション効果で次のパネルに切り替わります。
- [ポートフォリオ] はメイン ステージのみの複数画面から構成されるテンプレートで、カバー トランジション効果があります。