APL Sequence

APL Sequence

Sequenceは、データセットを使用して一連のコンポーネントの繰り返しをインフレートし、長いスクロールリストとして表示します。

SequenceはContainerと似ていますが、項目の長いリストに対してはSequenceの方がパフォーマンスに優れています。ただし、Sequenceは柔軟性の低いレイアウトモデルです。

Sequenceは、画面上の項目を序数や照応に基づいて選択するためにも使用できます。詳細については、項目選択のためのAPLサポートを参照してください。

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

プロパティ

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

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

numbered

ブール値

false

×

×

trueの場合、データバインディングコンテキストのSequenceの子に序数を割り当てます。

onScroll

コマンドの配列

[]

×

×

スクロール中に実行するコマンドです。

preserve

文字列の配列

[]

×

×

Reinflateコマンドでドキュメントを再インフレートするときに保存するプロパティです。

scrollDirection

次のいずれか：horizontal、vertical

vertical

×

×

このSequenceのスクロール方向です。

snap

次のいずれか：none、start、center、end、forceStart、forceCenter、forceEnd

none

◯

×

スクロールの停止時に子コンポーネントをスナップする位置を指定します。

heightとwidth

表示エラーを最小限に抑えるために、縦方向のSequenceのheightと横方向のSequenceのwidthが指定されていない場合は、それぞれ100dpに初期化されます。heightとwidthにはautoを使用しないでください。Sequenceのサイズには絶対または相対ディメンションを使用します。

高さの値を持つ垂直方向のSequence内の項目テンプレートでは、高さに絶対ディメンションを使用する必要があり、パーセント値を使用することはできません。幅の値を持つ水平方向のSequence内の項目テンプレートでは、幅に絶対ディメンションを使用する必要があり、パーセント値を使用することはできません。

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

コンポーネントのlayoutDirectionプロパティは、scrollDirectionプロパティがhorizontalの場合に項目を表示する方向を決定します。

  • 左から右（LTR）- Sequenceは左側から項目を配置します。項目は右から表示領域にスクロールします。
  • 右から左（RTL）- Sequenceは右側から項目を配置します。項目は左から表示領域にスクロールします。

numbered

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

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

onScroll

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

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

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

"event": {
  "source": {
    "type": "Sequence",
    "handler": "Scroll",
    ...                     // コンポーネントのソースプロパティ
  }
}

event.sourceの詳細についてはイベントソースを参照してください。

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

preserve

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

Sequenceには以下のコンポーネント固有のプロパティ名があり、これらを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

Sequenceの項目をレイアウトしてスクロールする方向です。scrollDirectionプロパティには、次のいずれかを設定できます。

  • vertical - 項目を縦方向のリストに表示します。リストは上下にスクロールします。
  • horizontal - 項目を横方向のリストに表示します。リストは左右にスクロールします。

snap

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

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

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

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

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

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

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

複数子プロパティ

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

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

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

Sequenceイベントオブジェクト

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

{
  // Sequence固有の値
  "type": "Sequence",
  "position": Number,  // コンポーネントのスクロール位置（パーセンテージ）
  "allowForward": Boolean,   // trueの場合、前方にスクロールできる余地がある
  "allowBackwards": Boolean, // trueの場合、後方にスクロールできる余地がある

  // 表示される子
  "firstVisibleChild": Integer,       // 部分的に表示される最初の子のインデックス
  "firstFullyVisibleChild": Integer,  // 完全に表示される最初の子のインデックス
  "lastFullyVisibleChild": Integer,   // 完全に表示される最後の子のインデックス
  "lastVisibleChild": Integer,        // 部分的に表示される最後の子のインデックス

  // 一般的なコンポーネントの値
  "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単位の幅（パディングを含む）
}

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

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

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

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

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

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

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

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

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

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

以下は、Textコンポーネントのリストを表示するSequenceの例です。リストをスクロールすると、Sequenceの下にあるテキストが更新され、イベントオブジェクトのいくつかのプロパティが表示されます。ボタンをクリックすると、リスト内の特定のインデックスまでスクロールします。手動でスクロールするには、Sequenceをクリックしてドラッグします。

Sequenceの子項目

シーケンスの子は連続したストリップで表示されます。Sequenceは、項目を水平方向または垂直方向に配置します。

  • 水平 - 項目は、layoutDirectionプロパティの値に応じて、左から右または右から左の方向に表示されます。ユーザーはコンポーネントを左右にスワイプして項目をスクロールします。
  • 垂直 - 項目は上から下の方向に表示されます。ユーザーはコンポーネントを上下にスワイプして項目をスクロールします。

スクロール方向に沿った子のディメンションは自動で計算され、デフォルトで子のコンテンツを囲むように設定されます。

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

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

numbering

次のいずれか：normal、skip、reset

normal

×

×

次の子の順序数の設定方法を制御します。

spacing

絶対ディメンション

0

×

×

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

numbering

Sequenceのnumberedがtrueの場合に適用されます。numberingプロパティは、Sequenceがシーケンス内の次の子のordinal値を更新する方法を制御します。

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

spacing

Sequence内でこのコンポーネントと前のコンポーネントの間に追加するスペースの大きさです。Sequenceの最初の項目では無視されます。この値は絶対ディメンションで指定する必要があります。

Sequenceの例

以下は、Textコンポーネントを表示するSequenceの例です。この例では、Sequenceでdata配列のインフレートが使用されるように、dataプロパティを項目の配列にバインドしています。したがって、Sequenceはdata配列の項目ごとに1回ずつ子項目を表示します。

この例は、firstItemプロパティとlastItemプロパティの使用例も示しています。円形の小型デバイスでは、これらのプロパティによってヘッダーとフッターが定義されます。ヘッダーとフッターは残りのリスト項目と一緒にスクロールします。その他のすべてのViewportでは、ヘッダーにContainer、フッターにSequenceが使用されます。ヘッダーとフッターは常に画面上に固定されます。

このページは役に立ちましたか？

最終更新日: 2025 年 11 月 19 日