【iOS开发UI篇】UILabel根据文字内容自适应宽度

本文说明了如何在创建UILabel时让标签的宽度根据文字内容长度而自适应，即标签宽度动态变化

在实际开发中，我们可能会需要在创建完一个UILabel对象后的使用过程中，随时改变标签的文字内容，比如页面刷新的提示，可能出现的文字比如：

• “下拉加载”
• “正在刷新，请稍候”
• “网络异常，请检查网络并稍后再试！”

这种情况我们一般不会创建多个标签并通过显示和隐藏来展示，我们希望用一个标签来动态展示不同的文字，这个时候如果标签有背景颜色或者背景图片时，就要照顾最长的文字内容来设定宽度，这样在展示较短文字时，标签背景会显得很空旷，在制作toast时可能会更加明显，为了随时根据文字内容变换宽度，我们可以参考以下步骤：

• 我们通过创建一个新的类继承自UILabel来自动完成自适应宽度的功能，这个类的头文件只需要声明几个方法即可：

//MPLabel.h

#import <UIKit/UIKit.h>

@interface MPLabel : UILabel

//允许通过原点来控制标签位置，参数分别为：原点坐标、文字内容、文字字体、空白边界（后面会提到）
- (void)setLabelWithOrigin:(CGPoint)origin mutableText:(NSString *)text mutableFont:(UIFont *)font margin:(CGFloat)margin;

//允许通过中心点来控制标签位置，参数分别为：原点坐标、文字内容、文字字体、空白边界（后面会提到）
- (void)setLabelWithCenter:(CGPoint)center mutableText:(NSString *)text mutableFont:(UIFont *)font margin:(CGFloat)margin;

@end

这里我们提供的方法可以让用户根据需要，通过原点或者中心点来确定要绘制的标签的位置，至于标签的高度则是由字号来决定的，标签的宽度是由字号和文字内容长短共同决定的，注意我们通过这个方法绘制的标签，在首尾两端会是紧贴在文字两端的，如果我们希望跟让文字和背景在首尾两端有一定量的空隙，可以设置margin这个参数，后面会看到这个参数是直接加载标签宽度上的

• 接下来就是.m文件了，和之前绘制变色文字标签不同，我们不需要重写drawRect方法

//MPLabel.m

#import "MPLabel.h"

@interface MPLabel()

{
    CGPoint _origin;    //原点
    CGPoint _center;    //中心点
    CGFloat _margin;    //空白边界
    int initPoint;      //判断标志，判断当前frame根据那种规则设定
    NSMutableString *_mutableText;  //标签文字内容
    UIFont *_mutableFont;           //标签文字字体
}

@end

@implementation MPLabel

- (instancetype)init {
    
    if (self = [super init]) {
        self.frame = CGRectMake(10, 10, 10, 10); //预设，可随意设置，后面的方法会重新设置
        self.numberOfLines = 0;
        self.textAlignment = NSTextAlignmentCenter;
    }
    return self;
}

- (void)awakeFromNib {
    
    self.frame = CGRectMake(10, 10, 10, 10);
    self.numberOfLines = 0;
    self.textAlignment = NSTextAlignmentCenter;
    
    [super awakeFromNib];
}

- (void)setLabelWithOrigin:(CGPoint)origin mutableText:(NSString *)text mutableFont:(UIFont *)font margin:(CGFloat)margin {
    
    initPoint = 1; //1表示设定了原点
    
    _origin = origin;
    _margin = margin > 0 ? margin : 0;
    _mutableText = [text mutableCopy];
    _mutableFont = font;
    
    [self setTitle];
}

- (void)setLabelWithCenter:(CGPoint)center mutableText:(NSString *)text mutableFont:(UIFont *)font margin:(CGFloat)margin {
    
    initPoint = 2; //2表示设定了中心点
    
    _center = center;
    _margin = margin > 0 ? margin : 0;
    _mutableText = [text mutableCopy];
    _mutableFont = font;
    
    [self setTitle];
}

- (void)setTitle {
    
    NSDictionary *textAttributes;
    
    textAttributes = @{NSFontAttributeName:_mutableFont};
    
    CGSize textSize = [_mutableText sizeWithAttributes:textAttributes];
    
    //这里的margin加在了宽度两侧，如果要做竖排标签，可以选择加在高度两侧，也可以再添加一个新的margin参数来同时控制宽度和高度上的空白边界
    if (initPoint == 1) {
        self.frame = CGRectMake(_origin.x, _origin.y, textSize.width + 2*_margin, textSize.height);
    } else if (initPoint == 2) {
        self.center = _center;
        self.bounds = CGRectMake(0, 0, textSize.width + 2*_margin, textSize.height);
    }
    
    [self setText:_mutableText];
    [self setFont:_mutableFont];
}

@end

这里重写init和awakeFromNib方法是为了在使用代码创建控件或使用xib创建控件时，都可以满足启动条件，这里我们先预设一个后面会被重新根据文字内容设置宽度的frame，然后把标签设置成可以换行和文字居中就可以了

在暴露的接口中，我们只需要将参数都保存下来就可以了，接着调用setTitle来进行最重要的工作，我们首先将字体参数保存成为属性字典，接下来使用sizeWithAttributes方法来获取该字符串在该属性下得尺寸（网络上多数使用了旧版本的sizeWithFont方法，通过查阅文档可以知道该方法已被替换），最后再根据已有的参数来设置标签最终的尺寸、文字内容和文字字体

• 最后我们只需要在需要添加标签的地方创建标签（代码或xib），然后调用头文件中的任意方法（也可以根据需要添加其他方法）来完成设置，最终添加到superview上展示即可，下面举几个例子：

- (void)viewDidLoad {
    [super viewDidLoad];

    MPLabel *testLabel1 = [[MPLabel alloc] init];
    [testLabel1 setLabelWithCenter:CGPointMake(200, 50) mutableText:@"This is a piece of test code!" mutableFont:[UIFont boldSystemFontOfSize:20] margin:0];
    testLabel1.backgroundColor = [UIColor yellowColor];
    testLabel1.textColor = [UIColor redColor];
    [self.view addSubview:testLabel1];
    
    MPLabel *testLabel2 = [[MPLabel alloc] init];
    [testLabel2 setLabelWithCenter:CGPointMake(200, 150) mutableText:@"#\n测试\n标签\n#" mutableFont:[UIFont systemFontOfSize:35] margin:10];
    testLabel2.backgroundColor = [UIColor blueColor];
    testLabel2.textColor = [UIColor whiteColor];
    [self.view addSubview:testLabel2];
    
    MPLabel *testLabel3 = [[MPLabel alloc] init];
    [testLabel3 setLabelWithOrigin:CGPointMake(200, 250) mutableText:@"!!!!!!!!!!!!!!!!" mutableFont:[UIFont systemFontOfSize:50] margin:20];
    testLabel3.backgroundColor = [UIColor greenColor];
    testLabel3.textColor = [UIColor brownColor];
    [self.view addSubview:testLabel3];

自适应宽度标签

这里可以看到这样的自适应适用于横向或纵向的标签，同时不同的空白边界也能通过对比看出来

如果是同一个标签要动态改变其属性，只需要在要改变的时候调用上述方法即可立即更新，比如按钮的点击事件等