淡化标签文本的结尾

Question

我有一个

UILabel

，我想淡化字符串的末尾，这将超出范围。对此有什么更好的解决方案？ 我应该计算标签的宽度，将其与字符串宽度进行比较，如果字符串宽度大于标签的宽度，我应该淡出最后两个字母吗？我到底应该怎么做？ 我希望这会很容易。请写出你的解决方案。谢谢！ 我更喜欢使用这种方法来计算宽度：

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

Answer 1

Swift 4.0 示例：

    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

结果：

Answer 2

您可以使用

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;

Answer 3

仅适用于layoutSubviews()方法

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
}

Answer 4

UILabel 的简单子类。它使用与之前的答案相同的想法：1，2，3。 我刚刚创建了完整的类，它更新属性更改时的淡入淡出。

class FadeTruncateLabel: UILabel {

    var fadeStart = 0.85 {
        didSet { _updateGradient() }
    }

    var fadeEnd = 1.0 {
        didSet { _updateGradient() }
    }

    lazy var gradientLayer: CAGradientLayer = { return CAGradientLayer() }()

    lazy var maskLayer: CALayer = {
        let _maskLayer = CALayer()
        _maskLayer.addSublayer(gradientLayer)
        return _maskLayer
    }()

    override var textColor: UIColor! {
        didSet { _updateGradient() }
    }

    override var text: String? {
        didSet { _updateFading() }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        _updateFading()
    }

    private var _isTruncated: Bool {
       frame.width < intrinsicContentSize.width
    }

    private func _updateFading() {
        if _isTruncated {
            lineBreakMode = .byClipping
            if gradientLayer.colors == nil {
                _updateGradient()
            }
            gradientLayer.frame = bounds
            maskLayer.frame = bounds
            layer.mask = maskLayer
        } else {
            layer.mask = nil
        }
    }

    private func _updateGradient() {
        gradientLayer.colors = [textColor.cgColor, UIColor.clear.cgColor]
        gradientLayer.startPoint = CGPoint(x: fadeStart, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: fadeEnd, y: 0.0)
    }
}

Answer 5

我找到了答案 - 我应该使用来自 google

的 GTMFadeTruncatingLabelTest 类

Answer 6

2023。典型的轮廓解决方案：

它不考虑语言方向，它假设背景是白色，等等

请注意，您必须明确决定并设置淡入淡出的长度，当然，该长度在整个应用程序中都是恒定的，您不能使用“文本宽度的.1”。这里我们使用标签的高度，效果很好。

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))
    }
}