APL Pager



APL Pager

(これはAPLの最新バージョンではありませんAPLの最新バージョンの資料を参照するには、その他のバージョンオプションをクリックしてください)

Pagerは、一連のコンポーネントを1つずつ表示します。通常、Pagerは、時系列に並べられたデータ項目を表示するために使用します。Pagerでは長い連続した形で項目が表示されないため、Sequenceとは異なります。

プロパティ

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

プロパティ 必須 スタイル設定 動的 説明
data データ: プロパティ このContainerにバインドするデータです。
firstItem コンポーネントとレイアウトの配列 他のどの項目よりも先に含めるコンポーネントです。
initialPage 整数 最初のページの(0から始まる)インデックスです。デフォルトは0です。
item/items コンポーネントとレイアウトの配列 データセットを配置するのに使用するコンポーネントです。
lastItem コンポーネントとレイアウトの配列 他のすべての項目の後に含めるコンポーネントです。
navigation normal | none | wrap | forward-only 移動可能な方向を指定します。デフォルトは「normal」です。

Pagerは、左から右に順番に並べられた一連のページとしてユーザーに表示されます。通常、ユーザーは、Pagerを左右にスワイプしてページを切り替えます。デバイスにタッチパネルが搭載されていない場合、Pagerはキーボードの入力(左右の矢印キーまたはTabキー)に応じて移動します。

PagerとSequenceでは動作が異なります。Sequenceは、連続した項目のリストとして表示されます。画面のサイズが小さい場合、ゆっくりスワイプするとSequenceには1つの項目しか表示されませんが、コンテンツ内をすばやく移動する高速スワイプモードがサポートされているため、「高速スクロールモード」に設定するとコンテンツの複数の項目が小さく表示されます。個々の項目は、隣り合って並べられた状態で表示されます。一方、Pagerでは、前後のページのいずれかの方向に少しスワイプするだけで、それまで見ていたページから新しいページへとコンテンツが切り替わります。

指定されない場合、Pagerコンポーネントのheightwidthのデフォルトは100dpです。

data

任意のデータ配列です。データ配列がバインドされている場合、Pagerはデータ配列のインフレート方法を使用します。

firstItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントまたはレイアウトがPagerの先頭に追加されます。

item/items

Pagerに表示するコンポーネントとレイアウトの配列です。データプロパティが割り当てられている場合、Pagerはデータ配列のインフレート方法を使用します。データプロパティが割り当てられていない場合、Pagerは子コンポーネントの単純な配列のインフレート方法を使用します。

lastItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントまたはレイアウトがPagerに追加されます。

initialPage

表示する最初のページのインデックスです。インデックスは0から始まり、デフォルトは0です。firstItemが指定されている場合のインデックスは0になります。

navigationプロパティは、ユーザーがコンテンツ内を移動する方法を制御します。

  • normal: これがデフォルトです。ユーザーは、Pagerで前後に自由に移動することができます。

  • none: ユーザーはPagerで移動できません。ページが自動的に進行するメカニズムによって、ページが切り替わることが前提となります。

  • wrap: ユーザーは自由に移動することができます。最終ページの次は最初のページに戻ります。

  • forward-only: ユーザーは新しいページにのみ移動することができます。このモードは、ゲームやパズル向けです。

SetPage/AutoPageのコマンドはPagerで移動できます。navigationプロパティは、画面上のスワイプによるユーザー操作のみを制限します。

Pagerのサンプル

{
  "type": "Pager",
  "items": [
    {
      "type": "Text"
      "text": "ページ#1で表示されるテキストコンテンツ"
    },
    {
      "type": "Text"
      "text": "ページ#2で表示されるテキストコンテンツ"
    }
  ]
}