Fade out end of text label strings that don't fit (instead of truncate)

Question

I'm not sure if "fade out" is the correct term to use, as it seems to refer to the animation effect a lot, but what I'd like to achieve can be seen in the address bar of the iPhone Safari app. When a URL is too long to display, the end of the string "faded out" rather than truncated with "...".

I thought this could be easily done by changing the Line Breaks setting from "Truncate Tail" to "Clip" in the XIB file and then using an image with transparency to create the effect. But setting to "Clip" seems to clip at the end of a word, rather than the middle of a word, or the middle of a letter even, as seen in Safari or Chrome for iPhone. This doesn't quite work for me, and it actually gives the impression that the text is complete, when upon closer inspection, the user will notice that the text doesn't make sense.

What's the best way to "fade out" strings that don't fit in text labels? Thanks in advance.

I would be surprised if they did anything special to the label for this - much more likely they're overlaying a gradient (either drawn in code or an image) — Carl Veazey, Aug 28 '12 at 07:34

score 6 · Accepted Answer · answered Aug 28 '12 at 09:10

6

Take a look at the Google Toolbox for Mac GTMFadeTruncatingLabel, which is a reusable component that does exactly this.

answered Aug 28 '12 at 09:10

smorgan

20,228
3
47
55

Hi smorgan, this seems like the right answer, but I'm pretty novice and am always a bit confused when people point me to things that are not a part of Apple's included frameworks. Do I just create a class and copy the code? Thanks for you answer. – James Aug 29 '12 at 13:11
You add the file directly to your project. – smorgan Sep 23 '12 at 06:19
I am late to comment on this but this doesn't really handle attributed string – MPG Dec 23 '14 at 19:18

score 2 · Answer 2 · edited May 23 '17 at 12:00

2

You could also use a combination of the category found here : (https://stackoverflow.com/a/24508153/2654425) and a gradient.

And do:

if([myLabel isTruncated]){

  CAGradientLayer *l = [CAGradientLayer layer];
            l.frame = myLabel.bounds;
            l.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
            l.startPoint = CGPointMake(1.f, .1f);
            l.endPoint = CGPointMake(0.95f, 1.0f);
            myLabel.layer.mask = l;



}

This works in iOS 7 & iOS8.

edited May 23 '17 at 12:00

Community

1
1

answered Feb 17 '15 at 10:15

DevC

6,982
9
45
80

in a multiline UILabel - fades out ALL lines, not the tail of text – Oleksii Nezhyborets Feb 23 '17 at 10:46
@OleksiiNezhyborets that is because this code adds it to the frame, not the text itself. – DevC Feb 25 '17 at 16:17

Fade out end of text label strings that don't fit (instead of truncate)

2 Answers2

Linked