Locate textual content overflow in Jetpack Compose | through Sinan Kozak | Jan, 2022


Sinan Kozak

Texts are advanced UI parts. When they do not are compatible the display, it’s imaginable to turn overflow dots however then a part of the guidelines is misplaced. The person must be knowledgeable about knowledge that do not are compatible the display. We will be able to display ‘Display extra’ button, conversation or toast. There’s no easiest apply to turn hidden textual content.

Relating to our actual property app, we now have an UI part that presentations decided on districts of the present seek. When there are extra parts that the view can show, it wishes to turn overflow dots and a depend badge for what number of different pieces don’t seem to be visual to the person.

The former View-based UI part isn’t sensible about badge depend. We did not make investments time to create a customized view or a dynamic good judgment for calculating depend.

The view merely confirmed the primary two districts and conceal the remainder of the districts statically. The badge confirmed the full collection of districts minus two. That implementation was once a ways from ultimate however it labored for many of the instrument sizes, with the exception of pills, small telephones, panorama and extra…

The preliminary resolution was once no longer adaptive. Imposing a customized view was once all the time imaginable however trying out and verifying the format with out operating the applying wasn’t simply imaginable.

Now it’s time for us to rewrite the similar part in Compose and Compose we could us create reusable customized UI parts a lot more uncomplicated than the legacy view gadget.

As a reusable view part, I be expecting this UI part may just calculate badge depend relying on the place overflow begins. Badge good judgment isn’t trade good judgment however moderately a view layer good judgment. If the display has extra width, the view will have to deal with itself and replace the badge with none exterior lend a hand.

Textual content Composable has onTextLayout callback that is named with the results of textual content rendering main points.

Since compose is far more versatile and customizable, as a substitute of getting to write down a customized view workforce we will fairly regulate the Textual content composable and hook it up into the onTextLayout callback.

TextLayoutResult hasgetLineEnd manner that returns the top index of rendered textual content.

Calling manner with visibleEnd = true returns the top index of rendered textual content. Default is false and through default, this technique returns the closing index of the handed textual content price, no longer the visual finish end result.

In onTextLayout callback, we will do the specified calculation and replace the badgeCount state. badgeCount can be utilized to render the Badge dynamically.

This code block is reusable and can use all to be had house at the display. If there isn’t enough room, it’ll display text-overflow and a knowledge badge about what number of different choices are hidden as a result of overflow.

Complete code for badge good judgment is to be had at https://gist.github.com/kozaxinan/77dfbc9a0e1adf729e16a984d5af0da5

Particular because of Anna Morgiel, Konstantin Otte, Fabian Shallari, Szymon Kamycki, Oleksi Ustenko and Andrii Dmytrenko for his or her feedbacks.



Supply hyperlink

Leave a Reply

Your email address will not be published.

Back To Top