APL Container



APL Container

Containerコンポーネントは、複数の子項目を表示します。Containerは、レイアウト言語としてFlexbox/Yogaを使用します。

プロパティ

Containerコンポーネントには、次のプロパティがあります。

プロパティ 型 デフォルト スタイル設定 動的 説明

alignItems

次のいずれか：stretch、center、start、end、baseline

stretch

◯

◯

交差軸における子の配置です。

direction

次のいずれか：column、row、columnReverse、rowReverse

column

◯

◯

子コンポーネントを表示する方向です。

justifyContent

次のいずれか：start、end、center、spaceBetween、spaceAround

start

◯

◯

主軸上にスペースが余っているときの、そのスペースの配置方法です。デフォルトはstartです。

numbered

ブール値

false

✕

✕

trueを指定した場合、子に番号が順番に割り当てられます。デフォルトはfalseです。

wrap

次のいずれか：noWrap、wrap、wrapReverse

noWrap

◯

◯

子コンポーネントを複数の行にラップする方法を指定します。

標準のFlexboxコンテナとは異なり、APLContainerコンポーネントはスクロールしません。スクロールコンポーネントを作成するには、ScrollView内にContainerを配置します。

Containerがソースまたはイベントのターゲットである場合、event.sourceまたはevent.targetに以下の値が報告されます。

{
  // Container固有の値 
  "type": "Container",

  // 一般的なコンポーネントの値  
  "bind": Map,         // コンポーネントのデータバインディングコンテキストへのアクセス    
  "checked": Boolean,  // チェック済みの状態 
  "disabled": Boolean, // 無効化の状態 
  "focused": Boolean,  // フォーカス状態 
  "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）        
  "id": ID,            // コンポーネントのID   
  "opacity": Number,   // コンポーネントの不透明度[0～1]    
  "pressed": Boolean,  // 押された状態 
  "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
  "width": Number      // コンポーネントのdp単位の幅（パディングを含む）        
}

layoutDirectionコンポーネントプロパティ

コンポーネントのlayoutDirectionプロパティは、Containerの子コンポーネントをレイアウトする方向を決定します。APL Containerは、Yoga layoutDirectionプロパティと同じルールに従います。

コンポーネントのlayoutDirectionプロパティは、Containerの子の位置を制御する次のプロパティのオーバーライド動作を決定します。

  • leftとright
  • startとend

alignItems

子をコンテナーの交差軸方向に配置する方法に関するFlexboxの仕様です。デフォルトはstretchです。

direction

Containerでの配置方向です。デフォルトはcolumnです。directionプロパティは、次の値を取ることができます。

型 説明

column

子コンポーネントを垂直方向にレイアウトします（デフォルト）。

row

子コンポーネントを水平方向にレイアウトします。

columnReverse

子コンポーネントを垂直方向にレイアウトしますが、反対側から開始します。

rowReverse

子コンポーネントを水平方向にレイアウトしますが、反対側から開始します。

layoutDirectionプロパティは、directionがrowの場合に項目の水平方向を決定します。たとえば、layoutDirectionがRTLで、directionがrowの場合、子項目は右から開始され、左へと表示されます。

justifyContent

主軸上にスペースが余っているときの、そのスペースの配置方法に関するFlexboxの仕様です。Containerが子Containerよりサイズが大きいときに適用されます。デフォルトはstartです。

numbered

trueに設定した場合、Container内の各項目にデータバインディングの順序数が設定されます。この順序数は「1」から始まり、子のnumberingプロパティが「skip」または「reset」に設定されている場合を除き、1ずつ増加します。firstItemとlastItemプロパティに順序数は付けられないことに注意してください。デフォルトはfalseです。

wrap

子のFlexboxラッピングの動作。wrapプロパティは、次の値を取ります。

型 説明

noWrap

Containerは、主軸上の1行に子をレイアウトします。Containerはオーバーフローする可能性があります。（デフォルト）

wrap

子コンポーネントは複数の行に分割できます。

wrapReverse

子コンポーネントは複数の行に分割できますが、反対側から開始します。

複数子プロパティ

Containerは複数子コンポーネントです。Containerは、すべての複数子プロパティを継承します。

Containerの子コンポーネントのプロパティ

コンテナの子コンポーネントには、親Container内での位置を制御するための追加のプロパティがあります。

プロパティ 型 デフォルト スタイル設定 動的 説明

alignSelf

auto、start、end、center、baseline、stretch

auto

◯

◯

交差軸のレイアウト位置です。デフォルトはautoです。

bottom

ディメンション

auto

◯

◯

下端の位置オフセットを指定します。

end

ディメンション

none

◯

◯

終端の位置オフセットです。終端は、コンポーネントのlayoutDirectionに応じて、コンポーネントの左側または右側になります。

grow

数値

0

◯

◯

正の数にすると、Containerに余分なスペースがある場合、このコンポーネントを縦横比を保って拡大します。デフォルトは0です。

left

ディメンション

auto

◯

◯

左端の位置オフセットを指定します。

numbering

normal、skip、reset

normal

✕

✕

次の子の順序数の付け方を指定します。デフォルトはnormalです。

position

relative、absolute、sticky

relative

◯

◯

子コンポーネントの位置を調整します。absoluteの場合、このコンポーネントを通常のレイアウト順序から取り出し、親Containerを基準に配置します。デフォルトは「relative」です。

right

ディメンション

auto

◯

◯

右端の位置オフセットを指定します。

shrink

数値

0

◯

◯

正の数にすると、Containerに十分なスペースがない場合、このコンポーネントを縦横比を保って縮小します。デフォルトは0です。

spacing

絶対ディメンション

0

◯

◯

レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。デフォルトは0です。

start

ディメンション

none

◯

◯

開始端の位置オフセット。開始端は、コンポーネントのlayoutDirectionに応じて、コンポーネントの左側または右側になります。

top

ディメンション

auto

◯

◯

上端の位置オフセットを指定します。

alignSelf

子のalignItemsプロパティを上書きします。

position, bottom, left, right, top

positionプロパティは、bottom、left、right、topの各プロパティが子コンポーネントの位置を「標準」位置から調整する方法を決定します。

startプロパティとendプロパティは、「Container」のlayoutDirectionプロパティに基づいてleftとrightもオーバーライドします。

絶対配置

positionがabsoluteの場合、子コンポーネントはContainerの標準レイアウト順から外されて、親に対して絶対的な位置に配置されます。top、bottom、left、rightのプロパティは親Containerのそれぞれの端を基準とする補正値です。親Containerのパディングは、絶対配置の子コンポーネントについては無視されます。

要素の大きさが固定されている絶対配置の要素では、両方が設定されている場合、topプロパティはbottomプロパティをオーバーライドします。leftプロパティとrightプロパティは、親ContainerのlayoutDirectionプロパティによって異なります。

  • 親ContainerのlayoutDirectionが「LTR」に設定されている場合 - leftが設定されている場合、rightプロパティは無視されます。どちらのpositionプロパティも設定されていない場合、要素は親Containerの左上に配置されます。
  • 親ContainerのlayoutDirectionが「RTL」に設定されている場合 - rightが設定されている場合、leftプロパティは無視されます。どちらのpositionプロパティも設定されていない場合、要素は親Containerの右上に配置されます。

次の例は、4つすべてのpositionプロパティを設定するコンポーネントを示しています。

{
    "position": "absolute",
    "width": 100,
    "height": 100,
    "top": 5,
    "bottom": 5,
    "left": 5,
    "right": 5
}

ContainerのlayoutDirectionがLTRの場合、このコンポーネントは、親Containerの左上から5単位の位置に配置されます。topとleftが設定されているため、bottomとrightの値は無視されます。

このContainerのlayoutDirectionがRTLの場合、このコンポーネントは、親Containerの右上から5単位の位置に配置されます。topとrightが設定されているため、bottomとleftの値は無視されます。

相対配置

positionがrelativeの場合、bottom、left、right、topの各プロパティは、Container内のほかのコンポーネントを基準とした、子の「通常の」位置からの寸法オフセットです。topに値がある場合、bottomプロパティは無視されます。leftプロパティとrightプロパティは、親ContainerのlayoutDirectionプロパティによって異なります。

  • 親ContainerのlayoutDirectionが「LTR」に設定されている場合 - leftが設定されている場合、rightプロパティは無視されます。
  • 親ContainerのlayoutDirectionが「RTL」に設定されている場合 - rightが設定されている場合、leftプロパティは無視されます。

次の例は、top、bottom、rightを設定するコンポーネントを示しています。

{
    "position": "relative",
    "top": 5,
    "bottom": 20,
    "right": 5
}

ContainerのlayoutDirectionがLTRの場合、このコンポーネントは、ほかの子コンポーネントを基準にした通常の位置から5単位下、5単位左に配置されます。bottomプロパティとrightプロパティは無視されます。

ContainerのlayoutDirectionがRTLの場合、このコンポーネントは、ほかの子コンポーネントを基準にした通常の位置から5単位下、5単位右に表示されます。bottomプロパティとleftプロパティは無視されます。

追従配置

positionがrelativeの場合、bottom、left、right、topの各プロパティは、最も近いスクロール可能な祖先コンポーネントを基準に計算された寸法オフセットです。この場合、祖先コンポーネントに「追従」してコンポーネントが配置されます。

追従型コンポーネントの場合、topプロパティとbottomプロパティは、最も近い垂直スクロール可能なコンポーネントのそれぞれの端からのインセットを表します。leftプロパティとrightプロパティは、最も近い水平スクロール可能なコンポーネントの端からのインセットを表します。これらのプロパティは、コンポーネントの位置を拘束するために使用される「追従ビュー」の矩形を定義します。

任意の軸の追従ビューの矩形サイズが、その軸の追従型コンポーネントのデフォルト境界のサイズよりも小さい場合、影響を受ける軸の有効な終端のインセットが縮小され（おそらく負になる）、追従ビューの矩形のサイズがその軸のデフォルトの境界のサイズに達します。

次に例を示します。

最も近い垂直スクロール可能な項目の高さが300pxであり、追従型コンポーネントのデフォルトの境界の高さが200pxであると仮定します。topプロパティは20ピクセルです。これは、最も近い祖先の上端インセットが20pxであり、下端インセットが0pxであることを意味します。したがって、追従ビューの矩形の高さは280pxになります。

しかし、最も近い垂直スクロール可能な項目の高さが100pxである場合、有効な下端インセットは-120pxになります。これにより、追従ビューの矩形の高さは200pxになります。

コンポーネントの各辺について、対応するインセットプロパティが自動ではなく、コンポーネントの対応する境界のエッジが追従ビューの矩形の対応するエッジの外側にある場合、コンポーネントは（相対配置のように）視覚的にシフトされる必要があり、その位置コンポーネントがその包含ブロック内に含まれる間は、可能な限り、追従ビューの矩形のエッジの内側にする必要があります。追従型コンポーネントをオフセットすると、その親の境界外に配置される場合、オフセットは減少し、追従型コンポーネントは親の境界内に保持されます。

追従配置された要素のtop値が自動ではなく、bottom値が自動である場合、追従配置により下方向にのみプッシュされます。上方向にオフセットされることはありません。同様に、left、right、またはbottomプロパティが自動ではなく、対応するright、left、またはtopプロパティが自動である場合、追従型コンポーネントは、それぞれ右、左、または上方向にのみプッシュされます。

同じContainer内にある複数の追従配置コンポーネントは、独立してオフセットされるため、重なり合う可能性があります。

topプロパティまたはbottomプロパティの値がパーセンテージの場合、最も近い垂直スクロール可能な祖先のパーセンテージです。rightプロパティまたはleftプロパティの場合は、最も近い水平スクロール可能な祖先のパーセンテージです。

「position: sticky」であるContainerは、追従型ではない兄弟の後に描画されます。

次の例は、垂直スクロール可能なコンポーネントの上端から10単位下にあるコンポーネントを示しています。対応するright、bottom、またはleftプロパティが設定されていないため、ほかのどのエッジにも追従しません。

{
    "position": "sticky",
    "top": 10
}

次の例では、最も近い水平スクロール可能な祖先の左側と右側の両方に追従するコンポーネントを定義します。このコンポーネントは、スクロール可能な祖先の左端に達すると、スクロール可能なコンポーネントの左端から右に10単位の位置に追従します。その結果、コンポーネントの左側10単位がビューから非表示になります。スクロール可能な祖先が左にスクロールされている場合、このコンポーネントは、スクロール可能なコンポーネントの右端から少なくとも20単位の位置に留まります。

{
    "position": "sticky",
    "left": -10,
    "right": 20
}

追従型コンポーネントの親のデフォルトの境界を使用して、追従型コンポーネントのオフセットを制限できます。

下の画像は、スクロール可能なコンポーネント内の2つのコンポーネント（赤）と親（青）を示しています。2つのコンポーネントのpositionはそれぞれstickyとleftに設定され、その値はそれぞれ0pxと20pxに設定されています。

1. 左へスクロールし始める
1.左へスクロールし始める
2. 赤い要素0はビュー内に残る
2.赤い要素0はビュー内に残る
3. 赤い要素0がその直接の親のエッジに達すると、ビューの外に移動し始める
3.赤い要素0がその直接の親のエッジに達すると、ビューの外に移動し始める
4. 青い要素1は、スクロール可能なコンポーネントの左端から20pxのオフセットでビュー内に留まる
4.青い要素1は、スクロール可能なコンポーネントの左端から20pxのオフセットでビュー内に留まる
{
    "type": "APL",
    "version": "1.8",
    "mainTemplate": {
        "item": [
            {
                "type": "ScrollView",
                "width": 500,
                "height": 500,
                "item": {
                    "type": "Container",
                    "height": 1000,
                    "width": 500,
                    "items": [
                        {
                            "type": "Frame",
                            "height": 300,
                            "width": 500,
                            "backgroundColor": "#1a73e8",
                            "items": [
                                {
                                    "type": "Container",
                                    "height": 300,
                                    "width": 500,
                                    "items": [
                                        {
                                            "position": "sticky",
                                            "top": 0,
                                            "type": "Frame",
                                            "height": 100,
                                            "width": 500,
                                            "backgroundColor": "#dc3912",
                                            "items": []
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "Frame",
                            "height": 100,
                            "width": 500,
                            "backgroundColor": "white"
                        },
                        {
                            "type": "Frame",
                            "height": 1000,
                            "width": 500,
                            "backgroundColor": "#1a73e8",
                            "items": [
                                {
                                    "type": "Container",
                                    "height": 300,
                                    "width": 500,
                                    "items": [
                                        {
                                            "position": "sticky",
                                            "top": 20,
                                            "type": "Frame",
                                            "height": 100,
                                            "width": 500,
                                            "backgroundColor": "#dc3912",
                                            "items": []
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            }
        ]
    }
}

start、end

startプロパティとendプロパティを指定すると、コンポーネントの位置を指定するためのleftとrightをオーバーライドされます。オーバーライドはlayoutDirectionプロパティに依存します。

プロパティ 左から右（"LTR"） 右から左（"RTL"）

start

leftをオーバーライド

rightをオーバーライド

end

rightをオーバーライド

leftをオーバーライド

次の例は、絶対配置のコンポーネントを示しています。このContainerのlayoutDirectionがRTLの場合、このコンポーネントは、親Containerの右上から5単位の位置に表示されます。startプロパティ（5）はrightプロパティ（10）をオーバーライドします。

{
    "position": "absolute",
    "width": 100,
    "height": 100,
    "start": 5,
    "left": 10,
    "right": 10,
    "top": 5
}

grow、shrink

Flexboxのgrowとshrinkのプロパティです。growが正の値の場合、Containerに余分なスペースがあればコンポーネントを縦横比はそのままで拡大します。shrinkが正の値の場合、Containerに余分なスペースがなければコンポーネントを標準サイズ以下に縮小します。

負のgrow値およびshrink値は無視されます。

numbering

親でnumberedが設定されている場合に、順序数の値を制御します。このプロパティは、Sequenceの現在の子ではなく、次の子について順序数の値の指定方法を制御します。

  • normal： 次の子の順序数は、現在の順序数に1を足したものになります。
  • skip： 次の子の順序数は、現在の順序数と同じになります。
  • reset： 次の子の順序数は1になります。

spacing

レイアウト内でこのコンポーネントと前の子コンポーネントの間に追加するスペースの大きさです。レイアウトの最初の項目では無視されます。スペースは絶対ディメンションで指定します。spacingプロパティは、相対ディメンションをサポートしていません。

spacingプロパティは、positionがrelative（相対的）な子コンポーネントに適用されます。このプロパティは、 position が absolute（絶対的）である子コンポーネントでは無視されます。