对齐UILabel中不同大小的文本

如何在UILabel中对齐不同大小的文本? 一个例子是在价格横幅上将较小尺寸的美元数量与较大尺寸的美元数量对齐。

iOS6中的UILabel支持NSAttributedString ,它允许我在同一个UILabel中使用不同大小的文本。 但它似乎没有用于顶部对齐文本的属性。 有什么选择来实现这个? 在我看来,提供自定义绘图逻辑来根据自定义属性字符串键进行顶部对齐可能是最好的,但我不知道如何去做。


我能够使用单个标签实现您想要的结果。

使用一个小数学,你可以抵消较小文本的基线,以达到你想要的结果。

Objective-C的

- (NSMutableAttributedString *)styleSalePriceLabel:(NSString *)salePrice withFont:(UIFont *)font
{
    if ([salePrice rangeOfString:@"."].location == NSNotFound) {
        return [[NSMutableAttributedString alloc] initWithString:salePrice];
    } else {
        NSRange range = [salePrice rangeOfString:@"."];
        range.length = (salePrice.length - range.location);
        NSMutableAttributedString *stylizedPriceLabel = [[NSMutableAttributedString alloc] initWithString:salePrice];
        UIFont *smallFont = [UIFont fontWithName:font.fontName size:(font.pointSize / 2)];
        NSNumber *offsetAmount = @(font.capHeight - smallFont.capHeight);
        [stylizedPriceLabel addAttribute:NSFontAttributeName value:smallFont range:range];
        [stylizedPriceLabel addAttribute:NSBaselineOffsetAttributeName value:offsetAmount range:range];
        return stylizedPriceLabel;
    }
}

迅速

extension Range where Bound == String.Index {
    func asNSRange() -> NSRange {
        let location = self.lowerBound.encodedOffset
        let length = self.lowerBound.encodedOffset - self.upperBound.encodedOffset
        return NSRange(location: location, length: length)
    }
}

extension String {
    func asStylizedPrice(using font: UIFont) -> NSMutableAttributedString {
        let stylizedPrice = NSMutableAttributedString(string: self, attributes: [.font: font])

        guard var changeRange = self.range(of: ".")?.asNSRange() else {
            return stylizedPrice
        }

        changeRange.length = self.count - changeRange.location
        // forgive the force unwrapping
        let changeFont = UIFont(name: font.fontName, size: (font.pointSize / 2))!
        let offset = font.capHeight - changeFont.capHeight
        stylizedPrice.addAttribute(.font, value: changeFont, range: changeRange)
        stylizedPrice.addAttribute(.baselineOffset, value: offset, range: changeRange)
        return stylizedPrice
    }
}

这产生以下结果:


试图简单地通过对齐帧起源的方式来做到这一点的问题是,“普通”字符通常最终会在它们周围留下一些额外的填充,因为标签必须容纳所有字体的字符,包括字符高的上行和长的下行。 你会发现在你发布的图片中,如果较小的“99”是一个单独的标签,被设置为与较大文本相同的原点,则由于美元符号的最高点,它会太高。

幸运的是, UIFont向我们提供了我们需要的所有信息来正确执行此操作。 我们需要测量标签正在使用的空的上行空间,并调整相对位置来解决它,如下所示:

//Make sure the labels hug their contents
[self.bigTextLabel sizeToFit];
[self.smallTextLabel sizeToFit];

//Figure out the "blank" space above normal character height for the big text
UIFont *bigFont = self.bigTextLabel.font;
CGFloat bigAscenderSpace = (bigFont.ascender - bigFont.capHeight);

//Move the small text down by that ammount
CGFloat smallTextOrigin = CGRectGetMinY(self.bigTextLabel.frame) + bigAscenderSpace;

//Figure out the "blank" space above normal character height for the little text
UIFont *smallFont = self.smallTextLabel.font;
CGFloat smallAscenderSpace = smallFont.ascender - smallFont.capHeight;

//Move the small text back up by that ammount
smallTextOrigin -= smallAscenderSpace;

//Actually assign the frames
CGRect smallTextFrame = self.smallTextLabel.frame;
smallTextFrame.origin.y = smallTextOrigin;
self.smallTextLabel.frame = smallTextFrame;

(这段代码假设你有两个分别名为bigTextLabelsmallTextLabel标签属性)


编辑:

这样做没有两个标签是非常相似的。 你可以使用-drawInRect:options:context: method(确保在你的选项中使用NSStringDrawingUsesLineFragmentOrigin )来制作一个自定义的UIView子类并在其中绘制NSAttributedStrings 。 计算顶部对齐方式的数学应该是相同的,唯一的区别是您通过NSFontAttributeName属性(而不是标签)从属性字符串获取字体。 2012年的WWDC视频归属字符串绘图是一个很好的参考。


这太糟糕了。 我没有足够的信誉来评论经过一些修改后使用得很好的答案。 我只想指出,使用smallfont而不是font ,这可能是一个错字。

以下是修改后的代码

- (NSMutableAttributedString *)styleSalePriceLabel:(NSString *)salePrice withFont:(UIFont *)font
{
    if ([salePrice rangeOfString:@"."].location == NSNotFound) {
        return [[NSMutableAttributedString alloc]  
                   initWithString:salePrice];
    } else {
        NSRange range = [salePrice rangeOfString:@"."];
        range.length = (salePrice.length - range.location);
        NSMutableAttributedString *stylizedPriceLabel =
            [[NSMutableAttributedString alloc] initWithString:salePrice];
        UIFont *smallfont = [UIFont fontWithName:font.fontName 
                                            size:(font.pointSize / 2)];
        NSNumber *offsetAmount = @(font.capHeight - smallfont.capHeight);
        [stylizedPriceLabel addAttribute:NSFontAttributeName 
                                   value:smallfont 
                                   range:range];
        [stylizedPriceLabel addAttribute:NSBaselineOffsetAttributeName 
                                   value:offsetAmount 
                                   range:range];
        return stylizedPriceLabel;
    }
}
链接地址: http://www.djcxy.com/p/28189.html

上一篇: aligning text of different sizes within a UILabel

下一篇: How to align UILabel text from bottom?