Uilabel in IOS sets top, center, bottom and text top display


Uilabel is set to align top, center and bottom in IOS

In IOS, the default text in uilabel can only be aligned in the middle in the vertical direction. Bloggers refer to foreign websites and inherit a new class from uilabel to achieve top alignment, center alignment and bottom alignment.

The details are as follows:

// myUILabel.h 
// Created by yexiaozi_007 on 3/4/13. 
// Copyright (c) 2013 yexiaozi_007. All rights reserved. 
#import <UIKit/UIKit.h> 
typedef enum 
 VerticalAlignmentTop = 0, // default 
} VerticalAlignment; 
@interface myUILabel : UILabel 
VerticalAlignment _verticalAlignment; 
@property (nonatomic) VerticalAlignment verticalAlignment; 

// myUILabel.m 
// Created by yexiaozi_007 on 3/4/13. 
// Copyright (c) 2013 yexiaozi_007. All rights reserved. 
#import "myUILabel.h" 
@implementation myUILabel 
@synthesize verticalAlignment = verticalAlignment_; 
- (id)initWithFrame:(CGRect)frame { 
 if (self = [super initWithFrame:frame]) { 
 self.verticalAlignment = VerticalAlignmentMiddle; 
 return self; 
- (void)setVerticalAlignment:(VerticalAlignment)verticalAlignment { 
 verticalAlignment_ = verticalAlignment; 
 [self setNeedsDisplay]; 
- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines { 
 CGRect textRect = [super textRectForBounds:bounds limitedToNumberOfLines:numberOfLines]; 
 switch (self.verticalAlignment) { 
 case VerticalAlignmentTop: 
  textRect.origin.y = bounds.origin.y; 
 case VerticalAlignmentBottom: 
  textRect.origin.y = bounds.origin.y + bounds.size.height - textRect.size.height; 
 case VerticalAlignmentMiddle: 
  // Fall through. 
  textRect.origin.y = bounds.origin.y + (bounds.size.height - textRect.size.height) / 2.0; 
 return textRect; 
-(void)drawTextInRect:(CGRect)requestedRect { 
 CGRect actualRect = [self textRectForBounds:requestedRect limitedToNumberOfLines:self.numberOfLines]; 
 [super drawTextInRect:actualRect]; 

In use:

lbl_mylabel = [[myUILabel alloc] initWithFrame:CGRectMake(20, 50, 150, 600)]; 
UIColor *color = [UIColor colorWithPatternImage:[UIImage imageNamed:@" halfTransparent.png "]]; // use a translucent picture as the background color of the label 
lbl_mylabel.backgroundColor = color; 
lbl_mylabel.textAlignment = UITextAlignmentLeft; 
lbl_mylabel.textColor = UIColor.whiteColor; 
lbl_mylabel.lineBreakMode = UILineBreakModeWordWrap; 
lbl_mylabel.numberOfLines = 0; 
[lbl_mylabel setVerticalAlignment:VerticalAlignmentTop]; 
[self addSubview:lbl_mylabel];

Uilabel makes text top display

We often encounter the need to top the text in a label, that is, to display the text on the top of the label box. Uilabel can’t top the content text. Therefore, if we don’t set the label additionally, the following will happen:

Before topping

Solution: we can solve it by sizetofit method

- (void)viewDidLoad {
 [super viewDidLoad];
 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake((self.view.bounds.size.width - 200)/2, 100, 200, 150)];
 label.backgroundColor = [UIColor yellowColor];
 Nsstring * labelText = @ "I don't know how to top, who will tell me? ";
 [label setText:labelText];
 [label setNumberOfLines:0];  
 //Top content
 [label sizeToFit];
 [self.view addSubview:label];

design sketch:

After topping

However, some partners may have some concerns about the frame of the label after the content is set. The author also has some concerns. Therefore, a red background with the same frame as the initial label is placed behind the label. If the sizetofit method is set, even if the frame of the label changes, we can also compare it with the frame with the red background

Frame comparison before and after topping

We can see that the origin of the original label is almost unchanged after the text content is set at the top, while borders adapts to the text, and the size changes.
Therefore, it is not difficult to see that through the sizetofit method, we can “just” the size of the label close to the outside of the text, so as to achieve the effect of topping.


The above is the whole content of this article, I hope that the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message and exchange, thank you for your support to developeppaer.