UILabel 标签

前言

  • Objective-C

    1
    NS_CLASS_AVAILABLE_IOS(2_0) @interface UILabel : UIView <NSCoding>
  • Swift

    1
    @available(iOS 2.0, *) 	 public class UILabel : UIView, NSCoding
  • 实际上 label 就是一个可以显示文字的视图控件。

1、Label 的创建

  • Objective-C

    1
    2
    3
    4
    5
    // 实例化 label 对象
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 40, 100, 25)];

    // 将 label 加到 window 上显示出来
    [self.view addSubview:label];
  • Swift

    1
    2
    3
    4
    5
    // 实例化 label 对象
    let label: UILabel = UILabel(frame: CGRectMake(10, 40, 100, 25))

    // 将 label 加到 window 上显示出来
    self.view.addSubview(label)

2、Label 的设置

  • Objective-C

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    // 背景颜色
    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;
  • Swift

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    // 背景颜色
    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(name: "Zapfino", size: 15)

    // 获取系统字体库中的所有字体名称
    let fontNameArray: NSArray = UIFont.familyNames()

    // 文字颜色
    label.textColor = UIColor.blackColor()

    // 文字对齐方式
    label.textAlignment = NSTextAlignment.Center

    // 文字阴影
    /*
    shadowColor:阴影颜色,shadowOffset:阴影偏移量
    */
    label.shadowColor = UIColor.greenColor()
    label.shadowOffset = CGSizeMake(5, 5)

    // 文字换行方式
    /*
    // 以单词为单位换行(最后一行显示不完以单词截断剩下的内容不显示也不会省略(没有...))
    case ByWordWrapping

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

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

    // 以单词换行,最后一行以字符截断,最后一行显示不完则省略最后一行的开头,以”...”显示
    case ByTruncatingHead

    // 以单词换行,最后一行以字符截断,最后一行显示不完则省略最后一行的中间,以”...”显示
    case ByTruncatingTail

    // 以单词换行,最后一行以字符截断,最后一行显示不完则省略最后一行的最后,以”...”显示
    case ByTruncatingMiddle
    */
    label.lineBreakMode = .ByWordWrapping

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

    // 文字自动调整
    label.adjustsFontSizeToFitWidth = true

    // 文字自适应 frame
    /*
    frame 自适配文字,宽度不变,必须要在添加了显示文字之后设置
    */
    label.sizeToFit()

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

3、可变属性 Label 的创建

  • Objective-C

    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
    30
    31
    32
    33
    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];
  • Swift

    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
    30
    31
    32
    33
    let label: UILabel = UILabel(frame: CGRectMake(10, 50, 100, 30))
    label.backgroundColor = UIColor.grayColor()
    self.view.addSubview(label)

    let str1: NSString = "NSMutable"
    let str2: NSString = "Attributed"
    let str3: NSString = "String"

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

    // 实例化可变属性的字符串对象
    let str: NSMutableAttributedString = NSMutableAttributedString(string:
    String(format: "%@%@%@", 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()

4、Storyboard 中设置

  • 在 Storyboard 场景中设置

4.1 Label 设置

UILabel1

Text 文字类型和显示的文字
Color 文字颜色
Font 文字字体
Alignment 文字对齐方式
Lines 行数
Behavior
– Enable
– Highlighted
Baseline
Line Breaks 断行方式
Autoshrink
– Tighten Letter Spacing
Highlighted 高亮颜色
Shadow 阴影颜色
Shadow Offset 阴影偏移量

5、HUD

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

  • UILabel 半透明 HUD 的做法:

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

      • 1> Storyboard 中设置背景半透明颜色

        UILabel2

      • 2> 纯代码中设置背景半透明颜色

        • Objective-C

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

    • Objective-C

      1
      2
      3
      4
      5
      // 设置显示的提示文字
      self.labelHUD.text = @"数据加载完毕";

      // 显示 HUD
      self.labelHUD.alpha = 1.0;
  • 隐藏 HUD

    • Objective-C

      • 直接隐藏

        1
        2
        // 隐藏 HUD
        self.labelHUD.alpha = 0.0;
      • 逐渐隐藏

        1
        2
        3
        4
        5
        // 在 1 秒中内隐藏
        [UIView animateWithDuration:1 animations:^{

        self.labelHUD.alpha = 0.0;
        }];

6、数字动态变化

7、跑马灯

7.1 简单实现

  • Objective-C

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    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];

    // 一次播放动画结束
  • Swift

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    let backView: UIView = UIView(frame: CGRectMake(10, 30, UIScreen.mainScreen().bounds.size.width - 20, 50))
    backView.backgroundColor = UIColor.grayColor()
    self.view.addSubview(backView)

    let label: UILabel = UILabel(frame: CGRectMake(0, 10, 120, 30))
    label.textColor = UIColor.greenColor()
    label.text = "Label Marquee"
    backView.addSubview(label)

    // 子视图的范围不允许超过父视图的范围
    backView.clipsToBounds = true

    // 开始动画播放

    // 设置 label 的起始位置
    var frame: CGRect = label.frame
    frame.origin.x = backView.frame.size.width
    label.frame = frame

    // 开始简单动画
    UIView.beginAnimations(nil, context: nil)

    // 设置动画时间(开始播放动画)
    UIView.setAnimationDuration(5)

    // 匀速
    UIView.setAnimationCurve(UIViewAnimationCurve.Linear)

    // 无限重复
    UIView.setAnimationRepeatCount(9999999)

    // 设置 label 的结束位置
    frame.origin.x = -frame.size.width
    label.frame = frame

    // 结束动画
    UIView.commitAnimations()

    // 一次播放动画结束

7.2 跑马灯实现封装

8、弹幕

文章目录
  1. 1. 前言
  2. 2. 1、Label 的创建
  3. 3. 2、Label 的设置
  4. 4. 3、可变属性 Label 的创建
  5. 5. 4、Storyboard 中设置
    1. 5.1. 4.1 Label 设置
  6. 6. 5、HUD
  7. 7. 6、数字动态变化
  8. 8. 7、跑马灯
    1. 8.1. 7.1 简单实现
    2. 8.2. 7.2 跑马灯实现封装
  9. 9. 8、弹幕
隐藏目录