GridView

A Gridview lays out children in a staggered grid formation. It supports horizontal & vertical layout as well as an ability to layout children in reverse.

API Reference: UI.GridView

TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then you can able to implement themeable components programatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.

TypeScript
JavaScript
TypeScript
import PageTitleLayout from "components/PageTitleLayout";
import Color = require("sf-core/ui/color");
import GridViewSampleDesing from 'generated/pages/gridViewSample';
import Label = require("sf-core/ui/label");
import GridView = require("sf-core/ui/gridview");
import GridViewItem = require("sf-core/ui/gridviewitem");
import LayoutManager = require("sf-core/ui/layoutmanager");
import Application = require('sf-core/application');
import Screen = require('sf-core/device/screen');
import TextAlignment = require("sf-core/ui/textalignment");
import addChild from "@smartface/contx/lib/smartface/action/addChild";
import componentContextPatch from "@smartface/contx/lib/smartface/componentContextPatch";
type DatasetType = { title: String, backgroundColor: Color };
const SPAN_COUNT: number = 2;
const COLORS: string[] = [
"#ffffff", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc", "#0077b3",
"#006699"
];
//You should create new Page from UI-Editor and extend with it.
export default class GridViewSample extends GridViewSampleDesing {
myGridView: GridView;
layoutManager: LayoutManager;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
generateDataset(): DatasetType[] {
let dataset: DatasetType[] = [];
for (let i = 0; i < 12; ++i) {
dataset.push({
title: `Smartface Title ${i}`,
backgroundColor: Color.create(COLORS[i % COLORS.length])
});
}
return dataset;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad) {
superOnLoad();
this.headerBar.titleLayout = new PageTitleLayout();
let myDataSet: DatasetType[] = this.generateDataset();
this.layoutManager = new LayoutManager({
spanCount: SPAN_COUNT,
scrollDirection: LayoutManager.ScrollDirection.VERTICAL,
onItemLength: function () {
// Make sure GridViewItem's are square sized
return (Screen.width / SPAN_COUNT);
}
});
let index = 0;
this.myGridView = new GridView({
layoutManager: this.layoutManager,
refreshEnabled: true,
itemCount: myDataSet.length,
scrollBarEnabled: false,
onItemCreate: () => {
let gridViewItem = new GridViewItem();
let myLabel = new Label({
flexGrow: 1,
textAlignment: TextAlignment.MIDCENTER
});
this.myGridView.dispatch(addChild(`gridViewItem${++index}`, gridViewItem));
//@ts-ignore
gridViewItem.myLabel = myLabel;
gridViewItem.addChild(myLabel);
return gridViewItem;
},
onItemBind: (gridViewItem, index) => {
const { title, backgroundColor }: DatasetType = myDataSet[index];
gridViewItem.myLabel.text = title;
gridViewItem.myLabel.backgroundColor = backgroundColor;
},
onItemSelected: (gridViewItem) => {
console.log(`Item title : ${gridViewItem.myLabel.text}`);
},
onPullRefresh: () => {
console.log("onPullRefresh");
},
onScroll: () => {
console.log("onScroll");
}
});
this.layout.addChild(this.myGridView, 'myGridView', ".sf-gridView", (userProps) => {
userProps.width = Screen.width;
userProps.height = Screen.height;
userProps.marginTop = 0;
userProps.marginBottom = 0;
return userProps;
});
this.dispatch({
type: "updateUserStyle",
userStyle: {
paddingTop: 0,
paddingLeft: 0,
paddingBottom: 0,
paddingRight: 0,
}
});
}
JavaScript
const Screen = require("sf-core/device/screen");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require("sf-core/ui/color");
const Label = require("sf-core/ui/label");
const GridView = require("sf-core/ui/gridview");
const GridViewItem = require("sf-core/ui/gridviewitem");
const TextAlignment = require("sf-core/ui/textalignment");
const LayoutManager = require("sf-core/ui/layoutmanager");
const SPAN_COUNT = 2;
const COLORS = [
"#ffffff", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc", "#0077b3",
"#006699"
];
module.exports = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
},
onLoad: function() {
var myDataSet = generateDataset();
var layoutManager = new LayoutManager({
spanCount: SPAN_COUNT,
scrollDirection: LayoutManager.ScrollDirection.VERTICAL,
onItemLength: function() {
// Make sure GridViewItem's are square sized
return Screen.width / SPAN_COUNT;
}
});
var gridView = new GridView({
layoutManager: layoutManager,
refreshEnabled: true,
backgroundColor: Color.TRANSPARENT,
flexGrow: 1,
itemCount: myDataSet.length,
scrollBarEnabled: false,
onItemCreate: function() {
var gridViewViewItem = new GridViewItem();
var myLabel = new Label({
flexGrow: 1,
textAlignment: TextAlignment.MIDCENTER
});
gridViewViewItem.addChild(myLabel);
gridViewViewItem.myLabel = myLabel;
return gridViewViewItem;
},
onItemBind: function(gridViewItem, index) {
var { title, backgroundColor } = myDataSet[index];
gridViewItem.myLabel.text = title;
gridViewItem.myLabel.backgroundColor = backgroundColor;
},
onItemSelected: function(gridViewItem, index) {
console.log(`Item title : ${gridViewItem.myLabel.text}`);
},
onPullRefresh: function() {
console.log("onPullRefresh");
},
onScroll: function() {
console.log("onScroll");
}
});
this.layout.addChild(gridView);
}
});
}
);
function generateDataset() {
var dataset = [];
for (let i = 0; i < 12; ++i) {
dataset.push({
title: `Smartface Title ${i}`,
backgroundColor: Color.create(COLORS[i % COLORS.length])
});
}
return dataset;
}

Advanced Usage

Sample project implemented using GridView is available. You can check that out.

Adjust GridView Item Span

GridView can be full span with LayoutManager callback function, onFullSpan, that makes the cell full. While using layout manager if scroll direction is vertical, height must be return value; if layout manager scroll direction is horizontal width must be return value. If return value is undefined it means nothing will be modified.

TypeScript
JavaScript
TypeScript
import PageTitleLayout from "components/PageTitleLayout";
import Color = require("sf-core/ui/color");
import GridViewSampleDesign from 'generated/pages/gridViewSample';
import Label = require("sf-core/ui/label");
import GridView = require("sf-core/ui/gridview");
import GridViewItem = require("sf-core/ui/gridviewitem");
import LayoutManager = require("sf-core/ui/layoutmanager");
import Application = require('sf-core/application');
import Screen = require('sf-core/device/screen');
import TextAlignment = require("sf-core/ui/textalignment");
import addChild from "@smartface/contx/lib/smartface/action/addChild";
import componentContextPatch from "@smartface/contx/lib/smartface/componentContextPatch";
type DatasetType = { title: String, backgroundColor: Color };
const SPAN_COUNT: number = 2;
const COLORS: string[] = [
"#ffffff", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc", "#0077b3",
"#006699"
];
//You should create new Page from UI-Editor and extend with it.
export default class GridViewSample extends GridViewSampleDesign {
myGridView: GridView;
layoutManager: LayoutManager;
index : number = 0;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
generateDataset(): DatasetType[] {
let dataset: DatasetType[] = [];
for (let i = 0; i < 12; ++i) {
dataset.push({
title: `Smartface Title ${i}`,
backgroundColor: Color.create(COLORS[i % COLORS.length])
});
}
return dataset;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad) {
superOnLoad();
this.headerBar.titleLayout = new PageTitleLayout();
let myDataSet: DatasetType[] = this.generateDataset();
this.layoutManager = new LayoutManager({
spanCount: SPAN_COUNT,
scrollDirection: LayoutManager.ScrollDirection.VERTICAL,
onItemLength: function () {
// Make sure GridViewItem's are square sized
return Screen.width / SPAN_COUNT;
},
onFullSpan: function (type) {
if (type == 1) {
return 200;
}
else if (type == 2) {
return 50;
}
return undefined;
}
});
this.myGridView = new GridView({
layoutManager: this.layoutManager,
refreshEnabled: true,
backgroundColor: Color.TRANSPARENT,
flexGrow: 1,
itemCount: myDataSet.length,
scrollBarEnabled: false,
onItemType: function (index) {
if (index === 0) {
return 1;
}
else if (index === 1) {
return 2;
}
return 3;
},
onItemCreate: () => {
let gridViewViewItem = new GridViewItem();
let myLabel = new Label({
flexGrow: 1,
textAlignment: TextAlignment.MIDCENTER
});
this.myGridView.dispatch(addChild(`gridViewItem${++this.index}`, gridViewViewItem));
gridViewViewItem.addChild(myLabel);
//@ts-ignore
gridViewViewItem.myLabel = myLabel;
return gridViewViewItem;
},
onItemBind: function (gridViewItem, index) {
let { title, backgroundColor } = myDataSet[index];
gridViewItem.myLabel.text = title;
gridViewItem.myLabel.backgroundColor = backgroundColor;
},
onItemSelected: function (gridViewItem, index) {
console.log(`Item title : ${gridViewItem.myLabel.text}`);
},
onPullRefresh: function () {
console.log("onPullRefresh");
},
onScroll: function () {
console.log("onScroll");
}
});
this.layout.addChild(this.myGridView, 'myGridView', ".sf-gridView", (userProps) => {
userProps.width = Screen.width;
userProps.height = Screen.height;
userProps.marginTop = 0;
userProps.marginBottom = 0;
return userProps;
});
this.dispatch({
type: "updateUserStyle",
userStyle: {
paddingTop: 0,
paddingLeft: 0,
paddingBottom: 0,
paddingRight: 0,
}
});
}
JavaScript
const Application = require("sf-core/application");
const Screen = require("sf-core/device/screen");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require("sf-core/ui/color");
const Label = require("sf-core/ui/label");
const GridView = require("sf-core/ui/gridview");
const GridViewItem = require("sf-core/ui/gridviewitem");
const TextAlignment = require("sf-core/ui/textalignment");
const LayoutManager = require("sf-core/ui/layoutmanager");
const SPAN_COUNT = 2;
const COLORS = [
"#ffffff", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc", "#0077b3",
"#006699"
];
module.exports = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
// this.parentController.headerBar.visible = false;
this.headerBar.visible = false;
},
onLoad: function() {
var myDataSet = generateDataset();
var layoutManager = new LayoutManager({
spanCount: SPAN_COUNT,
scrollDirection: LayoutManager.ScrollDirection.VERTICAL,
onItemLength: function() {
// Make sure GridViewItem's are square sized
return Screen.width / SPAN_COUNT;
},
onFullSpan: function(type) {
if (type == 1) {
return 200;
}
else if (type == 2) {
return 50;
}
return undefined;
}
});
var gridView = new GridView({
layoutManager: layoutManager,
refreshEnabled: true,
backgroundColor: Color.TRANSPARENT,
flexGrow: 1,
itemCount: myDataSet.length,
scrollBarEnabled: false,
onItemType: function(index) {
if (index === 0) {
return 1;
}
else if (index === 1) {
return 2;
}
return 3;
},
onItemCreate: function() {
var gridViewViewItem = new GridViewItem();
var myLabel = new Label({
flexGrow: 1,
textAlignment: TextAlignment.MIDCENTER
});
gridViewViewItem.addChild(myLabel);
gridViewViewItem.myLabel = myLabel;
return gridViewViewItem;
},
onItemBind: function(gridViewItem, index) {
var { title, backgroundColor } = myDataSet[index];
gridViewItem.myLabel.text = title;
gridViewItem.myLabel.backgroundColor = backgroundColor;
},
onItemSelected: function(gridViewItem, index) {
console.log(`Item title : ${gridViewItem.myLabel.text}`);
},
onPullRefresh: function() {
console.log("onPullRefresh");
},
onScroll: function() {
console.log("onScroll");
}
});
this.layout.addChild(gridView);
}
});
}
);
function generateDataset() {
var dataset = [];
for (let i = 0; i < 12; ++i) {
dataset.push({
title: `Smartface Title ${i}`,
backgroundColor: Color.create(COLORS[i % COLORS.length])
});
}
return dataset;
}

Display Data In Cards

To show information inside cards that have a consistent look View can be customized. Pagination and snapping behaviors are given to GridView while scrolling. Snapping allows to lock the viewport to certain elements or locations after a user has finished scrolling. This helps to swipe GridView cells.

TypeScript
JavaScript
TypeScript
import PageTitleLayout from "components/PageTitleLayout";
import Color = require("sf-core/ui/color");
import Page2Design from 'generated/pages/page2';
import Label = require("sf-core/ui/label");
import GridView = require("sf-core/ui/gridview");
import GridViewItem = require("sf-core/ui/gridviewitem");
import LayoutManager = require("sf-core/ui/layoutmanager");
import Application = require('sf-core/application');
import Screen = require('sf-core/device/screen');
import TextAlignment = require("sf-core/ui/textalignment");
import addChild from "@smartface/contx/lib/smartface/action/addChild";
const System = require('sf-core/device/system');
const DecelerationRate = require("sf-core/ui/ios/decelerationrate");
type DatasetType = { title: String, backgroundColor: Color };
const SPAN_COUNT: number = 1;
const COLORS: string[] = [
"#ffffff", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc", "#0077b3",
"#006699"
];
const ITEM_WIDTH: number = 150;
//You should create new Page from UI-Editor and extend with it.
export default class GridViewSample extends Page2Design {
myGridView: GridView;
layoutManager: LayoutManager;
index: number = 0;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
generateDataset(): DatasetType[] {
let dataset: DatasetType[] = [];
for (let i = 0; i < 12; ++i) {
dataset.push({
title: `Smartface Title ${i}`,
backgroundColor: Color.create(COLORS[i % COLORS.length])
});
}
return dataset;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad) {
superOnLoad();
this.headerBar.titleLayout = new PageTitleLayout();
let myDataSet: DatasetType[] = this.generateDataset();
this.layoutManager = new LayoutManager({
spanCount: SPAN_COUNT,
scrollDirection: LayoutManager.ScrollDirection.HORIZONTAL,
onItemLength: function () {
// Make sure GridViewItem's are square sized
return ITEM_WIDTH;
}
});
this.layoutManager.ios.targetContentOffset = (proposedContentOffset, velocity) => {
let positionX = this.gridView.contentOffset.x / ITEM_WIDTH;
let decimalPositionX = positionX;
let precisionPositionX = positionX % 1;
if (velocity.x == 0 && precisionPositionX >= 0.5) {
decimalPositionX = decimalPositionX + 1;
}
else if (velocity.x > 0) {
decimalPositionX = decimalPositionX + 1;
}
return { x: decimalPositionX * ITEM_WIDTH, y: 0 };
};
this.myGridView = new GridView({
layoutManager: this.layoutManager,
refreshEnabled: true,
itemCount: myDataSet.length,
scrollBarEnabled: false,
onItemCreate: () =>{
var gridViewItem = new GridViewItem();
gridViewItem.paddingLeft = 20;
var myLabel = new Label({
flexGrow: 1,
textAlignment: TextAlignment.MIDCENTER
});
gridViewItem.addChild(myLabel);
this.myGridView.dispatch(addChild(`gridViewItem${++this.index}`, gridViewItem));
//@ts-ignore
gridViewItem.myLabel = myLabel;
return gridViewItem;
},
onItemBind: function (gridViewItem, index) {
var { title, backgroundColor } = myDataSet[myDataSet.length - index - 1];
gridViewItem.myLabel.text = title;
gridViewItem.myLabel.backgroundColor = backgroundColor;
gridViewItem.applyLayout();
},
onItemSelected: function (gridViewItem, index) {
console.log(`Item title : ${gridViewItem.myLabel.text}`);
},
onPullRefresh: function () {
console.log("onPullRefresh");
},
onScroll: function (contentOffset) { }
});
this.myGridView.ios.decelerationRate = DecelerationRate.FAST;
if (System.OS === "Android")
this.myGridView.android.snapToAlignment = GridView.Android.SnapAlignment.SNAPTO_START;
this.layoutManager.contentInset = { top: 0, left: 0, bottom: 0, right: 20 };
this.layout.addChild(this.myGridView, 'myGridView', ".sf-gridView", (userProps) => {
userProps.backgroundColor = Color.TRANSPARENT;
userProps.height = 200;
return userProps;
});
this.dispatch({
type: "updateUserStyle",
userStyle: {
paddingTop: 0,
paddingLeft: 0,
paddingBottom: 0,
paddingRight: 0,
}
});
}
JavaScript
const Application = require("sf-core/application");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require("sf-core/ui/color");
const Label = require("sf-core/ui/label");
const GridView = require("sf-core/ui/gridview");
const GridViewItem = require("sf-core/ui/gridviewitem");
const TextAlignment = require("sf-core/ui/textalignment");
const LayoutManager = require("sf-core/ui/layoutmanager");
const System = require('sf-core/device/system');
const DecelerationRate = require("sf-core/ui/ios/decelerationrate");
const SPAN_COUNT = 1;
const COLORS = [
"#006699", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc", "#0077b3",
"#006699"
];
const ITEM_WIDTH = 150;
module.exports = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
},
onLoad: function() {
var myDataSet = generateDataset();
var layoutManager = new LayoutManager({
spanCount: SPAN_COUNT,
scrollDirection: LayoutManager.ScrollDirection.HORIZONTAL,
onItemLength: function() {
// Make sure GridViewItem's are square sized
return ITEM_WIDTH;
}
});
layoutManager.ios.targetContentOffset = function(proposedContentOffset, velocity) {
var positionX = gridView.contentOffset.x / ITEM_WIDTH;
var decimalPositionX = parseInt(positionX);
var precisionPositionX = positionX % 1;
if (velocity.x == 0 && precisionPositionX >= 0.5) {
decimalPositionX = decimalPositionX + 1;
}
else if (velocity.x > 0) {
decimalPositionX = decimalPositionX + 1;
}
return { x: decimalPositionX * ITEM_WIDTH, y: 0 };
};
var gridView = new GridView({
layoutManager: layoutManager,
refreshEnabled: true,
backgroundColor: Color.TRANSPARENT,
top: 100,
height: 200,
itemCount: myDataSet.length,
scrollBarEnabled: false,
onItemCreate: function() {
var gridViewViewItem = new GridViewItem();
gridViewViewItem.paddingLeft = 20;
var myLabel = new Label({
flexGrow: 1,
textAlignment: TextAlignment.MIDCENTER
});
gridViewViewItem.addChild(myLabel);
gridViewViewItem.myLabel = myLabel;
return gridViewViewItem;
},
onItemBind: function(gridViewItem, index) {
var { title, backgroundColor } = myDataSet[myDataSet.length - index - 1];
gridViewItem.myLabel.text = title;
gridViewItem.myLabel.backgroundColor = backgroundColor;
gridViewItem.applyLayout();
},
onItemSelected: function(gridViewItem, index) {
console.log(`Item title : ${gridViewItem.myLabel.text}`);
},
onPullRefresh: function() {
console.log("onPullRefresh");
},
onScroll: function(contentOffset) {}
});
gridView.ios.decelerationRate = DecelerationRate.FAST;
if (System.OS === "Android") {
gridView.android.snapToAlignment = GridView.Android.SnapAlignment.SNAPTO_START;
}
layoutManager.contentInset = { top: 0, left: 0, bottom: 0, right: 20 };
this.layout.addChild(gridView);
}
});
}
);
function generateDataset() {
var dataset = [];
for (let i = 0; i < 12; ++i) {
dataset.push({
title: `Smartface Title ${i}`,
backgroundColor: Color.create(COLORS[i % COLORS.length])
});
}
return dataset;
}

Scroll Position State

Please note that while navigating to another page or just using GridView component as ListViewItem (inner usages), the page lose its scroll position state. To keep the scroll position state the same, we provide methods to save and restore the state; Checkout saveInstanceState() & restoreInstanceState(state). Its recommended to checkout onAttachedToWindow() & onDetachedFromWindow( ) as well.

Pagination

Pagination makes possible displaying the grid records in paged view and can be scrolled on an individual basis.

TypeScript
JavaScript
TypeScript
import PageTitleLayout from "components/PageTitleLayout";
import Color = require("sf-core/ui/color");
import Page2Design from 'generated/pages/page2';
import Label = require("sf-core/ui/label");
import GridView = require("sf-core/ui/gridview");
import GridViewItem = require("sf-core/ui/gridviewitem");
import LayoutManager = require("sf-core/ui/layoutmanager");
import Application = require('sf-core/application');
import Screen = require('sf-core/device/screen');
import TextAlignment = require("sf-core/ui/textalignment");
import addChild from "@smartface/contx/lib/smartface/action/addChild";
const System = require('sf-core/device/system');
const DecelerationRate = require("sf-core/ui/ios/decelerationrate");
type DatasetType = { title: String, backgroundColor: Color };
const SPAN_COUNT: number = 1;
const COLORS: string[] = [
"#ffffff", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc", "#0077b3",
"#006699"
];
const ITEM_WIDTH: number = 150;
//You should create new Page from UI-Editor and extend with it.
export default class GridViewSample extends Page2Design {
myGridView: GridView;
layoutManager: LayoutManager;
index: number = 0;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
generateDataset(): DatasetType[] {
let dataset: DatasetType[] = [];
for (let i = 0; i < 12; ++i) {
dataset.push({
title: `Smartface Title ${i}`,
backgroundColor: Color.create(COLORS[i % COLORS.length])
});
}
return dataset;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad) {
superOnLoad();
this.headerBar.titleLayout = new PageTitleLayout();
let myDataSet: DatasetType[] = this.generateDataset();
this.layoutManager = new LayoutManager({
spanCount: SPAN_COUNT,
scrollDirection: LayoutManager.ScrollDirection.HORIZONTAL,
onItemLength: function () {
// Make sure GridViewItem's are square sized
return ITEM_WIDTH;
}
});
this.layoutManager.ios.targetContentOffset = (proposedContentOffset, velocity) => {
let positionX = this.gridView.contentOffset.x / ITEM_WIDTH;
let decimalPositionX = positionX;
let precisionPositionX = positionX % 1;
if (velocity.x == 0 && precisionPositionX >= 0.5) {
decimalPositionX = decimalPositionX + 1;
}
else if (velocity.x > 0) {
decimalPositionX = decimalPositionX + 1;
}
return { x: decimalPositionX * ITEM_WIDTH, y: 0 };
};
this.myGridView = new GridView({
layoutManager: this.layoutManager,
refreshEnabled: true,
backgroundColor: Color.TRANSPARENT,
itemCount: myDataSet.length,
scrollBarEnabled: false,
paginationEnabled: true,
onItemCreate: () => {
var gridViewItem = new GridViewItem();
gridViewItem.paddingLeft = 20;
var myLabel = new Label({
flexGrow: 1,
textAlignment: TextAlignment.MIDCENTER
});
gridViewItem.addChild(myLabel);
this.myGridView.dispatch(addChild(`gridViewItem${++this.index}`, gridViewItem));
//@ts-ignore
gridViewItem.myLabel = myLabel;
return gridViewItem;
},
onItemBind: function (gridViewItem, index) {
var { title, backgroundColor } = myDataSet[myDataSet.length - index - 1];
gridViewItem.myLabel.text = title;
gridViewItem.myLabel.backgroundColor = backgroundColor;
gridViewItem.applyLayout();
},
onItemSelected: function (gridViewItem, index) {
console.log(`Item title : ${gridViewItem.myLabel.text}`);
},
onPullRefresh: function () {
console.log("onPullRefresh");
},
onScroll: function (contentOffset) { }
});
this.myGridView.ios.decelerationRate = DecelerationRate.FAST;
this.layoutManager.contentInset = { top: 0, left: 0, bottom: 0, right: 20 };
this.layout.addChild(this.myGridView, 'myGridView', ".sf-gridView", (userProps) => {
userProps.backgroundColor = Color.TRANSPARENT;
userProps.height = 200;
return userProps;
});
this.dispatch({
type: "updateUserStyle",
userStyle: {
paddingTop: 0,
paddingLeft: 0,
paddingBottom: 0,
paddingRight: 0,
}
});
}
JavaScript
const Screen = require("sf-core/device/screen");
const Application = require("sf-core/application");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require("sf-core/ui/color");
const Label = require("sf-core/ui/label");
const GridView = require("sf-core/ui/gridview");
const GridViewItem = require("sf-core/ui/gridviewitem");
const TextAlignment = require("sf-core/ui/textalignment");
const LayoutManager = require("sf-core/ui/layoutmanager");
const System = require('sf-core/device/system');
const DecelerationRate = require("sf-core/ui/ios/decelerationrate");
const SPAN_COUNT = 1;
const COLORS = [
"#006699", "#e6f7ff", "#cceeff", "#b3e6ff", "#99ddff", "#80d4ff", "#66ccff",
"#4dc3ff", "#33bbff", "#1ab2ff", "#00aaff", "#0099e6", "#0088cc",