UILabel

• 实际上 label 就是一个可以显示文字的视图控件。

1、Label 的创建

// 实例化 label 对象
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 40, 100, 25)];
// 将 label 加到 window 上显示出来
[self.view addSubview:label];

2、Label 的设置

// 背景颜色
label.backgroundColor = [UIColor redColor];

// label 文字
label.text = @"LabelLabelLabelLabelLabelLabelLabelLabelLabelLabel";

// label 变属性文字
label.attributedText = mutableAttributedString;

// 设置字体

// 系统样式
label.font = [UIFont systemFontOfSize:30];

// 加粗
label.font = [UIFont boldSystemFontOfSize:30];

// 倾斜
label.font = [UIFont italicSystemFontOfSize:30];

// 设置为指定字体类型的文字
label.font = [UIFont fontWithName:@"Zapfino" size:15];

// 获取系统字体库中的所有字体名称
NSArray *fontNameArray = [UIFont familyNames];

// 文字颜色
label.textColor = [UIColor blackColor];

// 文字对齐方式
label.textAlignment = NSTextAlignmentCenter;

// 文字阴影
/*
shadowColor：阴影颜色，shadowOffset：阴影偏移量
*/
label.shadowColor = [UIColor greenColor];
label.shadowOffset = CGSizeMake(5, 5);

// 文字换行方式
/*
// 以单词为单位换行(最后一行显示不完以单词截断剩下的内容不显示也不会省略(没有...))
NSLineBreakByWordWrapping = 0,     // Wrap at word boundaries, default

// 以字符为单位换行(最后一行显示不完以字符截断剩下的内容不显示也不会省略(没有...))
NSLineBreakByCharWrapping,         // Wrap at character boundaries

// 以单词为单位换行(最后一行显示不完以字符截断剩下的内容不显示也不会省略(没有...))
NSLineBreakByClipping,             // Simply clip

// 以单词换行，最后一行以字符截断，最后一行显示不完则省略最后一行的开头，以”...”显示
NSLineBreakByTruncatingHead,       // Truncate at head of line: "...wxyz"

// 以单词换行，最后一行以字符截断，最后一行显示不完则省略最后一行的中间，以”...”显示
NSLineBreakByTruncatingTail,       // Truncate at tail of line: "abcd..."

// 以单词换行，最后一行以字符截断，最后一行显示不完则省略最后一行的最后，以”...”显示
NSLineBreakByTruncatingMiddle      // Truncate middle of line:  "ab...yz"
*/
label.lineBreakMode = NSLineBreakByWordWrapping;

// 文字行数
/*
设置文字行数，0: 默认，行数不限
*/
label.numberOfLines = 0;

// 文字自动调整
label.adjustsFontSizeToFitWidth = YES;

// 文字自适应 frame
/*
frame 自适配文字，宽度不变，必须要在添加了显示文字之后设置
*/
[label sizeToFit];

// 设置 label 每一行文字的最大宽度
/* 
在自动计算 label 高度时，为了保证计算出来的数值 跟 真正显示出来的效果 一致，若自动换行必须设置
*/
label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 20;

3、可变属性 Label 的创建

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 50, 100, 30)];
label.backgroundColor = [UIColor grayColor];
[self.view addSubview:label];

NSString *str1 = @"NSMutable";
NSString *str2 = @"Attributed";
NSString *str3 = @"String";

// 设置 range 的大小
NSRange range1 = NSMakeRange(0, str1.length);
NSRange range2 = NSMakeRange(str1.length, str2.length);
NSRange range3 = NSMakeRange(str1.length + str2.length, str3.length);

// 实例化可变属性的字符串对象
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] 
initWithString:[NSString stringWithFormat:@"%@%@%@", str1, str2, str3]];

// 设置文字的颜色和文字的大小
[str addAttributes:@{NSForegroundColorAttributeName:[UIColor blueColor], 
    NSFontAttributeName:[UIFont boldSystemFontOfSize:15]} 
range:range1];
[str addAttributes:@{NSForegroundColorAttributeName:[UIColor brownColor], 
    NSFontAttributeName:[UIFont systemFontOfSize:40]} 
range:range2];
[str addAttributes:@{NSForegroundColorAttributeName:[UIColor greenColor], 
    NSFontAttributeName:[UIFont italicSystemFontOfSize:25]} 
range:range3];

// 向 label 中添加文字
label.attributedText = str;

// frame 自适配文字，必须放在最后边，否则会不显示任何内容
[label sizeToFit];

5、HUD

• 其他说法：指示器、遮盖、蒙板

• UILabel 半透明 HUD 的做法：

  • 1.1 背景色设置为半透明颜色，文字颜色透明度不变。

  // 设置背景颜色为半透明
  self.labelHUD.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
  

  • 1.2 显示 HUD

  // 设置显示的提示文字
  self.labelHUD.text = @"数据加载完毕";
  
  // 显示 HUD
  self.labelHUD.alpha = 1.0;
  

  • 1.3 隐藏 HUD
    • 直接隐藏

    // 隐藏 HUD
    self.labelHUD.alpha = 0.0;
    

    • 逐渐隐藏

    // 在 1 秒中内隐藏
    [UIView animateWithDuration:1 animations:^{
    
    self.labelHUD.alpha = 0.0;
    }];
    

6、数字动态变化

• 具体实现代码见码云源码

• Label 数字动态变化

7、跑马灯

• 7.1 简单实现

  
  UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(10, 30, [[UIScreen mainScreen] bounds].size.width - 20, 50)];
  backView.backgroundColor = [UIColor grayColor];
  [self.view addSubview:backView];
  
  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 120, 30)];
  label.backgroundColor = [UIColor yellowColor];
  label.textColor = [UIColor greenColor];
  label.text = @"Label Marquee";
  [backView addSubview:label];
  
  // 子视图的范围不允许超过父视图的范围
  backView.clipsToBounds = YES;
  
  // 开始动画播放
  // 设置 label 的起始位置
  CGRect frame = label.frame;
  frame.origin.x = backView.frame.size.width;
  label.frame = frame;
  
  // 开始简单动画
  [UIView beginAnimations:nil context:nil];
  
  // 设置动画时间（开始播放动画）
  [UIView setAnimationDuration:5];
  
  // 匀速
  [UIView setAnimationCurve:UIViewAnimationCurveLinear];
  
  // 无限重复
  [UIView setAnimationRepeatCount:CGFLOAT_MAX];
  
  // 设置 label 的结束位置
  frame.origin.x = -frame.size.width;
  label.frame = frame;
  
  // 结束动画
  [UIView commitAnimations];
  
  // 一次播放动画结束
  

• 7.2 跑马灯实现封装

  • 具体实现代码见码云源码
  • 具体讲解见 跑马灯、弹幕

8、弹幕

• 具体实现代码见 GitHub 源码
• 具体讲解见 iOS - 跑马灯、弹幕