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); }