PageView how to use?

cocos2d-x C++
#1

I never ever used PageView and never read any documentation about it before now. And it’s now a problem to find examples and doc.

I just want to have PageView like this:

80dfe00626626ec0abc28b839647c46fadbadc2b

So it’s showing 3 items and centered, also magnetic.

Here is what I’ve tried by editing UIPageViewTest file:

// Create the page view
Size pageViewSize(300, 130);
Size pageSize(100, 130);
pageView* pageView = PageView::create();
pageView->setDirection(PageView::Direction::HORIZONTAL);
pageView->setMagneticType(ListView::MagneticType::CENTER);
pageView->setGravity(ListView::Gravity::CENTER_HORIZONTAL);
pageView->setContentSize(pageViewSize);    
pageView->setBounceEnabled(true);
Size backgroundSize = background->getContentSize();
pageView->setPosition((widgetSize - pageView->getContentSize()) / 2.0f);
pageView->removeAllItems();
pageView->setGlobalZOrder(200);

for (int i = 1; i < 5; ++i)
{
    Layout* layout = Layout::create();
    layout->setContentSize(pageSize);
    ImageView* imageView = ImageView::create("cocosui/scrollviewbg.png");
    imageView->setScale9Enabled(true);
    imageView->setContentSize(pageSize);
    imageView->setPosition(Vec2(layout->getContentSize().width / 2.0f, layout->getContentSize().height / 2.0f));
    layout->addChild(imageView);
    Text* label = Text::create(StringUtils::format("page %d",(i)), "fonts/Marker Felt.ttf", 15);
    label->setColor(Color3B(192, 192, 192));
    label->setPosition(Vec2(layout->getContentSize().width / 2.0f, layout->getContentSize().height / 2.0f));
    layout->addChild(label);
    pageView->addPage(layout);
}
pageView->scrollToItem(4);

51: Node: UI → 17:PageView Test.

Result I got:

Playing with sizes and parameter gives me nothing what I’m trying to achieve. What I’m doing wrong?

#2

Based on the picture at the top, I am not entirely sure if you just want the content of each page centred or for the content of each page to be the same size as the page and centred.

If you just want to the content centred then the solution seems to be setting the size of layout to pageViewSize rather than pageSize, i.e. layout->setContentSize(pageViewSize); You are setting the location of imageView based on size of layout, but because you are setting the size of layout to pageSize, which also happens to be the same size as imageView, all it does is puts imageView at the bottom-left of the page.

If you want the imageView to take up the entire page, you also need to set the content size of imageView to the same as layout, i.e. imageView->setContentSize(layout->getContentSize());

#3

Well, that image looks clear for me… just size(width) of pageview equals 2x pages sizes and it’s showing 1 full page in a center and 2 half size(parts) of other 2 pages.

For my design, final results should be like this(just found some example via google and it’s with scale also and fade, but main idea is the same):

6633F2D6-1494-4997-BB48-9AD8D747E44E
6633F2D6-1494-4997-BB48-9AD8D747E44E317×565 1.32 MB

#4

Oh right. I see now. I looked into this deeper and discovered the 2 things preventing you from doing what you wanted to do. For a start, PageView automatically sets added pages to the content size of that PageView, which prevents you from just making pages smaller. The other thing is that you can’t change the size of the clipping area to show outside of the PageView area, i.e. where the previous and next pages are located.

But I think the solution seems to be to use ListView instead of PageView. PageView is actually a ListView with some extra bits, such as automatically making each child the same size as the PageView. So try ListView.

#5

are there bugs that need a GitHub issue created for them or at least an issue created as an enhancement?

#6

Before that I’ve tried ListView, but did like a very quick test with and noticed, that it has a lot of bugs from first time of use.
First:
ListView->setScrollDuration(0.1);
not works for
ListView->setMagneticType(ListView::MagneticType::CENTER);

It’s only works for bounce to first item and last, but not for any other. MagneticType is works, but it’s can’t be configured. But I need to set a fast MagneticType time, because currently it’s just so slow.
For PageView - it will work and so I can configure time for Magnetic of the center item.

Second:
this command just don’t works:

this->addChild(listView); 
listView->scrollToItem(15, Vec2::ANCHOR_MIDDLE, Vec2::ANCHOR_MIDDLE,0.01);

Only when I use it later, lets say in touch even for scene - it will scroll.

But overall, it’s like what I have to use… major problem is that ScrollDuration not works for MagneticType.
By the way that image about PageView is from Cocos Creator v1.3.3 released! how @slackmoehrle you did that PageView?

#7

You are right, it is from Creator 1.3.3. I didn’t create it, but let me ask the Creator team and see if anyone remembers doing it.

As promised:

55 AM
55 AM1246×1136 210 KB

#8

It’s using different PageView class than in cocos2d-x?

#9

I am not sure. Lets have an Engineer respond. I’m not entirely current one how much overlap there actually is between -x and -lite.

#10

The PageView in Creator is different from cocos2d-x.

#11

It’s in cocos2d-x lite classes? I just want to use it.

#12

No, its totally implemented in JavaScript.

#13

So, again current ListView has bugs and not allowing me to configure ScrollDuration for MagneticType.
Have you fixed this maybe?

#14

I made something like this 4-5 years ago.

#15
1 Like
#16

It will work with latest cocos2d-x ? Also, download link is just for .mov video.

#17

yeah the dropbox link wasnt working for me so I uploaded it on youtube.
Buttons in this are 2d i used seteye() to make it look 3d… this was available in cocos2d-x v2
it won’t work with the latest cocos2d-x. making the scroll layer like the one you posted above with coins … shouldnt be that hard imo.

If i get the time ill make it for you using ui::listview.

1 Like
#18

You know, the main idea is that I need just a simple component…
Checked cocos2d-x - it’s nightmare:

  • CCScrollView
  • CCTableView
  • UIScrollView
  • UIListView
  • UIPageView

When I used cocos2d-iphone there was just ScrollView with simple pagingEnabled option. Thats it and thats what I need and really strange why for this cocos it’s made so wrong…

985c7239ac0c4723

All worked perfect. And all bounce effects and scroll design(how it worked) was same as in iOS - perfect. Thats very wrong that for standard tasks I need to edit built in controls.

#19

Because of that. Cocos2d-x isn’t just for iOS and that’s why it shouldn’t only work like in iOS. No one on Android, Windows oder Linux would like to have a scrollView that’s feels like iOS.

But your “to many choices” for the widgets are right. This could be merged in the future, with options for the widget.

#20

Because they don’t understand what design is, and quality. Anyway it must be given to them so that they absorb at least a part of it… android and windows are product without design… specially how scroll works on android… omg, no comments.