共有レイアウト設定

共有レイアウト設定を使用して、すべての画面サイズでコンポーネントとグループが同じように動作するようにします。

スキルレベル: 中級

開始前に

• 定義と用語を理解していることを確認してください。

• 以前のガイドを読んでいることを確認してください。

動画

手順

1. 共有レイアウト設定にアクセスするには、コンポーネントをクリックしてからレイアウトタブをクリックします。

2. レイアウトタブには、いくつかのオプションがある Shared Layout Settings ウィンドウが表示されます。

これらのオプションは、選択がグループか個々のコンポーネントかによってわずかに変化する場合があります。ここには次の2つのメイン設定があります。

• Scaling: 画面サイズが大きくなったり小さくなったりすると、グループまたはコンポーネントのサイズが変更されます。

• Anchoring: 画面の特定の部分にグループまたはコンポーネントが「引っ掛かる」方法を制御します。

• Positioning（表示されない）: 画面上のグループやコンポーネントの位置は、画面サイズ全体で共有されます。ある画面サイズでグループやコンポーネントを移動すると、他のすべての画面サイズでもその位置が変更されます。

これについて詳しく説明します。

3. 異なる状況でどのオプションが表示されるかをよりよく説明するために、小さな意思決定ツリーを見てみましょう。

注意: 長方形は、内部のすべてのコンポーネントに対して自動グループとして機能しますが、長方形内のコンポーネントは「グループと共にスケーリング」オプションを継承しません。詳細については、グループ化と長方形の記事を参照してください。

4. それぞれのオプションの動作を見て、定義してみましょう。

スケーリングオプション

スケーリングとは、画面サイズが幅で大きくなったり小さくなったりするときに、グループやコンポーネントのサイズがどのように変化するかを指します。

オプション	説明
画面サイズに合わせてスケーリング	画面サイズに基づいてグループやコンポーネントを大きくしたり小さくしたりします。
グループと共にスケーリング	親グループのスケーリング設定に合わせてコンポーネントを拡大縮小させます。親グループが「固定されたまま」に設定されていても、このオプションは継承されます。
固定されたまま	画面サイズに関係なく、グループやコンポーネントのサイズを変更しません。

アンカリング

アンカリングとは、画面サイズが大きくなったり小さくなったりするときのグループやコンポーネントの位置を指します。

オプション	説明	例
左にアンカーを設定（固定）	スケーリング時に要素と画面左側との距離を固定します。"固定"が選択されている場合にのみ利用可能です。
右にアンカーを設定（固定）	スケーリング時に要素と画面右側との距離を固定します。"固定"が選択されている場合にのみ利用可能です。
中央にアンカーを設定（固定）	コンポーネントを画面の中央にアンカーしますが、画面サイズが拡大または縮小してもコンポーネントはリサイズされません。
中央にアンカーを設定（画面と共にスケーリング）	コンポーネントと画面の両側との距離をスケーリングします。
左右にアンカーを設定（画面と共にスケーリング）	スケーリング時に画面の左右両側との距離を固定します。"画面と共にスケーリング"または"グループと共にスケーリング"が選択されている場合にのみ利用可能です。

5. 共有画面設定の上部にあるトグルは、選択したグループまたはコンポーネントの設定を「ブレイクアウト」し、それらが同じ設定を共有しないようにします。

オフにすると、下に新しいメニューが表示され、共有画面設定とは独立してスケーリング、アンカリング、および位置を変更できます。

次のガイドでは、これらのカスタム画面設定について詳しく学びます。

もっと詳しく知る

• 特定の画面サイズでコンポーネントまたはグループのレスポンシブ表示をオフにすると、その画面サイズの共有画面設定も無効になります。
• 新しいアプリを作成する際には、レスポンシブアプリのテンプレートをチェックして、最適なレイアウトの作成方法を学ぶことができます！

ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでもコミュニティフォーラムで質問するか、専門家を雇うことができます！投稿にこの記事へのリンクを貼り付けることも忘れずに！

チュートリアルやヘルプドキュメントのリクエストはありますか？お知らせください！