CODEWITHSUNDEEP
iphoneobjective-ciosxcode
OWolf
OWolf

Reputation: 5122

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

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

Upvotes: 30

Views: 50077

Answers (8)

Khushbu
Khushbu

Reputation: 1

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

Upvotes: 0

Jack Tiong
Jack Tiong

Reputation: 947

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.

enter image description here

Upvotes: 0

Alexander Poleschuk
Alexander Poleschuk

Reputation: 1039

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:

enter image description here

Upvotes: 1

Wodjefer
Wodjefer

Reputation: 345

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 .

Upvotes: 1

Paul O.
Paul O.

Reputation: 1176

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.

Upvotes: 10

AboulEinein
AboulEinein

Reputation: 1101

There's a workaround for it:

  1. Set a height & width constraint to your UILabel with a constant <= to the maximum height|width you want.
  2. Set number of lines to zero.
  3. Set the height in storyboard to fit only one line.
  4. 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.

Upvotes: 39

WebOrCode
WebOrCode

Reputation: 7284

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

Just a suggestion, it may be useful for someone.

Upvotes: 7

OWolf
OWolf

Reputation: 5122

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

Upvotes: 12

Related Questions