阅读 1200

UILabel的自适应 及 富文本

UILabel的自适应

UILabel的自动换行
UILabel * examp_LB = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, self.view.frame.size.width, 150)];
examp_LB.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0 alpha:0.3f];  // 偏“黄色”
examp_LB.text = @"abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz";
// 自动换行
examp_LB.numberOfLines = 0;  //必须设置为0行,才会自动换行
examp_LB.lineBreakMode = NSLineBreakByCharWrapping;  //结尾时,按“字符”换行
[self.view addSubview:examp_LB];
复制代码

NSLineBreakMode枚举:

// NSParagraphStyle
typedef NS_ENUM(NSInteger, NSLineBreakMode) {
    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"
} NS_ENUM_AVAILABLE(10_0, 6_0);
复制代码

几种UILabel高度 对应的效果:

UILabel * examp_LB = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, self.view.frame.size.width, 50)];
复制代码

效果:装不下 (装不完)

字符串 装不完

UILabel * examp_LB = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, self.view.frame.size.width, 100)];
复制代码

效果:装下,剩一点点空间

字符串 装完,仅剩一点点空间

UILabel * examp_LB = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, self.view.frame.size.width, 150)];
复制代码

效果:装下,多出了很多空间

字符串 装完,多出了很多空间

缺点:自己必须 保证UILabel所设置的高度完全 高于 所**承载 字体**的高度。否则会 装不下!

UILabel的宽度自适应

使用宽度自适应时,(为了美观😂😂)一般都会设置字符串 居中:设置“textAlignment”为“NSTextAlignmentCenter 示例:

UILabel * examp_LB2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 50)];
examp_LB2.backgroundColor = [UIColor colorWithRed:1 green:0 blue:1 alpha:0.2f];
examp_LB2.text = @"abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz";
examp_LB2.adjustsFontSizeToFitWidth = YES;           //自适应 宽度
[self.view addSubview:examp_LB2];
复制代码

效果:字符串 会全部 显示在里面

字符串 会全部显示在Label里面


“更改了字符串 长度,是其长度 减小后”的效果:

examp_LB2.text = @"abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcde";
复制代码

效果:字符串长度 减短后

长度上 填满了Label

examp_LB2.text = @"abcdefghijk";
复制代码

效果:字符串长度非常短时,不能完全填满Label的长度

字符串长度非常短时 不能完全填满


对 UILabel的宽度 进行更改

UILabel * examp_LB3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 260, 150, 50)];
examp_LB3.backgroundColor = [UIColor colorWithRed:1 green:0 blue:1 alpha:0.2f];
examp_LB3.text = @"abcdefghijk";
examp_LB3.textAlignment = NSTextAlignmentCenter;     //字迹 居中
examp_LB3.adjustsFontSizeToFitWidth = YES;           //自适应 宽度
[self.view addSubview:examp_LB3];
复制代码

效果:装完

屏幕快照 2017-01-18 下午10.01.35.png

UILabel * examp_LB3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 260, 100, 50)];
复制代码

效果:有些许的空白

UILabel * examp_LB3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 260, 150, 50)];
复制代码

效果:有许多的空白


UILabel换行、自适应宽度
UILabel * examp_LB4 = [[UILabel alloc] initWithFrame:CGRectMake(0, 320, self.view.frame.size.width, 50)];
examp_LB4.backgroundColor = [UIColor colorWithRed:1 green:0 blue:1 alpha:0.2f];
examp_LB4.text = @"abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz";
examp_LB4.numberOfLines = 0;                      //行数设置为0
examp_LB4.adjustsFontSizeToFitWidth = YES;        //自适应 宽度
[self.view addSubview:examp_LB4];
复制代码

⚠️:不能设置其 换行模式的属性!!!!! 否则“adjustsFontSizeToFitWidth”的设置 将变为无效

UILabel * examp_LB5 = [[UILabel alloc] initWithFrame:CGRectMake(0, 380, self.view.frame.size.width, 50)];
examp_LB5.backgroundColor = [UIColor colorWithRed:1 green:0 blue:1 alpha:0.2f];
examp_LB5.text = @"abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz";
examp_LB5.numberOfLines = 0;
examp_LB5.lineBreakMode = NSLineBreakByCharWrapping; //(❌❌❌❌❌❌)

// 由于设置了换行模式,自适应宽度变为无效
examp_LB5.adjustsFontSizeToFitWidth = YES;           //自适应 宽度
[self.view addSubview:examp_LB5];
复制代码

效果:

examp_LB4、examp_LB5 的 效果

UILabel的 ⭐️完全自适应⭐️

要使用到 如下方法:

- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullable NSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 7_0);
复制代码

来记录下UILabel的frame,再读取出来(返回类型: CGRect) 使用 其frame

在使用的类里 对方法改写后,如下:

// 传入 文字、字体和最大尺寸,即可得到宽、高
- (CGSize)sizeWithText:(NSString *)text andFont:(UIFont *)font maxSize:(CGSize)maxSize
{
    NSDictionary *attrs = @{NSFontAttributeName : font};
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}


// 传入文字、字体和最大宽度,即可得到宽、高
-(CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxW:(CGFloat)maxW
{
    NSMutableDictionary *attrs=[NSMutableDictionary dictionary];
    attrs[NSFontAttributeName]=font;

    CGSize maxSize=CGSizeMake(maxW, MAXFLOAT);
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}
// 传入文字、字体 (默认:最大宽度)
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font
{
    return [self sizeWithText:text font:font maxW:MAXFLOAT];
}
复制代码

在“viewDidLoad { }”里面:

UILabel * examp_LB6 = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 50)];
examp_LB6.backgroundColor = [UIColor colorWithRed:1 green:0 blue:1 alpha:0.2f];

// 自动换行
examp_LB6.numberOfLines = 0;
examp_LB6.lineBreakMode = NSLineBreakByCharWrapping;
[self.view addSubview:examp_LB6];

// 设置自适应 所需字串
NSString * str = @"abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz";
examp_LB6.text = str;

// 设置自适应 所需字体
UIFont *font = [UIFont fontWithName:@"Arial" size:12];
examp_LB6.font = font;
复制代码

如下是三种方法的调用:

  • 1.传入 文字、字体和最大尺寸,即可得到宽、高

      // 传入 文字、字体和最大尺寸,即可得到宽、高
      CGSize labelsize = [self sizeWithText:str andFont:font maxSize:CGSizeMake(self.view.frame.size.width, 100)];
      examp_LB6.frame = CGRectMake(examp_LB6.frame.origin.x,examp_LB6.frame.origin.y, labelsize.width, labelsize.height);
    复制代码

效果:

传入 文字、字体和最大尺寸

  • 2.传入文字、字体和最大宽度,即可得到宽、高

      // 传入文字、字体和最大宽度,即可得到宽、高
      CGSize labelsize = [self sizeWithText:str font:font maxW:290];  //限定宽度
      examp_LB6.frame = CGRectMake(examp_LB6.frame.origin.x,examp_LB6.frame.origin.y, labelsize.width, labelsize.height);
    复制代码

效果:

传入文字、字体和最大宽度(290)

  • 3.传入文字、字体 (默认:最大宽度)

      // 传入文字、字体 (默认:最大宽度)
      CGSize labelsize = [self sizeWithText:str font:font];
      examp_LB6.frame = CGRectMake(examp_LB6.frame.origin.x,examp_LB6.frame.origin.y, labelsize.width, labelsize.height);
    复制代码

效果:会得到Label的最大长度

传入文字、字体 (默认:最大宽度)

显示出来是 屏幕的宽度。打上断点 ,查看Label的最大长度:

Label的最大长度


当然 使用系统的“视图位置关系”查看方法“Debug View Hierarchy” 枉然,是不能看到屏幕外的视图。

点击,查看视图位置关系

只能看到屏幕内的视图

使用一款叫“Reveal”的软件,可以查看 屏幕外的视图: 使用“Reveal”软件,查看到 屏幕外的视图

Reveal 下载地址:revealapp.com/download/ 当然 我用的是 破解版~ 😂😂😂😂😂😂😂

Reveal-----视图大小、位置关系 查看及调试。Reveal使用说明的文章 网上有很多,就不详述了~


当然也可以直接 使用

- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullable NSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 7_0);
复制代码

方法 所返回的“CGRect结构体

代码如下:

NSDictionary *attribute_Dict = @{NSFontAttributeName: font};// 字体的字典
CGRect label_Rect = [str boundingRectWithSize:CGSizeMake(self.view.frame.size.width, 0) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading | NSStringDrawingTruncatesLastVisibleLine attributes:attribute_Dict context:nil];
float label_height = label_Rect.size.height;
float label_width = label_Rect.size.width;
examp_LB6.frame = CGRectMake(examp_LB6.frame.origin.x,examp_LB6.frame.origin.y, label_width, label_height);
复制代码

效果:

当设置字符串居中 时:

examp_LB6.textAlignment = NSTextAlignmentCenter;     //字迹 居中
复制代码

效果:

字符串的__字迹__ 居中:NSTextAlignmentCenter


下面是更改字符串的长度 示例,你就会清楚 UILabel的高、宽 完全自适应!!!!!

NSString * str = @"abcdefghijklmnopqrstuvwxyz_abcdefghijklmnopqrstuvwxyz_abcde";
复制代码

效果:

长度 足够短时:

// 长度 足够短时  (宽度自适应)
NSString * str = @"abcdefghi";
复制代码

效果:UILabel的高、宽 自适应

UILabel的高、宽 自适应

UILabel使用 富文本

Text Kit能够很简单实现一些复杂的文本 样式以及布局,而Text Kit富文本框架用到的核心数据结构就是属性化字符串NSAttributeString Text Kit指的是UIKit框架中用于提供高质量排版服务的一些类和协议,它让程序能够存储,排版和显示文本信息,并支持排版所需要的所有特性(包括字距调整、连写、换行和对齐等) 。

1.初始化方法

- (instancetype)initWithString:(NSString *)str;

- (instancetype)initWithString:(NSString *)str attributes:(nullable NSDictionary<NSString *, id> *)attrs;

- (instancetype)initWithAttributedString:(NSAttributedString *)attrStr;
//使用NSAttributedString初始化,跟NSMutableString,NSString类似
复制代码

NSMutableAttributedString的属性设置:

//为某一范围内文字设置多个属性
- (void)setAttributes:(NSDictionary *)attrs range:(NSRange)range;
//为某一范围内文字添加某个属性
- (void)addAttribute:(NSString *)name value:(id)value range:(NSRange)range;
//为某一范围内文字添加多个属性
- (void)addAttributes:(NSDictionary *)attrs range:(NSRange)range;

//移除某范围内的某个属性
- (void)removeAttribute:(NSString *)name range:(NSRange)range;
复制代码

2.常见的属性及说明

NSFontAttributeName                字体属性(字体、大小)。        默认值:字体:Helvetica(Neue) 字号:12
NSForegroundColorAttributeNam      字体颜色,取值为 UIColor对象。        默认值为黑色
NSBackgroundColorAttributeName     字体所在区域背景颜色,取值为 UIColor对象。        默认值为nil, 透明色

NSLigatureAttributeName            连体属性,取值为NSNumber 对象(整数),0 表示没有连体字符,1 表示使用默认的连体字符
NSKernAttributeName                设定字符间距,取值为 NSNumber 对象(整数),正值间距加宽,负值间距变窄

NSStrikethroughStyleAttributeName  删除线,取值为 NSNumber 对象(整数)
NSStrikethroughColorAttributeName  删除线颜色,取值为 UIColor 对象。        默认值为黑色
NSUnderlineStyleAttributeName      下划线,取值为 NSNumber 对象(整数),枚举常量 NSUnderlineStyle中的值,与删除线类似
NSUnderlineColorAttributeName      下划线颜色,取值为 UIColor 对象。        默认值为黑色
NSStrokeWidthAttributeName         设置笔画宽度,取值为 NSNumber 对象(整数),负值填充效果,正值中空效果
NSStrokeColorAttributeName         填充部分颜色,不是字体颜色,取值为 UIColor 对象

NSShadowAttributeName              设置阴影属性,取值为 NSShadow 对象

NSTextEffectAttributeName          设置文本特殊效果,取值为 NSString 对象,目前只有图版印刷效果可用

NSBaselineOffsetAttributeName      设置基线偏移值,取值为 NSNumber (float),正值上偏,负值下偏
NSObliquenessAttributeName         设置字形倾斜度,取值为 NSNumber (float),正值右倾,负值左倾
NSExpansionAttributeName           设置文本横向拉伸属性,取值为 NSNumber (float),正值横向拉伸文本,负值横向压缩文本

NSWritingDirectionAttributeName    设置文字书写方向,从左向右书写或者从右向左书写
NSVerticalGlyphFormAttributeName   设置文字排版方向,取值为 NSNumber 对象(整数),0 表示横排文本,1 表示竖排文本

NSAttachmentAttributeName          设置文本附件,取值为NSTextAttachment对象,常用于文字图片混排

NSParagraphStyleAttributeName      设置文本段落排版格式,取值为 NSParagraphStyle 对象
复制代码

NSLinkAttributeName                设置链接属性,点击后调用浏览器打开指定URL地址
复制代码

为富文本添加链接:iOS开发——超链接富文本

富文本的 属性展示 示例 网址:www.itnose.net/detail/6177…

举个🌰:
// 垃圾代码部分
UILabel * examp_Attrb_LB1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 50)];
examp_Attrb_LB1.backgroundColor = [UIColor colorWithRed:0.5 green:1 blue:0 alpha:0.2f];
[self.view addSubview:examp_Attrb_LB1];


UILabel * examp_Attrb_LB2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 110, self.view.frame.size.width, 50)];
examp_Attrb_LB2.backgroundColor = [UIColor colorWithRed:0.5 green:1 blue:0 alpha:0.2f];
[self.view addSubview:examp_Attrb_LB2];


UILabel * examp_Attrb_LB3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 170, self.view.frame.size.width, 50)];
examp_Attrb_LB3.backgroundColor = [UIColor colorWithRed:0.5 green:1 blue:0 alpha:0.2f];
[self.view addSubview:examp_Attrb_LB3];


UILabel * examp_Attrb_LB4 = [[UILabel alloc] initWithFrame:CGRectMake(0, 260, self.view.frame.size.width, 50)];
examp_Attrb_LB4.backgroundColor = [UIColor colorWithRed:0.5 green:1 blue:0 alpha:0.2f];
[self.view addSubview:examp_Attrb_LB4];


UILabel * examp_Attrb_LB5 = [[UILabel alloc] initWithFrame:CGRectMake(0, 320, self.view.frame.size.width, 50)];
examp_Attrb_LB5.backgroundColor = [UIColor colorWithRed:0.5 green:1 blue:0 alpha:0.2f];
[self.view addSubview:examp_Attrb_LB5];


UILabel * examp_Attrb_LB6 = [[UILabel alloc] initWithFrame:CGRectMake(0, 380, self.view.frame.size.width, 150)];
examp_Attrb_LB6.backgroundColor = [UIColor colorWithRed:0.5 green:1 blue:0 alpha:0.2f];
[self.view addSubview:examp_Attrb_LB6];








//《《《《《《《《《《《《《 进入主题 》》》》》》》》》》》》》

// 富文本 字符串1
NSAttributedString * attrStr1 = [[NSAttributedString alloc] initWithString:@"abcdefghij"]; // 几近无用😂   


// 不可变 富文本2    (附带设置 富文本属性(⭐️全体⭐️的属性)   )
NSAttributedString * attrStr2 = [[NSAttributedString alloc] initWithString:@"hijklmnopqr" attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:30.f],NSForegroundColorAttributeName:RGB(137, 198, 41)}];

// 不可变 富文本3   (⭐️复制⭐️一份富文本 )
NSAttributedString * attrStr3 = [[NSAttributedString alloc] initWithAttributedString:attrStr2]; // ⭐️复制⭐️一份富文本


//=======================================================
// 可变 富文本4
NSMutableAttributedString * attrStr4 = [[NSMutableAttributedString alloc] initWithAttributedString:attrStr2];
// 获取“mno”字符串     ⭐️所在范围⭐️    
NSRange rag_1 = [attrStr4.string localizedStandardRangeOfString:@"mno"];
// 添加       “mno”字符串所在范围 字体  属性
[attrStr4 addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:10.f] range:rag_1];

//=======================================================
// 可变 富文本5
NSMutableAttributedString * attrStr5 = [[NSMutableAttributedString alloc] initWithString:@"stuvwxyz"];
// 要添加或更改属性 的字典
NSDictionary * attr_Dict = @{NSForegroundColorAttributeName:[UIColor orangeColor],
                             NSUnderlineStyleAttributeName:[NSNumber numberWithFloat:1.0]
                            };    //字体颜色 及 下划线

// ⭐️添加⭐️ 范围内 富文本属性
[attrStr5 addAttributes:attr_Dict range:NSMakeRange(0, attrStr5.length)]; // 整个字符串(NSMakeRange(0, attrStr5.length))的范围

// 要添加或更改属性 的字典
NSDictionary * attr_Dict2 = @{NSBackgroundColorAttributeName:[UIColor cyanColor],
                              NSForegroundColorAttributeName:[UIColor blueColor],
                              NSStrikethroughStyleAttributeName:[NSNumber numberWithFloat:1.0]
                            };     //背景色、字体颜色 及 删除线

// 要添加或更改属性的 范围
NSRange rag_2 = NSMakeRange(2, 2);
// ⭐️设置⭐️ 范围内 富文本属性
[attrStr5 setAttributes:attr_Dict2 range:rag_2];

//=======================================================
// 可变 富文本6
NSMutableAttributedString * attrStr6 = [[NSMutableAttributedString alloc] initWithString:@"abcdefghijklmnopqrstuvwxyz"];
// 随机色Label
for (int i = 0; i < attrStr6.string.length; i ++) {
    // 所有更改属性 的字典
    NSDictionary * attr_Dict = @{NSForegroundColorAttributeName:[UIColor colorWithRed:arc4random()%256/255.f green:arc4random()%256/255.f blue:arc4random()%256/255.f alpha:1],
                                 NSFontAttributeName:[UIFont systemFontOfSize:(arc4random()%20+30)/1.f]
                                 }; // 字体:随机颜色、随机大小

    // 要添加或更改属性的 范围
    NSRange rag = NSMakeRange(i, 1);
    // ⭐️设置⭐️ 范围内 富文本属性
    [attrStr6 setAttributes:attr_Dict range:rag];
}



// Label添加 富文本字符串
examp_Attrb_LB1.attributedText = attrStr1;
examp_Attrb_LB2.attributedText = attrStr2;
examp_Attrb_LB3.attributedText = attrStr3;    
examp_Attrb_LB4.attributedText = attrStr4;
examp_Attrb_LB5.attributedText = attrStr5;
examp_Attrb_LB6.attributedText = attrStr6;
复制代码

效果:

各Label 的富文本效果图

加上 自动换行代码后,examp_Attrb_LB6实现换行:

// 自动换行
examp_Attrb_LB6.numberOfLines = 0;
examp_Attrb_LB6.lineBreakMode = NSLineBreakByCharWrapping;
复制代码

效果:

UILabel设置为自动换行后 的效果

富文本在UITextViewUITextField中的示例:

UITextView * tv = [[UITextView alloc] initWithFrame:CGRectMake(9, 20, 100, 200)];
tv.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2f];
tv.attributedText = attrStr6;
[self.view addSubview:tv];



UITextField * tf = [[UITextField alloc] initWithFrame:CGRectMake(10, 260, 200, 20)];
tf.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2f];
tf.attributedText = attrStr6;
[self.view addSubview:tf];
复制代码

效果:

UITextView、UITextField中的示例

在字符串后面添加 字符串时,后面的富文本 会复制 上一个富文本字符的字体颜色大小


更多方法和属性说明 详见苹果官方说明文档developer.apple.com/library/ios…

一般富文本也就简单的显示在 一、两处 地方,在定制控件封装好就可以了。 当然你自己可以给UILabel 加个使用富文本的类别~

2017.01.19

goyohol's essay

文章分类
iOS
文章标签