PageView how to use?

Did you ever seen Material Design? Android had a good design language. The iOS Guidelines are a joke compared to that.

But I don’t want to argue with you…

PS: Quality is the best joke I’ve heard about Apple the last weeks - “Login with root without password” is really a proof, that their quality is unbeatable.

If you need to use PageView there is a hack you can use. Create a class called something like PageViewCustom and use this:

PageViewCustom.h

#include "ui/CocosGUI.h"
using namespace cocos2d::ui;

class PageViewCustom : public PageView {
public:
    CREATE_FUNC(PageViewCustom);

protected:
    virtual void remedyLayoutParameter(Widget *item);
};

PageViewCustom.cpp

#include "PageViewCustom.h"

void PageViewCustom::remedyLayoutParameter(cocos2d::ui::Widget *item) {
    ListView::remedyLayoutParameter(item);
}

Now just use PageViewCustom::create() instead of PageView::create(). This will prevent the PageView from resizing your Layout nodes. Just set your Layout nodes to half the width of your PageView (that is, your PageViewCustom) and you should get the effect you want.

1 Like

I just finished such class :slight_smile: 5 min later I waned to write here.
Yes, it’s works, but another problem:

From right side, when PageView bounces - it’s jumps somewhere random position in the list…

It does not do this for me. What else has changed with your code?

Well, looks like nothing… it’s same code as in 1-st post, except it ofc uses PageViewCustom now.
Also, I’m adding 16 items. and some misc: setItemsMargin(35.0f); items size is 52px square.

Just checked, added up to 8 items - no problems, but with 9+ items I got this bounce back problem.

Odd. I have a 300x130 PageViewCustom with items margin set to 35 and 16 Layout nodes added with a size of 52x52, and I am not getting this issue.

Hmm… thats very strange, I’m now moved my code(from the actual game, as was gif example showed) to UIPageViewTest and just edited source main PageView.cpp and disabled item->setContentSize(this->getContentSize());
and got no problems there too…

Upd: found code to reproduce issue(my bad with sizes, tweaked code from my game for diff size):

// Create the page view
    Size pageViewSize(209.1, 70.0);
    Size pageSize(26, 26);
    
    PageView* pageView = PageView::create();
    pageView->setDirection(PageView::Direction::HORIZONTAL);
    pageView->setContentSize(pageViewSize);        
    pageView->setBounceEnabled(true);
    Size backgroundSize = background->getContentSize();
    pageView->setPosition((widgetSize - pageView->getContentSize()) / 2.0f);
    pageView->setItemsMargin(35);
    pageView->removeAllItems();
    pageView->setGlobalZOrder(200);

    for (int i = 1; i < 10; ++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);

I think it’s something with pageViewSize…

1 Like

Also, I’ve added debug for center

LayerColor *layer = LayerColor::create(Color4B(0, 255, 0, 255), 2, 2);
layer->setPosition(Vec2(pageView->getPosition().x + pageView->getContentSize().width * 0.5, pageView->getPosition().y + 50.0));
_uiLayer->addChild(layer);

and notice that center view is not centered… which should be: setMagneticType(MagneticType::CENTER);

Another bug of this component as I see. One screen shoot from my game scene and other from tests.
It’s clearly noticeable not centered item.

LayerColor (and Layer) has an anchor point of (0, 0). Try this and see if it fixes it:

layer->setAnchorPoint(Vec2(.5f, .5f));
layer->setIgnoreAnchorPointForPosition(false);
1 Like

I just ised it for debug, for my game there are noticeable not centered problem compare to other items. I can use just maybe some sprite for debug, but I just want to say that problem is there. I have small items and it’s more noticeable.

upd: found some specific scale for node in my game. Fixed it and now everything ok, center was not a problem with PageView.
So almost fixed buggy built in class :slight_smile: That glitch with jumping to some page…

This topic is now closed due to the off topic posts and memes I had to delete. Please do not start another topic about this unless if becomes relevant again.

I’ll re-open this topic since @anon98020523 still has concerns related to it. Let’s keep the posts on topic. This means about PageView.

This bug scroll jumps glitch from the end https://github.com/cocos2d/cocos2d-x/issues/18616
Is still there, Jan 9.
Anyone know how to fix? Any engine developers are even checked&reproduced this?
There are some pull request even attempting to fix this, and it’s almost fixed, just page scrolls too slow from the right part. https://github.com/cocos2d/cocos2d-x/pull/18650

In a general sense how would one go about creating this with ui::listview? Specifically the angled views of the 2 objects on the side and shadowing?

@tbot9000 I have just implemented similar effect to the one with the “coins” with PageView (it may be also done with ListView). First of all you need to get the position of the “current” page - this is your “reference” position. Then, based on this position and distance between the current position and the target position you calculate the “percentage” offset. If view is the current view then offset is 100%. If is not current (any other) offset is 0%. This value is enough to set any effect you want. Ah… all the calculations are done in “update(dt)” method, so you will also get this “smooth” effect. This is the idea I am using and I decided to share, because I was also looking for it :slight_smile:

Can you show the code of PageView effect ? Look very nice.

Sure, sorry for the late reply.

  1. Add all your pages to PageView (_pagesView) and store them in helper “_pages” vector.

In my case I put nodes additionaly into Layout node and then to PageView.

  1. Save the position of the current page for later.

auto currentPage = _pagesView->getItem(_pagesView->getCurrentPageIndex());
_pageCurrentPosition = currentPage->getParent()->convertToWorldSpace(currentPage->getPosition());

Call scheduleUpdate().

  1. update(float dt)

     float factor = 1.0f;
    
     for (auto it = _pages.begin(); it != _pages.end(); ++it)
     {
         auto page = (*it);
         auto pos = page->getParent()->convertToWorldSpace(page->getPosition());
    
         float delta = abs(pos.x - _pageCurrentPosition.x);
         if (delta >= _pageSize.width)
         {
             factor = TARGET_SCALE;
         }
         else
         {
             factor = 1.0f - delta / _pageSize.width * (1.0f - TARGET_SCALE);
         }
    
         // Get the child you want to scale/modify based on the factor.
         page->getChildByTag(PAGE_CONTENT_TAG)->setScale(factor);
     }
    

TARGET_SCALE is the scale of any other page than the current one.

Of course you can “extend” it. For example you can calculate factor based on the full size of the _pagesView etc. Calculated factor gives you a lot of possibilites how to animate views. Here I just scale views.

That’s it.