kanzi筆記（六）電話簿滾動效果製作

先看成品效果圖：

 

第一步：創建Grid List Box 3D, or Grid List Box 2D；2D就行了。

第二步：

創建含有圖片、名字和號碼三個元素的模板。然後用這個模板創建電話簿列表。

創建完後會變成下面這樣，這是因爲默認的行和列的個數。

第三步：修改寬窄尺寸，使得呈現爲列表顯示。似乎修改grid的行數和列數應該也可以改爲列表顯示的。

第四步：設置起始和終止區域。

 

這樣基本就可以了。在此基礎上將text顯示一樣的項目，設置爲bind。再添加page的跳轉。就可以了。

下面是通過腳本的方式創建：

 
//To create a Grid List Box 2D:
// Create a Grid List Box 2D named MyListBox.
GridListBox2DSharedPtr gridListBox = GridListBox2D::create(domain, "MyListBox");
//To configure the grid area:
// Make each grid cell be a 100x100 square.
gridListBox->setCellWidth(100.0f);
gridListBox->setCellHeight(100.0f);
// Make the grid contain three rows that are filled column by column.
gridListBox->setHeight(300.0f);
gridListBox->setDirection(GridListBoxConcept::GridDirectionDown);
// Make the grid contain 10 columns. Items that are dragged beyond these columns are made invisible.
gridListBox->setWidth(1000.0f);
// Change the resting position when the list is scrolled to the beginning or end, so that items are not right at the grid edge.
gridListBox->setItemAreaBegin(0.2f);
gridListBox->setItemAreaEnd(0.8f);
//To add items to the list box:
// Create images and add them as items of the list box.
// Items on the grid appear in the order you add them to the list.
for (int i = 0; i < 5; ++i)
{
    Image2DSharedPtr item = Image2D::create(domain, "item" + to_string(i));
    item->setImage(item->acquireResource<Texture>(ResourceID("DefaultTexture")));
    // Make the images shrink to the cell size.
    item->setHorizontalAlignment(Node::HorizontalAlignmentStretch);
    item->setVerticalAlignment(Node::VerticalAlignmentStretch);
    gridListBox->addItem(item);
}