A couple of weeks in the past, I used to be constructing a funds tracker with Compose and wanted a marquee textual content, or in different phrases, a part that might scroll the textual content if the textual content did not match inside its bounds.
Jetpack Compose does not present such a factor, so after some analysis I discovered this part.
It really works most often, however the code shouldn’t be that straightforward to know. In the present day we’ll overview the code to know the way it works and attempt to enhance it.
If the textual content matches inside its bounds, then the MarqueeText works like a standard Textual content part, if it does not, then one other Textual content The part is created to provide that cool hover impact.
we are able to see the MarqueeText the part has many fields, they’re virtually the identical fields as a standard part Textual content part has as a result of the marquee mainly wraps it. The one distinction is gradientEdgeColorwhich defines the colour on the part’s borders.
the createText lambda is used to create the Textual content part, is outlined as a lambda as a result of a number of cases of the Textual content the part may very well be created.
then the offset variable represents the x-offset of the primary textual content part, textLayoutInfoState is used to retailer details about the textual content and width of the container.
Within the subsequent half we now have the code that performs the animation.
You is likely to be asking “why was withFrameNanos used right here?” There are different methods to realize comparable conduct, however let’s perceive why withFrameNanos Specifically. Based on their documentation:
Suspended till a brand new body is requestedinstantly summon
onFramewith the body time in nanoseconds within the body ship calling context, then resumes with the results of onFrame.
frameTimeNanosmust be used when calculating frame-by-frame animation time deltas, as it may be normalized to the goal time for the body, not essentially a direct “now” worth.
As you may see, this perform sleeps till a brand new body is requested, which implies you may have an opportunity to replace your animation earlier than a brand new body is drawn.
When you have a 60fps display, meaning the display refreshes 60 occasions per second. If you happen to replace your animation 80 occasions per second, you might be losing assets as a result of some updates won’t ever draw. The identical applies if you happen to draw 15 occasions per second, the consumer will discover a jerky animation.
withFrameNanos solves that drawback by suspending till a brand new body is requested so you do not have to fret concerning the body charge of the display.
The next a part of the code makes use of a SubcomposeLayout to position the parts. It first begins by subcomposing the primary textual content part and measures it as if there have been no width restrictions. We have to do that to know whether or not or not the textual content will wrap inside the constraints.
Variables are then outlined for the gradient and the second textual content part, they are often overridden as a result of they is probably not wanted if the textual content conforms to their constraints.
If the textual content matches your constraints, then mainText is up to date to fill the utmost width. additionally units textLayoutInfoState to null in order that the animation doesn’t run.
If the textual content doesn’t match inside your constraints, the gradient and second textual content parts are set.
Lastly the parts are organized.
Initially, the marquee part appears complicated, however analyzing it little by little we are able to see that it isn’t that complicated.
Whereas doing this evaluation, I discovered some issues that may very well be improved within the code. I’ll solely point out just a few of the adjustments I made, if you wish to overview all of them, you will discover a hyperlink to the supply code on the finish of the article.
Inside LaunchedEffect block there are two whereas loops that look suspicious, the primary is whereas(true), it may be eliminated with out affecting something. the second is whereas (!animation.isFinishedFromNanos(playTime))as we all know animation by no means ends so i modified it to whereas (isActive)this returns true whereas Coroutine is lively.
I additionally eliminated the delay, I do not assume it’s a necessity for a marquee.
We will additionally change the MarqueeText part to comply with the slot sample. I created a brand new part known as Marquee and adjusted his signature to just accept any sort of content material.
That means you may go the Marquee any content material you need, even when it is not textual content.
That is the ultimate outcome
– Marquee with Jetpack Compose. Check out how to build and use a… | by Victor Brandalise | Nov, 2022
