代码改变世界

让UILabel的文字顶部对齐

2014-07-17 10:36  JG2014  阅读(1877)  评论(0编辑  收藏  举报

xcode中默认的UILabel是垂直居中对齐的,如果你的UILabel高度有多行,当内容少的时候,会自动垂直居中。

如下图所示(图片来自stackoverflow):

比较郁闷的是,UILabel并不提供设置其垂直对齐方式的选项。所以如果你想让你的文字顶部对齐,那么就需要自己想办法了。 stackoverflow.com 上提供了几种方法来达到顶部对齐的效果。

方法一

在显示文字时,首先计算显示当前的文字需要多宽和多高,然后将对应的UILabel的大小改变成对应的宽度和高度。此方法的相示意图如下:

在显示文字时,首先计算显示当前的文字需要多宽和多高,然后将对应的UILabel的大小改变成对应的宽度和高度。此方法的相示意图如下:

(大部分时候可以通过:设置label最大frame和最大 numberofline,[label  sizetofit] 可以自动根据内容条件label大小。

1
2
3
4
5
6
7
8
CGSize maximumSize = CGSizeMake(300, 9999);
NSString *dateString = @"The date today is January 1st, 1999";
UIFont *dateFont = [UIFont fontWithName:@"Helvetica" size:14];
CGSize dateStringSize = [dateString sizeWithFont:dateFont
    constrainedToSize:maximumSize
    lineBreakMode:self.dateLabel.lineBreakMode];
CGRect dateFrame = CGRectMake(10, 10, 300, dateStringSize.height);
self.dateLabel.frame = dateFrame;

方法二

此方法更加简单粗暴,但是很有效。其方法是在文本后面加多一些\n。 需要注意的是,\n后还得加至少一个空格,否则多余的\n会被UILabel忽略。从这一点上看,UILabel似乎又过于“聪明”了。

该方法的示意图如下:

该方法的代码如下:

1
2
for(int i=0; i<newLinesToPad; i++)
    self.text = [self.text stringByAppendingString:@"\n "];

方法三

最正统的方法,利用objective-c的category特性,修改UILabel的绘制代码。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// -- file: UILabel+VerticalAlign.h
#pragma mark VerticalAlign
@interface UILabel (VerticalAlign)
- (void)alignTop;
- (void)alignBottom;
@end

// -- file: UILabel+VerticalAlign.m
@implementation UILabel (VerticalAlign)
- (void)alignTop {
    CGSize fontSize = [self.text sizeWithFont:self.font];
    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label
    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];
    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;
    for(int i=0; i<newLinesToPad; i++)
        self.text = [self.text stringByAppendingString:@"\n "];
}

- (void)alignBottom {
    CGSize fontSize = [self.text sizeWithFont:self.font];
    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label
    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];
    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;
    for(int i=0; i<newLinesToPad; i++)
        self.text = [NSString stringWithFormat:@" \n%@",self.text];
}
@end

我选了简单暴力的方法二,你呢?

 

在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐。具体如下:

[cpp] view plaincopy
 
  1. //  
  2. //  myUILabel.h  
  3. //    
  4. //  
  5. //  Created by yexiaozi_007 on 3/4/13.  
  6. //  Copyright (c) 2013 yexiaozi_007. All rights reserved.  
  7. //  
  8.   
  9. #import <UIKit/UIKit.h>  
  10. typedef enum  
  11. {  
  12.     VerticalAlignmentTop = 0, // default  
  13.     VerticalAlignmentMiddle,  
  14.     VerticalAlignmentBottom,  
  15. } VerticalAlignment;  
  16. @interface myUILabel : UILabel  
  17. {  
  18. @private  
  19. VerticalAlignment _verticalAlignment;  
  20. }  
  21.   
  22. @property (nonatomic) VerticalAlignment verticalAlignment;  
  23.   
  24. @end  

 

[cpp] view plaincopy
 
  1. //  
  2. //  myUILabel.m  
  3. //    
  4. //  
  5. //  Created by yexiaozi_007 on 3/4/13.  
  6. //  Copyright (c) 2013 yexiaozi_007. All rights reserved.  
  7. //  
  8.   
  9. #import "myUILabel.h"  
  10.   
  11. @implementation myUILabel  
  12. @synthesize verticalAlignment = verticalAlignment_;  
  13.   
  14. - (id)initWithFrame:(CGRect)frame {  
  15.     if (self = [super initWithFrame:frame]) {  
  16.         self.verticalAlignment = VerticalAlignmentMiddle;  
  17.     }  
  18.     return self;  
  19. }  
  20.   
  21. - (void)setVerticalAlignment:(VerticalAlignment)verticalAlignment {  
  22.     verticalAlignment_ = verticalAlignment;  
  23.     [self setNeedsDisplay];  
  24. }  
  25.   
  26. - (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines {  
  27.     CGRect textRect = [super textRectForBounds:bounds limitedToNumberOfLines:numberOfLines];  
  28.     switch (self.verticalAlignment) {  
  29.         case VerticalAlignmentTop:  
  30.             textRect.origin.y = bounds.origin.y;  
  31.             break;  
  32.         case VerticalAlignmentBottom:  
  33.             textRect.origin.y = bounds.origin.y + bounds.size.height - textRect.size.height;  
  34.             break;  
  35.         case VerticalAlignmentMiddle:  
  36.             // Fall through.  
  37.         default:  
  38.             textRect.origin.y = bounds.origin.y + (bounds.size.height - textRect.size.height) / 2.0;  
  39.     }  
  40.     return textRect;  
  41. }  
  42.   
  43. -(void)drawTextInRect:(CGRect)requestedRect {  
  44.     CGRect actualRect = [self textRectForBounds:requestedRect limitedToNumberOfLines:self.numberOfLines];  
  45.     [super drawTextInRect:actualRect];  
  46. }  
  47.   
  48.   
  49. @end  

 

在使用时:

 

[cpp] view plaincopy
 
  1. lbl_mylabel = [[myUILabel alloc] initWithFrame:CGRectMake(20, 50, 150, 600)];  
  2. UIColor *color = [UIColor colorWithPatternImage:[UIImage imageNamed:@"halfTransparent.png"]];//使用半透明图片作为label的背景色  
  3. lbl_mylabel.backgroundColor = color;  
  4. lbl_mylabel.textAlignment = UITextAlignmentLeft;  
  5. lbl_mylabel.textColor = UIColor.whiteColor;  
  6. lbl_mylabel.lineBreakMode = UILineBreakModeWordWrap;  
  7. lbl_mylabel.numberOfLines = 0;  
  8. [lbl_mylabel setVerticalAlignment:VerticalAlignmentTop];  
  9. [self addSubview:lbl_mylabel];