kanzi笔记(六)电话簿滚动效果制作

  1. 云栖社区>
  2. 博客>
  3. 正文

kanzi笔记(六)电话簿滚动效果制作

大连瓦匠 2018-03-09 10:14:04 浏览617
展开阅读全文

先看成品效果图:

 

第一步:创建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);
}
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

网友评论

登录后评论
0/500
评论
大连瓦匠
+ 关注