Multi tool use

Update UILabel Text Animation

I have a question regarding how to animate the text then the user likes a post in apps like Facebook and Instagram. I don't have any video to describe this but the general idea is not to change any other text then the digits that need to be changed (try liking a post in Instagram, no text except the characters changed are affected). Currently in my app all the text updates when the user likes the post and it looks really ugly.

Here is the current state of animation:

https://imgur.com/a/LRLmOzM

Does anyone have like an extension to help with my problem or maybe a piece of code that's proven to work in Swift 4?

Thanks in advance!

1 Answer
1

The issue appears because the width of each numbers is different. Usually, a 0 is wider than a 1. That's the case for most of the usual fonts, but not the monospace ones.

0

1

The solution then is to use a monospace font for the numbers.

Note that for the rest of the text, you can use the "normal" font. To mix different fonts inside a single label, use NSAttributedString.

NSAttributedString

But, another thought if you don't want the second text to move at all, is to use 2 labels instead, and use it this way:

[------numberLabel][restOfTextLabel------]
Where, numberLabel has a right alignement, restOfTextLabel has a left alignement.
What's the logic? When you go from 9 to 10, you'll add a new character, so you'll get that moving label. Instead, put the width of numberLabel to be at least two characters (of the monospace font) width.
Now, you want to go up to hundreds? Add too. etc.
Maybe you want to handle thousands with a "k"? etc.

restOfTextLabel

numberLabel

Just ask you this for the UI:
Does n digits to n+1 digits happen a lot? The second part won't move that much. is is bearable?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.