About AttrText scrolling string problem

Question

Hello, I want the string in AttrText to perform scrolling animation when it exceeds the visual width. If it doesn't exceed the visual width, don't scroll.

ex:

How do I get the width of the AttrText display string so that I can perform a scroll animation based on this information?

Or is there a better way to achieve the effect I want?

 

Answer 1

Hello jay.lin,

since Attributed Text view includes diverse configuration attributes affecting the layout of the text, there is no method to query a width. It works other way around -> you specify the expected width and the Attributed Text view layouts the text, the paragraphs, the columns, etc. to fit within this width.

Depending on your application case, following approaches are possible:

1. Use the regular Text view instead of Attributed Text view. It permits you to query the area occupied by the text. See also the section Arrange other views on the content of the Text view. In particular the method GetContentArea() would provide the desired information.

2. Use the methods of the Resources::Font class to calculate the area needed to display some text (e.g. "Unknown (Title)"). Use the font object associated to the Attributed Text view when calculating the area. To calculate the text width, the appropriate method could GetTextExtent().

Once you know the width of the text you can configure a Move Point Effect to perform the scrolling animation. For example:

// The estimated width of the text.
var int32 width = ...

// Configure a point effect to run forth and back in the specified range
// animating the 'ScrollOffset' property of the Text view. One cycle takes
// 1 sec.
PointEffect.Value1        = <0,0>;
PointEffect.Value2        = point( Text.Bounds.w - width, 0 );
PointEffect.Outlet        = ^Text.ScrollOffset;
PointEffect.Symmetric     = true;
PointEffect.NoOfCycles    = 0;
PointEffect.CycleDuration = 1000;
PointEffect.Enabled       = true;

Assuming you have a PointEffect object added to the component, the above code can be implemented within a method which should start the effect (for example, when the text content changes). Alternative, most of the configuration parameters can also be specified more conveniently in the Inspector window:

... then when the content of the Text vie changes, just update the value range for the animations effect:

// The estimated width of the text.
var int32 width = ...

PointEffect.Value2 = point( Text.Bounds.w - width, 0 );

I hope it helps you further.

Best regards

Paul Banach

Comments

Hi Paul

Thank you for your answer. Since different fonts need to be displayed at the same time, the AttrText component was selected.

I would try using GetTextExtent() function for width calculation.

 

Thanks.

---

Hello jay.lin,

I have other idea permitting the calculation even with an Attributed Text. The Attributed Text supports so-called 'links'. These are regular parts of the text you can additionally evaluate outside the Attributed Text and use to detect taps or clicks, etc. or to simply arrange decorations at the specified areas. Maybe it helps you:

Step 1. Assuming you want to estimate the width of the entire text, then enclose the string between a pair of {lnk:0} and {lnk} attributes. The value 0 is just a dummy. It can be any name identifying the link. For example "{lnk:0}{fnt0}Text 1{fnt1}Text 2 with other font{lnk}". See also the section Add links for more details concerning these attributes.

Step 2. Use the methods described in the section Arrange other views on the content of the Attributed Text view to query the link areas. In the simplest case you can use the method GetLinkUnion(0) to get a rectangle enclosing all text fragments belonging to the first link.

Step 3. To get the width of the text, just evaluate w of the value returned by GetLinkUnion().

One note concerning this approach: If the text is wider than the width of the Attributed Text view, the text is broken in multiple rows. The width returned by GetLinkUnion() is therefore smaller. To correctly calculate the width you would need to perform the operation on an Attributed Text view wide enough for the longest text.

Well I hope it helps you further.

Best regards

Paul Banach

 

---

Hi Paul

 

This method is more flexible than calculating the width of each character individually and then adding them together.

I will try to use {lnk:} to calculate the string width

 

Thank you for your help.