Gallery

Gallery UIパターンを使用すると、コンテンツのグループを表示できます。このUIパターンでは、最初と最後の概念を持つ画像をユーザーが順番に参照できます。

Gallery UIパターンの使用方法

Service StudioのツールボックスでGalleryを検索します。

Galleryウィジェットが表示されます。
ツールボックスから、Galleryウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
必要なコンテンツをGalleryウィジェットに追加します。

デフォルトでは、Galleryウィジェットはリストを想定しています。

データベースのアイテムを含むGallery UIパターンを使用するには、List RecordをGalleryウィジェットにドラッグしてカスタムコンテンツを作成します。

この例では、リストを削除し、ローカル画像をGalleryウィジェットに追加しています。
要素ツリーでImageウィジェットを選択し、［Properties］タブの［Image］ドロップダウンでGalleryに含める画像を選択またはインポートします。

注記: この例では、画像のTypeプロパティはLocal Imageに設定されています。外部画像やバイナリデータ画像を追加することもできます。
［Properties］タブで関連する（オプションの）プロパティを設定します。たとえば、各デバイス上で表示するアイテムの数（以下の例を参照）や各アイテム間のスペース（GutterSize）などを設定します。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

1行あたり4アイテム

1行あたり3アイテム

1行あたり2アイテム

1行あたり1アイテム

プロパティ	説明
ItemInPhone（Integer型）: オプション	スマホ上で表示するアイテムの数。例空白 - アイテムが1つ表示されます。これがデフォルト値です。 2 - アイテムが2つ表示されます。
ItemsInTablet（Integer型）:	タブレット上で表示するアイテムの数。例空白 - アイテムが3つ表示されます。これがデフォルト値です。 2 - アイテムが1つ表示されます。
ItemsInDesktop（Integer型）:	デスクトップ上で表示するアイテムの数。例空白 - アイテムが4つ表示されます。これがデフォルト値です。 3 - アイテムが3つ表示されます。
GutterSize（Space Identifier型）:オプション	アイテム間のスペースを定義します。以下のサイズが事前定義されています。 None Extra Small Small Base Medium Large Extra Large Extra Extra Large 例空白 - 各アイテム間のスペースが16pxになります。これがデフォルト値です（Entities.Space.Base）。 Entities.Space.Large - 各アイテム間のスペースが32pxになります。