Fade the end of a label text

Question

I have one UILabel, and i want to fade the end of the string, that is going to be out of bounds. What is the better solution for this? Should i calculate the width of the label, compare it with the string width, and if string width is bigger than label's, i should fade last two letters? How exactly should i do that? I hope it will be easy. Please write your solutions. Thanks! I prefer to use this method for calculating the width:

CGRect labelRect = [text
                    boundingRectWithSize:labelSize
                    options:NSStringDrawingUsesLineFragmentOrigin
                    attributes:@{
                     NSFontAttributeName : [UIFont systemFontOfSize:14]
                    }
                    context:nil];

briefly, masking the view with a gradient image and set `clipToBounds` to true. — holex, Jun 23 '14 at 12:01
I think you are looking for "http://stackoverflow.com/questions/3786528/iphone-ipad-how-exactly-use-nsattributedstring" — Yogendra, Jun 23 '14 at 12:06

score 4 · Answer 1 · answered Jun 23 '14 at 13:16

4

You can fade one line label using CAGradientLayer

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

Sample fade label

answered Jun 23 '14 at 13:16

avdyushin

1,906
17
21

I am trying to do this in button but not able to do this. Could you please check? – Saty Mar 29 '17 at 11:29
using a fixed 0.95 is very poor or wrong; it will be far too short in many cases – Fattie Feb 13 '23 at 19:14

score 4 · Accepted Answer · answered Nov 15 '17 at 11:50

4

Swift 4.0 example:

    let gradient = CAGradientLayer()

    gradient.frame      = titleLabel.bounds
    gradient.colors     = [UIColor.white.cgColor, UIColor.clear.cgColor]
    gradient.startPoint = CGPoint(x: 0.1, y: 0.0)
    gradient.endPoint   = CGPoint(x: 0.95, y: 0.0)

    label.lineBreakMode = .byClipping
    label.layer.mask = gradient

result:

answered Nov 15 '17 at 11:50

pchelnikov

425
6
6

using a fixed 0.95 is very poor or wrong; it will be far too short in many cases – Fattie Feb 13 '23 at 19:14

score 0 · Answer 3 · answered Jun 16 '19 at 17:39

Works only from layoutSubviews() method

override func layoutSubviews() {
    super.layoutSubviews()

    let maskLayer = CALayer()
    maskLayer.frame = label.bounds

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = label.bounds
    gradientLayer.colors = [UIColor.white.cgColor, UIColor.clear.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.7, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 0.95, y: 0.0)

    maskLayer.addSublayer(gradientLayer)
    label.layer.mask = maskLayer
}

completely wrong. it will add the new layers every time! – Fattie Feb 13 '23 at 19:13 — Fattie, Feb 13 '23 at 19:13

score 0 · Answer 4 · answered Feb 13 '23 at 20:17

2023. Typical OUTLINE solution:

It does not take in to account language direction, it assumes background is white, etc etc.

Note that you have to explicitly decide on and set the length of the fade, which, of course, will be constant through out the app, you can't use ".1 of the width of the text". Here we use the height of the label which works well.

class FadeyLabel: UIILabel {
    
    lazy var fade: CAGradientLayer = {
        let g = CAGradientLayer()
        g.colors = [UIColor.white.withAlphaComponent(0).cgColor,
            UIColor.white.withAlphaComponent(1).cgColor]
        g.startPoint = CGPoint(x: 0, y: 0)
        g.endPoint = CGPoint(x: 1, y: 0)
        layer.addSublayer(g)
        return g
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        fade.frame = CGRect(
            origin: CGPoint(x: bounds.width - bounds.height, y: 0),
            size: CGSize(width: bounds.height, height: bounds.height))
    }
}

score -1 · Answer 5 · edited Nov 15 '17 at 13:15

-1

I've found the answer - i should use GTMFadeTruncatingLabelTest class from google

edited Nov 15 '17 at 13:15

Neeraj Kumar

771
2
16
37

answered Jun 23 '14 at 13:05

mikezs

410
1
8
16

Fade the end of a label text

5 Answers5

2023. Typical OUTLINE solution:

Linked