MenuToggle Menu

オートレイアウト プロパティ

オートレイアウトは、レイアウト構造の柔軟なカスタマイズオプションを提供し、機能性と美観の両方を確保します。これらのプロパティには、リサイズ、方向、レイアウトの整列、および高度な設定が含まれます。

リサイズプロパティ

リサイズプロパティは、コンテンツやレイアウトの変更に応じて、子レイヤーや親コンテナがどのように調整されるかを制御します。これらの設定は、右側パネルのドロップダウンメニューを使用して、幅と高さを個別に適用できます。リサイズオプションにカーソルを合わせると、キャンバス上でその効果がハイライトされます。

固定 (Fixed)

オブジェクトのサイズを一定に保ち、コンテンツの変更の影響を受けません。

合わせる (Hug)

パディングやギャップサイズを考慮しながら、子要素に合わせて親コンテナのサイズを調整します。

フィル (Fill)

子要素を親コンテナのサイズに合わせて拡張します。

Resizing Properties

固定幅または高さ (Fixed Width or Height)

幅または高さに固定 (Fixed)オプションを設定すると、子レイヤーがリサイズされても親フレームは絶対的なサイズを維持します。

[object Object]
Fixed Width or Height

コンテンツに合わせる (Hug Contents)

親フレームのオートレイアウト (Auto Layout, AL)がコンテンツに合わせる (Hug)に設定されている場合、親フレームは子レイヤーのサイズにぴったり合うように動的に調整されます。

[object Object]
Hug Contents

コンテナに合わせる (Fill Container)

子要素がコンテナに合わせる (FILL)に設定されている場合、親フレームのサイズに応じて子要素のサイズが調整され、利用可能なスペースを埋めるように配置されます。

[object Object]
Fill Container

方向プロパティ (Direction Properties)

方向プロパティは、オートレイアウトコンテナ内で子オブジェクトがどのように配置されるかを定義します。これにより、さまざまなデザインシナリオに柔軟に対応したレイアウト構造を作成できます。

レイアウトプロパティ

レイアウトプロパティは、オートレイアウトコンテナ内の子レイヤーの整列 (Alignment)、パディング (Padding)、および間隔 (Gap)を細かく制御するための設定を提供します。これらの設定により、洗練された一貫性のあるデザインを実現できます。

整列 (Alignment)

子オブジェクトがコンテナ内でどのように配置されるかを決定します（例: 左上、中央、右下など）。

パディング (Padding)

コンテナの端と子オブジェクトの間のスペースを定義します。

間隔 (Gap)

子オブジェクト間の間隔を設定します。固定値または動的値として調整可能です。

Layout Properties

オートレイアウトと制約

オートレイアウトが適用されていないコンテナがオートレイアウトが適用された子コンテナをラップしている場合、垂直方向または水平方向の制約に応じて特定の動作が発生します。

垂直方向の制約

オートレイアウトコンテナに上部＋下部 (T+B)またはスケールが割り当てられている場合、オートレイアウトコンテナの高さは固定 (Fixed) に設定する必要があります。オートレイアウトコンテナを再びHugに変更すると、垂直方向の制約は中央 (Center)にリセットされます。

水平方向の制約

オートレイアウトコンテナに左＋右 (L+R)またはスケールが割り当てられている場合、オートレイアウトコンテナの幅は固定 (Fixed)に設定されます。オートレイアウトコンテナを再びHugに変更すると、水平方向の制約は**中央 (Center)**にリセットされます。

これらの調整により、オートレイアウトと非オートレイアウトコンテナ間の論理的な相互作用が確保され、予測可能なワークフローを実現します。

詳細設定

オートレイアウトには、レイアウトの柔軟性とカスタマイズ性を向上させるための追加の詳細設定も提供されています。これらのオプションを使用して、デザイン内の特定の要素や動作を調整できます。

オートレイアウトを無視 (Ignore Auto Layout)

オートレイアウトを無視する機能を使用すると、選択したオブジェクトに対してオートレイアウトのルールを無効にし、コンテナ全体の構造に影響を与えずに手動で調整することができます。「オートレイアウトを無視する」に設定されたオブジェクトは、独立して制約を設定することが可能で、コンテナ内の他の要素のオートレイアウトプロパティを維持しながらユニークなレイアウトシナリオに対応できます。

[object Object]

レイヤー順序の管理

スタッキング順序の管理は、以下の複数の方法で簡単に行えます：

  • レイヤーパネル: パネル内でレイヤーを直接ドラッグして順序を変更。
  • キーボードショートカット: 矢印キーを使ってスタッキング順序を正確に調整。
  • マウス操作: キャンバス上でオブジェクトをクリックしてドラッグし、インタラクティブに位置を変更。

インスタンスオーバーライド

オートレイアウト対応のコンポーネントインスタンスでは、一部のプロパティを選択的に調整可能で、マスターコンポーネントを変更することなく柔軟性を提供します。

  • リサイズ: リサイズ値の変更は既存のオプションに限定され、新しい固定値は追加できません。
  • 配置、ギャップ、およびパディング: これらのプロパティはインスタンス内でカスタマイズ可能です。
  • 方向: インスタンス内で方向の変更はサポートされていません。
Back To Top