如何从底部对齐 UILabel 文本？

Question

UILabel

如何从底部对齐。比方说，我的标签可以容纳三行文本。如果输入文本是单行，那么该行应该位于标签的底部。请参考下图以便更好地理解。橙色区域是标签的全框。目前它只有一行，并且居中对齐。所以我想要的是，无论有多少行，它都应该始终对齐底部。

请提出你的想法。

谢谢。

Answer 1

Swift 4.2 版本使用

contentMode

属性设置顶部和底部：

class VerticalAlignedLabel: UILabel {
    
    override func drawText(in rect: CGRect) {
        var newRect = rect
        switch contentMode {
        case .top:
            newRect.size.height = sizeThatFits(rect.size).height
        case .bottom:
            let height = sizeThatFits(rect.size).height
            newRect.origin.y += rect.size.height - height
            newRect.size.height = height
        default:
            ()
        }
        
        super.drawText(in: newRect)
    }
}

然后像这样设置标签：

let label = VerticalAlignedLabel()
label.contentMode = .bottom

Answer 2

这里有两种方法...

1. 首先将

numberOfLines

设置为 0，然后使用

sizeToFit

的

UILabel

属性，这样您的

UILabel

显示其

contentSize

.

yourLabel.numberOfLines = 0;

[yourLabel sizeToFit];

从此链接查看更多信息：Vertically align text within a UILabel

2. 另一种选择是采用

UITextField

而不是

UILabel

并将

userInteractionEnabled

设置为

NO

如下所示...

[yourTextField setUserInteractionEnabled:NO];

然后将

contentVerticalAlignment

属性设置为底部，如下所示...

[yourTextField setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];

更新

还有，用

UITextField

，我们无法实现多行。因此，我们可以使用

UITextView

并将其

userInteractionEnabled

设置为

NO

。然后，使用下面的代码使其底部对齐。

CGFloat topCorrect = ([label bounds].size.height - [label contentSize].height);
topCorrect = (topCorrect <0.0 ? 0.0 : topCorrect);
label.contentOffset = (CGPoint){.x = 0, .y = -topCorrect};

Answer 3

子类 UILabel

@interface Label : UILabel

@end

然后像这样覆盖 drawTextInRect

@implementation Label

- (void)drawTextInRect:(CGRect)rect
{
    if(alignment == top) {

        rect.size.height = [self sizeThatFits:rect.size].height;
    }

    if(alignment == bottom) {

        CGFloat height = [self sizeThatFits:rect.size].height;

        rect.origin.y += rect.size.height - height;
        rect.size.height = height;
    }

    [super drawTextInRect:rect];
}

@end

Answer 4

我只为 IB 中的超级视图设置了底部约束，这对我来说无需使用代码，也可以为最大约束设置行数。

Answer 5

我最近遇到了这个问题，并且能够通过将我的标签单独放在堆栈视图中来解决它。我从这个 post 得到了这个想法，它有同样的问题，但有多个标签。相同的技术可以用于单个标签。

stackview 将具有轴 = 水平和对齐 = 底部（这就是诀窍）。

我的标签现在与底部完美对齐，这正是我所需要的。

Answer 6

我有同样的问题。以下是我如何将文本与 UILabel 的底部对齐：

- (void)alignLabel:(UILabel *)l withText:(NSString *)text verticalAlignOption:(int)vertAlign{
CGSize stringSize = [text sizeWithFont:l.font constrainedToSize:l.frame.size lineBreakMode:l.lineBreakMode];

switch (vertAlign) {
    case 0: // align = top
        l.frame = CGRectMake(l.frame.origin.x,
                                   l.frame.origin.y,
                                   l.frame.size.width,
                                   stringSize.height
                                   );
        break;
    case 1: // align = bottom
        l.frame = CGRectMake(l.frame.origin.x,
                                   (l.frame.origin.y + l.frame.size.height) - stringSize.height,
                                   l.frame.size.width,
                                   stringSize.height
                                   );
        break;
    case 2: // align = middle
        // default
        break;
}

l.text = text;
}

Ahd 你简单地调用这样的方法来对齐到底部：

[self alignLabel:self.mediaTitle withText:@"My text to align" verticalAlignOption:1];

Answer 7

另一个选项：使用一个标签作为背景颜色，我称之为 originalLabel，另一个用于文本，在我的示例中称为 textLabel。然后计算textLabel的高度和Y坐标：

[textLabel sizeToFit];
int height = textLabel.frame.size.height;
int yCoord = originalLabel.frame.origin.y + 
          originalLabel.frame.size.height - height;
textLabel.frame = CGRectMake( originalLabel.frame.origin.x, yCoord,
          textLabel.frame.size.width, height);

Answer 8

在 IB 中，正如@Tobe 所说，对超级视图的底部约束应该起作用， 如果您有多个子视图或水平堆栈视图，其中一个元素具有底部约束，则使用 Layout Margin to be Fixed with bottom less than other margins

Answer 9

将您的 UILabel 放在垂直的 UIStackView 中，并将虚拟视图作为间隔物。 此外，将虚拟视图设置为较低的拥抱和压缩优先级。

从上到下：

• 标签
• 虚拟视图

从下到上：

• 虚拟视图
• 标签

Answer 10

Swift 5 版本的@Dustin 代码：

子类：

class VerticallyAlignedUILabel: UILabel {
    
    enum Alignment {
        case top
        case bottom
    }
    
    var alignment: Alignment = .top
    
    override func drawText(in rect: CGRect) {
        var rect = rect
        if alignment == .top {
            rect.size.height = sizeThatFits(rect.size).height
        } else if alignment == .bottom {
            let height = sizeThatFits(rect.size).height
            rect.origin.y += rect.size.height - height
            rect.size.height = height
        }
        super.drawText(in: rect)
    }
}

用法：

let myLabel = VerticallyAlignedUILabel()
myLabel.text = "vertically aligned text"
myLabel.alignment = .bottom

Answer 11

您可以继承

UILabel

并重写方法：

- (void)drawTextInRect:(CGRect)rect

调用超级

drawTextInRect

你想使用的地方。

Answer 12

2021. 使用自动布局）

textLabel.numberOfLines = 0
textLabel.textAlignment = .center

textLabel.topAnchor.constraint(greaterThanOrEqualTo: sView.topAnchor).isActive = true
textLabel.leadingAnchor.constraint(equalTo: sView.leadingAnchor).isActive = true
textLabel.trailingAnchor.constraint(equalTo: sView.trailingAnchor).isActive = true
textLabel.bottomAnchor.constraint(equalTo: sView.bottomAnchor).isActive = true