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型): オプション | スマホ上で表示するアイテムの数。 例
|
ItemsInTablet(Integer型): | タブレット上で表示するアイテムの数。 例
|
ItemsInDesktop(Integer型): | デスクトップ上で表示するアイテムの数。 例
|
GutterSize(Space Identifier型):オプション | アイテム間のスペースを定義します。以下のサイズが事前定義されています。
例
|