前言
NS_CLASS_AVAILABLE_IOS(2_0) @interface UILabel : UIView <NSCoding>
@available(iOS 2.0, *) public class UILabel : UIView, NSCoding- 实际上 label 就是一个可以显示文字的视图控件。
1、Label 的创建
Objective-C
// 实例化 label 对象 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 40, 100, 25)]; // 将 label 加到 window 上显示出来 [self.view addSubview:label];Swift
// 实例化 label 对象 let label:UILabel = UILabel(frame: CGRectMake(10, 40, 100, 25)) // 将 label 加到 window 上显示出来 self.view.addSubview(label)
2、Label 的设置
Objective-C
// 背景颜色 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
// 背景颜色 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
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
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 场景中设置
Label 设置
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 中设置背景半透明颜色
2> 纯代码中设置背景半透明颜色
Objective-C
// 设置背景颜色为半透明 self.labelHUD.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
显示 HUD
Objective-C
// 设置显示的提示文字 self.labelHUD.text = @"数据加载完毕"; // 显示 HUD self.labelHUD.alpha = 1.0;
隐藏 HUD
Objective-C
直接隐藏
// 隐藏 HUD self.labelHUD.alpha = 0.0;逐渐隐藏
// 在 1 秒中内隐藏 [UIView animateWithDuration:1 animations:^{ self.labelHUD.alpha = 0.0; }];
6、数字动态变化
具体实现代码见 GitHub 源码 QExtension
具体讲解见 iOS - Label 数字动态变化
效果
7、跑马灯
7.1 简单实现
Objective-C
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
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 跑马灯实现封装
具体实现代码见 GitHub 源码 QExtension
具体讲解见 iOS - 跑马灯、弹幕
效果
8、弹幕
具体实现代码见 GitHub 源码 QExtension
具体讲解见 iOS - 跑马灯、弹幕
效果
