How the UILabel
can be aligned from bottom. Let say, my label can hold three line of text.If the input text is single line, then this line should come bottom of the label.Please refer the below image for better understanding. The orange area is the full frame of label.Currently it has one line and it is aligned center. So what I want is, it should always aligned bottom regardless of how many lines.
Please suggest your ideas.
Thank you.
Here are two ways of doing that...
1. First set numberOfLines
to 0 and then use sizeToFit
property of UILabel
so your UILabel
display with its contentSize
.
yourLabel.numberOfLines = 0;
[yourLabel sizeToFit];
See more information from this link: Vertically align text within a UILabel
2. Another option is to take UITextField
instead of UILabel
and set userInteractionEnabled
to NO
like below...
[yourTextField setUserInteractionEnabled:NO];
and then set the contentVerticalAlignment
property to bottom like below...
[yourTextField setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
UPDATE
Also, with UITextField
, we can't achieve multiple lines. So instead we can use UITextView
and set its userInteractionEnabled
to NO
. Then, use the code below to make it bottom aligned.
CGFloat topCorrect = ([label bounds].size.height - [label contentSize].height);
topCorrect = (topCorrect <0.0 ? 0.0 : topCorrect);
label.contentOffset = (CGPoint){.x = 0, .y = -topCorrect};
Swift 4.2 version using the contentMode
property to set top and bottom:
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)
}
}
Then setup your label like that:
let label = VerticalAlignedLabel()
label.contentMode = .bottom
Subclass UILabel
@interface Label : UILabel
@end
Then override drawTextInRect like so
@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
我只为 IB 中的超级视图设置了一个底部约束,这对我有用,而无需使用代码以及最大约束的行数。
I recently ran into this problem and was able to solve it by putting my label in a stackview by itself. I got the idea from this post which had the same question but with multiple labels. The same technique can be used with a single label.
The stackview would have axis = horizontal and alignment = bottom (which is what does the trick).
My label is now perfectly aligned towards the bottom which is what I needed.
I had the same issue. Here is how I made to align the text to the bottom of my 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 you simple call the method like this to align to the bottom:
[self alignLabel:self.mediaTitle withText:@"My text to align" verticalAlignOption:1];
Another option: use one label for your background color, I call this one originalLabel, and another for the text, called textLabel in my example. Then calculate the height and Y coordinate for textLabel:
[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);
Put your UILabel in a vertical UIStackView with a dummy view as a spacer. Also, set the dummy view with a lower hugging and compression priority.
Top to Bottom:
Bottom to Top:
You can subclass UILabel
and overriding the method :
- (void)drawTextInRect:(CGRect)rect
call super drawTextInRect
with the rect where you want to use.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.