Layouts

概要

Layouts は、Shapes を互いに「突き合わせて」スタックする方法を提供します。つまり、スタック内のある Shape のバウンディングボックスが変更されると、他の Shape はその Shape に必要な新しいスペースを確保するために移動します。

これは、サイズ変更に対応する必要がある動的レイアウトを作成するのに役立つだけでなく、楽しい芸術的機能でもあります。

レイアウトの作成

レイアウトは、以下のレイアウトグループタイプのいずれかに Shapes を追加するだけで作成できます：

• Layout Group - Shapes を水平方向または垂直方向に配置し、複数の行/列に折り返すオプションを提供します。
• Grid Layout Group - Grid Layout Rows を列に配置します。
• Grid Layout Row - Grid Layout Group で使用するために Shapes を行に配置します。

1. 3 つの Shapes を作成します。
2. 3 つの Shapes をすべて選択し、Viewport で右クリックして Layout > Embed selected in Horizontal Layout を選択します。

シンプルな水平レイアウトを作成するには：

1. 2 つの Shapes を作成します。
2. Layout Group を作成します。
3. Scene Window で両方の Shapes を選択します。
4. 両方の Shapes をクリックして Layout Group にドラッグします。
5. マウスを放します。

両方の Shapes が水平レイアウトで並べて配置されます。いずれかの Shape の Width（Size W）を変更すると、レイアウトがそれに応じて更新されます。

レイアウトグループは他のレイヤーと同様に Add Layers ウィンドウから作成できますが、Scene Window または Viewport の右クリックメニューを使用しても作成できます。複数の Shapes を選択して右クリックし、Layout > Embed selected in [Horizontal/Vertical/Grid] Layout を選択するだけです。

レイアウトグループから Shape を削除するには、レイアウトグループからドラッグして外に出すだけです。

階層

レイアウトグループは階層構造で、Shapes はレイヤースタックの上から下に編成されます。Layout Group の直接の子はすべて配置に含まれますが、子より深い Shape（孫など）は無視されます。

レイアウトグループ内にレイアウトグループをネストすることで、より複雑なレイアウトを作成できます。

以下の例では、2 つの水平レイアウトグループが垂直レイアウトグループの子であり、その垂直レイアウトグループ自体が別の水平レイアウトグループの子です。

複数のレイアウトグループが互いにネストされています。

レイアウトグループ内の Shape は、Attribute Editor の Advanced タブで Exclude from Layout をチェックすることでレイアウトから除外できます。Common Attributes を参照してください。

トランスフォーム

Shape がレイアウトグループに追加されると、そのトランスフォーム（位置/回転/スケール）を調整できるため、レイアウトグループ内の Shapes をアニメーション化できます。レイアウトは Shape のバウンディングボックスを読み取り、「トップレベル」のトランスフォームを無視することに注意してください。そのため、Shape が回転しても、Shape のバウンディングボックスが変更されていないため、レイアウト自体は変更されません。

Shape がレイアウトグループに追加されると、その Position は 0,0 にリセットされます。Shapes は 0,0 にある必要はありませんが、Shapes が意図せず移動されるとレイアウトが崩れたように見える可能性があります。

レイアウトグループから Shape を削除しても、そのトランスフォームは維持されます。

バウンディングボックス

Shape のワールド空間バウンディングボックスは、レイアウト内で占めるスペースを計算するために使用されます。トップレベルのトランスフォームが無視されるため、トランスフォームがレイアウトのバウンディングボックス計算に影響を与えるには、Shape が別の Shape の子である必要があります。

以下の例では、黄色の長方形が Group（下）の子であるため、その回転が Group のバウンディングボックスを変更し、それがレイアウトグループ内の他の Shapes のレイアウトに影響を与えます。

長方形がレイアウトグループの子として。

長方形がレイアウトグループ内の Group の子として。

レイアウト自体は子以下の Shapes（孫など）を無視しますが、階層の一部として、それらは親のバウンディングボックス計算に含まれ、レイアウトに影響を与える可能性があります。

Spacers

Spacers はレイアウト内の利用可能なスペースを埋めるために使用でき、スペースを均等に分散したり、セルをレイアウトの左/右/上/下に配置するために使用されます。

以下の例では、Spacer がレイアウト内の利用可能なスペースを埋め、それによって他のセルがそれに応じて配置されることに注目してください。

2 つの Shapes の間に配置された Spacer。

2 つの Shapes の下に配置された Spacer。

レイアウトに Spacer を追加するには、Add Layers ウィンドウから作成し、Layout Group にドラッグするだけです。

Spacers がレイアウト計算に含まれるようにするには、Layout Group の Spacing Mode を Manual Spacers に設定する必要があります。他の Spacing Mode では、‘Fixed Size’ に設定されていない限り無視されます。

配置

セル内での Shape の配置は、Advanced タブの Vertical/Horizontal Layout Alignment オプションで設定できます。Common Attributes（Advanced タブ）を参照してください。

Text Shape の Alignment と Vertical Alignment はこれらの設定によって上書きされることに注意してください。

注意事項

• ベースライン配置の Text Shape は、レイアウトの下部に配置されます。つまり、ディセンダーは「セル」の外側に出ます。
• Layout Group は Groups の機能を共有するため、子は追加された Transforms、Filters、Deformers を継承します。
• Add Layers ウィンドウまたは右クリックメニューからレイアウトグループタイプを作成すると、Scene Window でロックされます。これは、Viewport で他の Shapes と対話する際に、グループ内の Shapes に意図しないトランスフォームが追加されるのを防ぐためです。