Top aligned UILabel, make text stick to top of label view -ios

Question

Is there a way to "top align" a UILabel, that is make text stick to top of label view? As opposed to center aligned vertically, or float in the center of the view, as is the default?

Here is an image of three labels, aligned left, right and center, and a UITextView that is aligned center and top. The text of the textView sticks to the top regardless of the vertical size of the view. Can I do the same thing with a label?

enter image description here

Here's an answer I gave to a similar question: http://stackoverflow.com/questions/1054558/vertically-align-text-within-a-uilabel/1054681#1054681 — nevan king, Aug 08 '12 at 14:59
This link did it for me. Thanks nevan king! Anyone having the same issue as me can go to the link above, or check out my answer below, and I think you will find the solution. — OWolf, Aug 09 '12 at 01:39

score 39 · Answer 1 · answered Oct 29 '14 at 14:08

39

There's a workaround for it:

Set a height & width constraint to your UILabel with a constant <= to the maximum height|width you want.
Set number of lines to zero.
Set the height in storyboard to fit only one line.
In your code after setting the text of UILabel call sizeToFit.

This would make your UILabel to resize within the bounds of the maximum width & height you want and text will always be top aligned.

answered Oct 29 '14 at 14:08

AboulEinein

1,101
3
13
27

Also setting the constraint for the height to >= whatever the original height was will allow the label to grow and stay upper left with the text in the container. – TomG103 Jan 27 '15 at 21:08
Ran into this with a `UICollectionViewCell`. The regular sizeToFit wasn't working. Your autolayout suggestion worked in this instance. Thanks! – Mark Suman Aug 18 '16 at 20:39
1

Thanks for your post, it works like a charm on iOS 11 for those who wonder :) – Remy San Sep 21 '17 at 13:36
make sure you use <= not just set = to a value less than the maximum height. I was not getting this but now it works – MrAn3 Jan 28 '18 at 21:57
what do u mean by step 1 and step 3? – MRizwan33 Apr 02 '18 at 07:41
doing this after setting one parameter in android studio for same effect feels bad – Vadim Mar 29 '19 at 09:45
what if we don't want to change uilabel height ? – Ryan110 Apr 18 '23 at 16:30

score 12 · Answer 2 · edited May 23 '17 at 11:46

I used the answer linked above from nevan king in a comment to my question: Vertically align text to top within a UILabel

The code I used is here:

- (void)setUILabelTextWithVerticalAlignTop:(NSString *)theText {
    CGSize labelSize = CGSizeMake(250, 300);
    CGSize theStringSize = [theText sizeWithFont:targetLabel.font constrainedToSize:labelSize lineBreakMode:targetLabel.lineBreakMode];
    targetLabel.frame = CGRectMake(targetLabel.frame.origin.x, targetLabel.frame.origin.y, theStringSize.width, theStringSize.height);
    targetLabel.text = theText;
}

//linked to a button that sets the text from a UITextView to the label.
- (IBAction)setText:(id)sender {

    [sourceText resignFirstResponder];
    [self setUILabelTextWithVerticalAlignTop:sourceText.text];
    [targetLabel setNumberOfLines:0];
    [targetLabel sizeToFit];

}

Here is the project:

owolf.net/uploads/StackOverflow/verticalAlignUILabel.zip

Working for me with iOS 11 code updated: `UILabel *iconLabel = [UILabel.alloc initWithFrame:CGRectMake(0, 0, size, size)]; [iconLabel setTextColor:[UIColor whiteColor]]; [iconLabel setTextAlignment:NSTextAlignmentCenter]; CGSize labelSize = iconLabel.frame.size; iconLabel.frame = [icon boundingRectWithSize:labelSize options:NSStringDrawingUsesLineFragmentOrigin attributes:nil context:nil]; [iconLabel setText:icon]; [iconLabel setNumberOfLines:1]; [iconLabel sizeToFit]; return iconLabel;` — BuguiBu, Mar 15 '18 at 11:51

score 10 · Accepted Answer · edited Aug 04 '16 at 08:29

There is no way to set the vertical alignment of a UILabel by default in iOS. Instead, you will want to use one of the sizeWithFont methods provided by NSString. Which one you use depends on whether you want a multi-line or single-line label. sizeWithFont:forWidth:lineBreakMode: can be used for single-line labels, while sizeWithFont:constrainedToSize:lineBreakMode: can be used for multi-line labels. You can easily load the font parameter with the font property of the label in question. You can look here for some more details on using these functions.

These methods will return a CGSize struct with the minimum size for your label based on the text in the NSString. Once you have the correct size for the label, you can easily place it at the top of your superview and it will appear to be top-aligned.

You can also call sizeToFit on the label to set the frame to its contents. — James P, Aug 08 '12 at 15:06

score 7 · Answer 4 · edited Aug 21 '14 at 13:09

7

I have replaced UILabel with UITextView, because in UITextView, the text sticks to the top.

Just a suggestion, it may be useful for someone.

edited Aug 21 '14 at 13:09

Abdurrahman Mubeen Ali

1,331
1
13
19

answered Mar 31 '14 at 06:01

WebOrCode

6,852
9
43
70

Useful to me :) How do make it multi-line though? I cant seem to find an option which allows this :/ – Byron Coetsee Sep 19 '14 at 19:22
Yes it works but plz tell me how should i change its font size. I have my TextView on a custom cell. – mars Aug 31 '15 at 12:00

score 1 · Answer 5 · edited Nov 25 '16 at 09:45

Make a subclass of UILabel

.h file

@property (nonatomic, assign) UIControlContentVerticalAlignment verticalAlignment;

.m file

- (void) drawTextInRect:(CGRect)rect 
{
    if(_verticalAlignment == UIControlContentVerticalAlignmentTop ||  _verticalAlignment == UIControlContentVerticalAlignmentBottom)    
    {
         // If one line, we can just use the lineHeight, faster than querying sizeThatFits
         const CGFloat height = floorf(((self.numberOfLines == 1) ? ceilf(self.font.lineHeight) : [self sizeThatFits:self.frame.size].height));
          rect.origin.y = floorf(((self.frame.size.height - height) / 2.0f) * ((_verticalAlignment == UIControlContentVerticalAlignmentTop) ? -1.0f : 1.0f));
    }
    [super drawTextInRect:rect];
}


- (void) setVerticalAlignment:(UIControlContentVerticalAlignment)newVerticalAlignment
{
     _verticalAlignment = newVerticalAlignment;
     [self setNeedsDisplay];
}

I used this for Vertical Alignment .

Alexander Poleschuk · Answer 6 · 2017-08-24T11:37:02.640

1

There is an easy solution for cases where the height of a label doesn't need to be constant: put your Label in a Stack View. Be sure to add leading and trailing constants to the Stack View. Here is a screenshot of how to do it in storyboard:

edited Aug 24 '17 at 11:37

answered Aug 24 '17 at 10:53

Alexander Poleschuk

892
12
22

score 0 · Answer 7 · answered May 19 '18 at 13:34

0

What I did in my app was to set the UILabel's line property to 0 as well as to create a bottom constraint of the UILabel and make sure it is being set to >= 0 as shown in the image below.

answered May 19 '18 at 13:34

Jack Tiong

937
8
12

score 0 · Answer 8 · edited Jun 02 '22 at 00:52

0

My problem was in collectionviewCell, I wanted my label to contain text I set to be top align, so I found a way to get it done is I took a uiview first which I set to height and width of contentview of collectionview then I added my imageview and label to the UIView. I set height and width of imageview and for label I just gave trailing, leading and top.

My collectionview

edited Jun 02 '22 at 00:52

Jeremy Caney

7,102
69
48
77

answered Jun 01 '22 at 21:50

Khushbu

1

Top aligned UILabel, make text stick to top of label view -ios

8 Answers8

Linked