Hi all,
I’m vainly trying to get wrapped lines in ui::Text widget which is put in the ui::SrollView layout.
I intent to scroll it vertically and have the Text wide equally to ScrollView. But the text never wraps.
Any help is appreciated. I lost few day already… Thanks a lot.
Thank you,
that is exactly what I found. I hoped to get such result in ScrollView too.
It never wraps regardless of settings on ScrollView and Text widget, regardless of order of all settings…
Zbynek
this is part of init() in my Layer derived from cocos2d::Layer
I keep trying to modify the settings like switching on/off ignoreContentAdaptWithSize etc.
this->defaultFontSize = visibleSize.height/13.0;
Size scollFrameSize = Size(visibleSize.width*0.7f, visibleSize.height * 0.6 );
auto scrollView = cocos2d::ui::ScrollView::create();
scrollView->setBackGroundColorType(Layout::BackGroundColorType::SOLID);
scrollView->setBackGroundColor(Color3B(150, 150, 200));
scrollView->setSize(scollFrameSize);
scrollView->setPosition(Point( visibleSize.width * 0.1f, visibleSize.height * 0.15f));
scrollView->setDirection(ui::ScrollView::Direction::VERTICAL);
scrollView->setClippingEnabled(true); //
auto containerSize = Size(scollFrameSize.width, 100);
scrollView->setInnerContainerSize(containerSize);
scrollView->setLayoutType(LAYOUT_LINEAR_VERTICAL);
scrollView->setTag(TAG__chat__chatScrollView);
auto textWidget = Text::create("Hello jak Jůlie olejuje koleje strč prst skrz krk.", "Marker Felt", this->defaultFontSize);
textWidget->ignoreContentAdaptWithSize(true);
textWidget->setColor(Color3B(240, 240, 255));
//textWidget->setContentSize(Size(scollFrameSize.width, 0));
textWidget->setTextHorizontalAlignment(TextHAlignment::LEFT);
textWidget->setTextVerticalAlignment(TextVAlignment::CENTER);
auto param1 = LinearLayoutParameter::create();
param1->setGravity(LINEAR_GRAVITY_LEFT);
param1->setMargin(Margin(0, 5, 0, 5));
textWidget->setLayoutParameter(param1);
scrollView->addChild(textWidget);
textWidget->setTag(-1);Setting a TextAreaSize with a zero height also did not help…
textWidget->ignoreContentAdaptWithSize(false);
textWidget->setTextAreaSize(Size(scollFrameSize.width, 0));
Why is your inner container height smaller than your scrollView? Or is 100 equal/bigger than the scrolling view height?
Scrolling will only work, if the inner container is equal or bigger than the scroll view.
I found the solution.
You have to set the content size of the text, as in my original link.
As long as a single word in the text is smaller or equal to the scroll view/text content size. it will wrap it:
ui::ScrollView* scrollView = ui::ScrollView::create();
scrollView->setDirection(ui::ScrollView::Direction::VERTICAL);
scrollView->setTouchEnabled(true);
scrollView->setBounceEnabled(true);
scrollView->setContentSize(Size(400, 400));
scrollView->setInnerContainerSize(Size(400, 800));
scrollView->setPosition(Vec2(centerX, centerY));
scrollView->setBackGroundColor(Color3B(150, 150, 200));
scrollView->setBackGroundColorType(ui::ScrollView::BackGroundColorType::SOLID);
auto textWidget = ui::Text::create();
textWidget->setText("TextArea widget can line wrap start blabla fubar hello world");
textWidget->setTextHorizontalAlignment(TextHAlignment::LEFT);
textWidget->ignoreContentAdaptWithSize(false);
textWidget->setFontName("Marker Felt");
textWidget->setFontSize(32);
textWidget->setColor(Color3B::RED);
textWidget->setPosition(Vec2(200, 600));
textWidget->setContentSize(Size(400, 400));
scrollView->addChild(textWidget);
You can also use setSize instead of setContentSize.
Don’t set it to zero, but the height of your scroll view and it will work perfectly.
Thank you very much!
I surely tried to use setContetSize too. But probably inspired by CCLabelTTF I used height only set to zero to force the wrapping. So, it helped to set the height of Text widget enough to fit more lines in it. Thank you.
I also experiment with sizes of innerContainer of ScrollView as well as of Label since I put more Labels to ScrollView dynamically and moreover I try to resize some of them in run while some Texts changes. And require some re-fitting and scrolling of view. Well, I expect some other issues…
Zbynek
I have got another issue… Perhaps experienced developer could know answer since I found the Text widget uses “old” cocos Label as an renderer and many developers know to use it perfectly.
My issue is:
I change the string in the “multiline” Text widget with fixed width. I need to determine the new height that should be set to the widget while keeping width fixed to show all lines of whole string (auto-wrapped).
Trying to getContentSize, getBoudingBox.size, getTextAreaSize, getVirtualRendererSize … it seems all returns the same size which does not correspond to new string.
May be I need use some “tricks” with renderer or textures?
If I used LabelTTF instead of ui::Text and set zero height to its size it stretches the height automatically which is wonderful. Unfortunately if using LabelTTF I can not use LayoutParameters for layouting more labels in ScrollView. This is the reason I do not use so far LabelTTFs but Text widgets…
Please, can I determine the necessary height of multi-line Text widget after/before changing its string?
Thanks a lot.
Zbynek
Solved.
May be it is not the optimal, but it works.
When I need change the string into multi-line Text widget I create a temporal Label
Label::createWithSystemFont with same font and fontsize as in my Text widget, and with a dimension set with zero for height and same width as my scrollView (same as width of my Text widget).
Immediately after creation I read its contentSize which I use then to set contentSize of my “live” Text widget. It resizes correctly and shows all the string in multiple lines.
Thank you.
I know it’s and old post, but today I had the same problem and I think there’s no solution yet.
Your workaround is really good.
do not call textWidget->ignoreContentAdaptWithSize(false);
call setTextAreaSize instead of setContentSize
For example: textWidget->setTextAreaSize(Size(100, 0))
Please see this:
Added three overflow type to new label: CLAMP, SHRINK, RESIZE_HEIGHT.
Overflow type is used to control label overflow result, In SHRINK mode, the font size will change dynamically to adapt the content size. In CLAMP mode, when label content goes out of the bounding box, it will be clipped, In RESIZE_HEIGHT mode, you can only change the width of label and the height is changed automatically. For example:
//Change the label’s Overflow type
label->setOverflow(Label::Overflow::RESIZE_HEIGHT);