APL GridSequence

---

GridSequenceコンポーネントは、データセットを使用して、コンポーネントセットの繰り返しを単一方向にスクロールする固定グリッドレイアウトに表示します。

GridSequenceとContainerコンポーネントの違いとして、GridSequenceは長いリストでのパフォーマンスに優れている代わりに、レイアウトモデルの柔軟性に欠けています。GridSequenceと通常のSequenceの違いは、GridSequenceは子コンポーネントを行と列に配置する点にあります。

GridSequenceを表示するプリビルドのレスポンシブ対応テンプレートについては、AlexaGridListを参照してください。

プロパティ

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

• すべてのアクション可能なコンポーネントのプロパティ
• すべての複数子コンポーネントのプロパティ
• すべての基本コンポーネントのプロパティ
• 次の表に示すGridSequenceプロパティ。列の意味を参照する。

プロパティ	型	デフォルト	スタイル設定	動的	説明
childHeight、childHeights	ディメンションまたはディメンションの配列	必須	×	◯	子の高さです。
childWidth、childWidths	ディメンションまたはディメンションの配列	必須	×	◯	子の幅です。
numbered	ブール値	false	×	×	trueの場合、データバインディングコンテキストでGridSequenceの子に序数を割り当てます。
onScroll	コマンドの配列	[]	×	×	スクロール中に実行するコマンドです。
preserve	文字列の配列	[]	×	×	Reinflateコマンドでドキュメントを再インフレートするときに保存するプロパティです。
scrollDirection	次のいずれか：horizontal、vertical	vertical	×	×	このGridSequenceのスクロール方向です。
snap	次のいずれか：none、start、center、end、forceStart、forceCenter、forceEnd	none	◯	×	スクロールの停止時に子コンポーネントをスナップする位置を指定します。

heightおよびwidth

表示エラーを最小限に抑えるために、垂直方向のGridSequenceのheightと水平方向のGridSequenceのwidthは、指定されていなければ100dpに初期化されます。heightとwidthにはautoを使用しないでください。GridSequenceサイズには絶対または相対ディメンションを使用します。

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

コンポーネントのlayoutDirectionプロパティは、GridSequenceの子コンポーネントをレイアウトする方向を決定します。左から右および右から左のレイアウトの例については、GridSequenceのレイアウトの例を参照してください。

childHeight

GridSequenceの各行の高さを決める配列です。

垂直スクロールのGridSequenceでは、childHeightの最初の値が使用されます。この値は、絶対ディメンションまたは相対ディメンションで指定する必要があります。childHeightをautoにすることはできません。

水平スクロールのGridSequenceには、1つ以上のchildHeight値を指定できます。列と行の高さと幅の計算で説明するレイアウトアルゴリズムにより、各子項目が配置されます。

childWidth

GridSequenceの各列の幅を決める配列です。

水平スクロールのGridSequenceでは、childWidthの最初の値が使用されます。この値は、絶対ディメンションまたは相対ディメンションで指定する必要があります。childWidthをautoにすることはできません。

垂直スクロールのGridSequenceには、1つ以上のchildWidth値を指定できます。列と行の高さと幅の計算で説明するレイアウトアルゴリズムにより、各子項目が配置されます。

numbered

trueの場合、GridSequence内のitemsのそれぞれにデータバインディングのordinalが設定されます。この順序数は「1」から始まり、子のnumberingプロパティがskipまたはresetの場合を除き、1ずつ増加します。firstItemとlastItemは順序付けに含められません。

numberedプロパティは、画面上に自動的に数字を表示するものではありません。データバインディングコンテキストでordinal値を使用すると、Textコンポーネントに数字を表示できます。

onScroll

スクロール中に実行するコマンドです。ランタイムは、スクロール中にフレームを描画するたびにこれらのコマンドの実行を1回試行しますが、正常に実行されるとは限りません。デバイスの処理速度が遅い場合、onScrollコマンドの実行は途切れ途切れになることがあります。

コマンドで報告されるevent.source.positionは、現在のスクロール位置をGridSequenceの幅／高さに対する割合で表します。たとえば、GridSequenceの幅が200ピクセルであり、コンテンツを左方向に520ピクセル分移動した場合、event.source.positionの値は2.60になります。

生成されるイベントの形式は次のようになります。

event.sourceのプロパティの詳細については、eventプロパティを参照してください。

onScrollイベントハンドラーは、コンポーネントのデータバインディングコンテキストで高速モードで実行されます。

preserve

Reinflateコマンドでドキュメントを再インフレートするときに保存する、動的なコンポーネントプロパティとバインドされたプロパティの配列です。

GridSequenceには以下のコンポーネント固有のプロパティ名があり、これらをpreserve配列に割り当てることができます。

• centerId - シーケンスの中央にある子のIDです。
• centerIndex - シーケンスの中央にある子のインデックスです。
• firstId - シーケンスの先頭にある子のIDです。
• firstIndex - シーケンスの先頭にある子のインデックスです。
• scrollOffset - 絶対スクロール位置（dp単位）です。
• scrollPercent - 相対スクロール位置（可視領域のパーセンテージ）です。

firstIndexオプションは、現在シーケンスの先頭に表示されている子のインデックスを使用し、（再インフレート後に）同じ子（インデックスで識別）がシーケンスの先頭に配置されるようにスクロール位置を設定します。firstIdは、現在シーケンスの先頭に表示されている子のidを使用し、（再インフレート後に）同じ子（idで識別）がシーケンスの先頭に配置されるようにスクロール位置を設定します。

centerIndexオプションは、現在シーケンスの中央に表示されている子のインデックスを使用し、（再インフレート後に）同じ子（インデックスで識別）がシーケンスの中央に配置されるようにスクロール位置を設定します。centerIdは、現在シーケンスの中央に表示されている子のidを使用し、（再インフレート後に）同じ子（idで識別）がシーケンスの中央に配置されるようにスクロール位置を設定します。

idで検索する場合（centerIdとfirstIdの両方）、再インフレートの前または後にidが見つからなければ、シーケンスは先頭から表示されます。コンポーネントをindexで検索する場合（centerIndexとfirstIndexの両方）、そのインデックスに子が存在しなければ、シーケンスは先頭から表示されます。

scrollDirection

scrollDirectionには、verticalまたはhorizontalを指定します。

snap

スクロールの停止時に子コンポーネントをスナップする位置を指定します。ユーザーがコンテンツをスクロールしてスクロールを停止すると、GridSequenceは子項目の位置を調整して、GridSequenceコンテナーの先頭、中央、末尾に「スナップ」することができます。GridSequenceは、スナップ位置に最も近い位置に子項目を揃えます。たとえば、snapがcenterの場合、GridSequenceは、中央に最も近い項目がコンテナーの中央にスナップするように各項目を移動させます。

GridSequenceは、次の2種類のスナップ動作をサポートします。

• スクロールに速度がついているときにスナップ - ユーザーがコンテンツをスクロールした後でポインターを放し、シーケンスが停止するまで速度が落ちるに任せると、GridSequenceは、リクエストされた位置またはシーケンスの先頭か末尾に子コンポーネントを揃えます。ユーザーがポインターを放したときにスクロール速度がほとんど落ちているか停止していると、スナップは発生しません。この種類のスナップを有効にするには、snapをstart、center、endのいずれかに設定します。
• 常にスナップ（スナップの強制）- ユーザーがポインターを放した後、GridSequenceは常に、リクエストされた位置またはGridSequenceの先頭か末尾に子コンポーネントを揃えます。スナップの強制の動作では、スクロール速度は関係ありません。この種類のスナップを有効にするには、snapをforceStart、forceCenter、forceEndのいずれかに設定します。

スナップでGridSequenceコンテナーの先頭、中央、末尾を特定するときには、paddingはすべて除外されます。

snapプロパティには次の値を設定できます。

• none -（デフォルト）スナップは行われません。
• start - スクロールに速度がついているときに、子コンポーネントの先頭側をコンテナーの先頭に揃えます。
• center - スクロールに速度がついているときに、子コンポーネントの中央をコンテナーの中央に揃えます。
• end - スクロールに速度がついているときに、子コンポーネントの末尾側をコンテナーの末尾に揃えます。
• forceStart - スクロール速度にかかわらず、子コンポーネントの先頭側をコンテナーの先頭に揃えます。
• forceCenter - スクロール速度にかかわらず、子コンポーネントの中央をコンテナーの中央に揃えます。
• forceEnd - スクロール速度にかかわらず、子コンポーネントの末尾側をコンテナーの末尾に揃えます。

snapプロパティは、ユーザーがコンテンツをスクロールしたときに適用されます。スクロールコマンドには適用されません。コマンドによるスクロール時に項目を揃えるには、ScrollToComponentコマンドまたはScrollToIndexコマンドを使用し、コマンドのalignプロパティを設定します。

複数子プロパティ

GridSequenceは複数子プロパティです。GridSequenceは、すべての複数子プロパティを継承します。

アクション可能なプロパティ

GridSequenceはアクション可能なコンポーネントです。GridSequenceは、すべてのアクション可能なプロパティを継承します。

GridSequenceの子項目

GridSequenceの子は、子の幅、高さ、スクロール方向に基づいて固定サイズで表示されます。

GridSequenceの子では、次の追加プロパティがサポートされます。

プロパティ	型	デフォルト	スタイル設定	動的	説明
numbering	次のいずれか：normal、skip、reset	normal	×	×	次の子の順序数の設定方法を制御します。

numbering

GridSequenceのnumberedプロパティがtrueの場合に適用されます。GridSequenceがGridSequence内の次の子のordinal値を更新する方法を制御します。

• normal: 次の子のordinalは、ordinal＋1になります。
• skip： 次の子のordinalは、ordinalと同じになります。
• reset： 次の子のordinalは、1になります。

GridSequenceと動的データソース

GridSequenceは、dynamicIndexListなどの動的データソースにバインドできます。動的データソースの先頭または途中に項目を追加すると、GridSequenceが想定外のスクロール動作をする場合があります。これを回避するには、先頭または途中に追加する項目の数を、交差軸方向の項目数の倍数にします。GridSequenceのscrollDirectionがverticalに設定されている場合、交差軸はchildWidthによって決まります。反対に、GridSequenceのscrollDirectionがhorizontalに設定されている場合、交差軸はchildHeightによって決まります。

列と行の高さと幅の計算

垂直スクロールのGridSequenceは、以下のアルゴリズムを使用して列の幅を計算します。

固定幅のGridSequence＋単一のchildWidth

GridSequenceの幅のディメンションがわかっていてchildWidthの値が1つの場合、作成される列の数は、100%をchildWidthで割った数（端数は切り捨て）となります。

たとえば、子の幅が「23%」の場合は4列作成され、右側にはほとんどスペースが残りません。同様に、GridSequenceの幅が300dpでchildWidthが50dpの場合、子の列は6列作成されます。

固定幅のGridSequence＋複数のchildWidths

GridSequenceの幅のディメンションがわかっていてchildWidthに複数の値がある場合、GridSequenceは次のルールを適用します。

• 絶対ディメンションの列には、割り当てられた値を使用します。
• 相対ディメンション（パーセンテージ）の列には、GridSequenceにそのパーセンテージをかけた幅を使用します。
• スペースが残っている場合は、そのスペースをautoディメンションの各列に均等に割り振ります。スペースが残っていない場合、autoの各列の幅は0になります。

自動幅のGridSequence

GridSequenceの幅がautoの場合、GridSequenceは次のルールを適用します。

• 絶対ディメンションの列には、割り当てられた値を使用します。
• 相対ディメンションの列には、幅0を使用します。
• autoディメンションの列には、幅0を使用します。
• GridSequence全体の幅は、列幅の合計となります。

水平スクロールのGridSequenceで行の高さを割り当てるアルゴリズムも同じルールに従いますが、childWidthではなくchildHeightが使用されます。

GridSequenceは、子項目がGridSequenceよりも大きい場合に子項目を切り取ります。たとえば、childWidth配列が[ auto, 30%, 50%, 30%, auto ]の場合、4番目の要素は切り取られ、1番目と5番目の要素にはサイズ0が割り当てられます。

全体を埋めるようにサイズを割り振るには、childWidthにautoを設定します。同じサイズの子を3つ定義する場合、[auto, auto, auto]という式を使用すると、数値が切り捨てられる問題を回避し、子のサイズを均等にすることができます。

GridSequenceイベントオブジェクト

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

報告されるpositionの値は、現在のスクロール位置をシーケンスの幅または高さで割った割合になります。この値は、onScrollハンドラーで報告される位置と同じです。

一部のプロパティは、コンポーネントのレイアウトが完了した後にのみ有効になります。詳細については、onLayoutハンドラーを参照してください。

イベントプロパティには、表示されている子の範囲が含まれています。

子コンポーネントは、次の条件をすべて満たしている場合に「完全に表示」と見なされます。

• 子コンポーネントの境界がGridSequenceの境界の外に出ていない。
• 子コンポーネントのdisplayプロパティが「normal」に設定されている。
• 子コンポーネントのopacityが1.0に設定されている。

次の条件に該当する場合、子コンポーネントは「表示」状態ですが、「完全に表示」とは見なされません。

• 子コンポーネントの境界がGridSequenceの境界と交差している。
• 子コンポーネントのdisplayプロパティが「normal」に設定されている。
• 子コンポーネントのopacityが0以外に設定されている。

firstVisibleChildからlastVisibleChildまでの範囲には、シーケンスに一部でも表示されている子コンポーネントがすべて含まれます。firstFullyVisibleChildからlastFullyVisibleChildまでの範囲には、シーケンスに完全に表示されている子コンポーネントがすべて含まれます。

firstVisibleChildプロパティとlastVisibleChildプロパティは、シーケンスに表示されている子がない場合に-1を返します。firstFullyVisibleChildプロパティとlastFullyVisibleChildプロパティは、シーケンスに完全に表示されている子がない場合に-1を返します。

可視性の判定の計算では、子のtransformプロパティや、シーケンスに重なっている可能性のあるコンポーネントによる遮蔽は考慮されません。

GridSequenceのレイアウトの例

水平グリッドの例

以下は、高さが同じ2つの行を持つ水平グリッドの例です。LTRとRTLを切り替えるには、Toggle layoutDirectionボタンを使用します。

---

このGridSequenceは水平方向にスクロールするグリッドなので、子は垂直方向の列に表示されます。GridSequenceの高さは300dpで、childHeightは50%です。このため、GridSequenceには2行分の子項目が収まります。各行の高さは150dpです。各列の幅は、childWidthで200dpに指定されています。

GridSequenceは、layoutDirectionプロパティに基づいて次のように子を配置します。

• 左から右（LTR）のlayoutDirection - GridSequenceは、左上から子を配置します。
• 右から左（RTL）のlayoutDirection - GridSequenceは、右上から子を配置します。

どちらのレイアウトでも、GridSequenceは各列を埋めてから次の列に進みます。

以下の図では、同じ水平方向のGridSequenceを使用して、左から右と右から左のレイアウト方向の違いを示します。

垂直グリッドの例

次の例は、列幅が異なる3列の垂直グリッドを示しています。LTRとRTLを切り替えるには、Toggle layoutDirectionボタンを使用します。

---

このGridSequenceは垂直方向にスクロールするグリッドなので、各列の幅はchildWidth配列によって決まります。autoディメンションは、残りのスペースを埋めるように拡大されます。その結果、列の幅は200dp、300dp、500dpと計算されます。

GridSequenceは、layoutDirectionプロパティに基づいて次のように子を配置します。

• 左から右（LTR）のlayoutDirection - GridSequenceは、左上から子を配置します。
• 右から左（RTL）のlayoutDirection - GridSequenceは、右上から子を配置します。

どちらのレイアウトでも、GridSequenceは各行を埋めてから次の行に進みます。

以下の図では、同じ垂直方向のGridSequenceを使用して、左から右と右から左のレイアウト方向の違いを示します。

関連トピック

• アクション可能なコンポーネントのプロパティ
• 複数子コンポーネントのプロパティ
• Sequence
• AlexaGridList

---

---

最終更新日: 2025 年 12 月 04 日