Label设置行间距--b
内容摘要
- UILabel显示多行文本
- UILabel设置行间距
- 解决单行文本 & 多行文本显示的问题
场景描述
- 众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行文本,一般情况下会有一定的行间距。如果想动态调整行间距,则需要赋值富文本属性(而不是文本属性)
问题分析
Label显示多行文本
- label默认情况下,只会显示单行文本,主要是因为它的
numberOfLines
属性值是1
;如果要显示多行,把这个属性值改成0
即可。
self.lblResult.numberOfLines = 0;
- 默认情况下,会显示成这样:
如果想添加行间距,你可能会这样做:
- 写一个string转换成AttributedString的方法(或者给字符串增加一个分类)
-(NSAttributedString *)getAttributedStringWithString:(NSString *)string lineSpace:(CGFloat)lineSpace {
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:string];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = lineSpace; // 调整行间距
NSRange range = NSMakeRange(0, [string length]);
[attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];
return attributedString;
}
- 赋值富文本属性
NSString *string = @"众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行文本,一般情况下会有一定的行间距。如果想动态调整行间距,则需要赋值**富文本属性**(而不是文本属性)";
// 5:行间距
self.lblResult.attributedText = [self getAttributedStringWithString:string lineSpace:5];
- 结果如下图:
=============== 华丽的分割线 ===============问题:以上方法显示多行文本貌似没有问题,但如果文本只有一行呢?
Label显示单行文本
- 显示单行中文:
NSString *string = @"文本只有一行会显示什么样?";
self.lblResult.attributedText = [self getAttributedStringWithString:string lineSpace:5];
- 显示单行英文:
NSString *string = @"good good study day day up";
self.lblResult.attributedText = [self getAttributedStringWithString:string lineSpace:5];
- 通过比较发现,用同样的方法,单行显示中文 & 英文,效果不同,中文会多了一些空白!心中立马有种蛋蛋的忧桑,一丝丝凄凉……
遇到问题之后
查询API-
NSMutableParagraphStyle
// Indent:缩进
@property(NS_NONATOMIC_IOSONLY) CGFloat lineSpacing;
@property(NS_NONATOMIC_IOSONLY) CGFloat paragraphSpacing;
@property(NS_NONATOMIC_IOSONLY) NSTextAlignment alignment;
@property(NS_NONATOMIC_IOSONLY) CGFloat firstLineHeadIndent;
@property(NS_NONATOMIC_IOSONLY) CGFloat headIndent;
@property(NS_NONATOMIC_IOSONLY) CGFloat tailIndent;
@property(NS_NONATOMIC_IOSONLY) NSLineBreakMode lineBreakMode;
@property(NS_NONATOMIC_IOSONLY) CGFloat minimumLineHeight;
@property(NS_NONATOMIC_IOSONLY) CGFloat maximumLineHeight;
@property(NS_NONATOMIC_IOSONLY) NSWritingDirection baseWritingDirection;
@property(NS_NONATOMIC_IOSONLY) CGFloat lineHeightMultiple;
@property(NS_NONATOMIC_IOSONLY) CGFloat paragraphSpacingBefore;
@property(NS_NONATOMIC_IOSONLY) float hyphenationFactor;- 各种尝试之后,问题还在那儿……
想到富文本属性,查询
NSAttributedString.h
头文件- 仿佛看到了胜利的曙光
UIKIT_EXTERN NSString * const NSBaselineOffsetAttributeName NS_AVAILABLE(10_0, 7_0); // NSNumber containing floating point value, in points; offset from baseline, default 0
- 1
- 1
尝试解决问题
- 重构
getAttributedStringWithString
方法
-(NSAttributedString *)getAttributedStringWithString:(NSString *)string lineSpace:(CGFloat)lineSpace baselineOffset:(CGFloat)baselineOffset {
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:string];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = lineSpace; // 调整行间距
NSRange range = NSMakeRange(0, [string length]);
[attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];
// 设置文本偏移量
[attributedString addAttribute:NSBaselineOffsetAttributeName value:@(baselineOffset) range:range];
return attributedString;
}
于是单行文本显示成这样:
那么多行呢?
我擦!
问题分析
- 通过上面的示例分析,可以简单的得到结论:
- 未设置行间距和偏移量,什么问题都没有,只是行与行之间显示得比较紧促!
- 只设置行间距,多行和单行英文情况下,显示没有问题,但单行中文显示会有问题,底部会有空白!
- 既设置行间距,也设置偏移的情况下,单行显示没有问题,但多行显示有问题!
解决办法
- 多行情况下,不设置偏移!
那么问题来了,如何判断label显示几行呢?
- 笔者用比较笨的方法:计算某几个固定字符的高度,然后再计算label文本的高度,如果后者大于前者,则为多行!
- 示例代码如下:
CGFloat lineSpace = 5;
CGFloat offset = -(1.0/3 * lineSpace) - 1.0/3;
CGFloat marginLeft = 20;
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = lineSpace; // 调整行间距
NSDictionary *attrs = @{
NSFontAttributeName : self.lblResult.font,
NSParagraphStyleAttributeName : paragraphStyle
};
// 计算一行文本的高度
CGFloat oneHeight = [@"测试Test" boundingRectWithSize:CGSizeMake(screenWidth-marginLeft*2, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size.height;
CGFloat rowHeight = [self.txtInputString.text boundingRectWithSize:CGSizeMake(screenWidth-marginLeft*2, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size.height;
// 如果超出一行,则offset=0;
offset = rowHeight > oneHeight ? 0 : offset;
self.lblResult.attributedText = [self getAttributedStringWithString:self.txtInputString.text lineSpace:lineSpace baselineOffset:offset];
- OK,这样貌似解决了上面的问题,但细心的你估计会发现一个问题:
CGFloat offset = -(1.0/3 * lineSpace) - 1.0/3;
这行代码是什么意思?
关于 f(x) = -(1.0/3 * x) - 1.0/3
- offset是通过穷举法归纳总结出来的,也许不够准确,但在项目中用起来挺好。
- 根据文本内容,描点
// 描点
CGPoint points[15];
// CGPointMake(lineSpace, offset)
points[0] = CGPointMake(5, -2);
points[1] = CGPointMake(8, -3);
points[2] = CGPointMake(10, -3.5);
points[3] = CGPointMake(16, -6);
points[4] = CGPointMake(20, -7);
points[5] = CGPointMake(25, -9);
points[6] = CGPointMake(30, -11);
points[7] = CGPointMake(35, -11.5);
points[8] = CGPointMake(40, -13);
points[9] = CGPointMake(50, -15);
points[10] = CGPointMake(60, -18.5);
points[11] = CGPointMake(70, -23);
points[12] = CGPointMake(80, -26);
points[13] = CGPointMake(90, -29);
points[14] = CGPointMake(100, -32);
// 画线
[self drawLine:points count:15];
- 画线
// 画线
-(void)drawLine:(CGPoint[])points count:(NSInteger)count {
CGMutablePathRef linePath = CGPathCreateMutable();
CGPathAddLines(linePath, NULL, points, count);
// 关联layer和贝塞尔路径
self.linesLayer.path = linePath;
CGPathRelease(linePath);
// 创建Animation
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @(0.0);
animation.toValue = @(1.0);
self.linesLayer.autoreverses = NO;
animation.duration = 1.5f;
// 设置layer的animation
[self.linesLayer addAnimation:animation forKey:nil];
self.linesLayer.strokeEnd = 1;
}
![Uploading Label设置行间距_归纳总结offset的算法_323780.png . . .]
Label设置行间距--b的更多相关文章
- Label设置行间距
内容摘要 UILabel显示多行文本 UILabel设置行间距 解决单行文本 & 多行文本显示的问题 场景描述 众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行 ...
- 设置textView或者label的行间距方法
一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...
- 【代码笔记】iOS-设置textView或者label的行间距方法
一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...
- UILabel设置行间距和字间距并计算高度-b
#define UILABEL_LINE_SPACE 6 #define HEIGHT [ [ UIScreen mainScreen ] bounds ].size.height //给UILabe ...
- QLabel设置行间距(使用html的语法,比较巧妙)
1.设置行间距 QLabel没有设置行间距的函数,所以这种办法是行不通的.只能采用其它类似的方法来实现,例如设置行高,使用样式代码如下: <p style='line-height:18px'& ...
- iOS UILabel设置行间距和字间距
实现UILabel的文字,设置行间距和字间距. 效果图: 代码: let lblTitle = UILabel(frame: CGRect(x: , y: , width: KScreenWidth- ...
- 使用CSS设置行间距,字间距.
字间距1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离 ...
- C# 、winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示
C# .winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示 解决方法一:设置label的Tag属性值与skinEngine的DisableTag属性值相同即可.默认值是9 ...
- C# RichTextBox设置行间距
之前从CSDN上下载了一个代码,参看之后,改了一些内容,感觉设置行间距更具体,不会因为字号的变化而受到影响,具体代码参看: CSDN:http://download.csdn.net/detail/n ...
随机推荐
- 利用图片延迟加载来优化页面性能(jQuery)
图片延迟加载也称懒加载,常用于页面很长,图片很多的页面,以电子商务网站居多,比如大家常上的京东,淘宝,页面以图居多,整个页面少说几百K,多则上兆,如果想一次性加载完成,不仅用户要哭了,服务器也得哭了. ...
- 基于Shading Model(对光照变化一定不变性)的运动目标检测算法
光照模型(Shading Model)在很多论文中得到了广泛的应用,如robust and illumination invariant change detection based on linea ...
- 假设但是学习java入门,请离开SSH稍远
我觉得有点累了步行上班,我想买一辆自行车.结果去了一看,想2500片.旁边的人说,2500所有最好加一些钱,买一挖电. 遂问电动车价格,3500,决定买.却被告知不如加点钱买小踏板摩托划算.于是看摩托 ...
- COCOS2D-X 精灵创建随笔
CCSprite类中创建Sprite的方法都是静态的: static CCSprite* create ( ) 创建一个无图片显示的精灵,可随后用 setTexture 方法设置显示图片 stati ...
- [转] Putty - 文件夹显示的蓝色太暗
Putty SSH key的后缀为ppk 默认文件夹的颜色显示为ANSI Blue,颜色太暗. ANSI Blue : RGB(0, 0, 187) 将ANSI Blue修改为和ANSI Blue B ...
- js移除最后一个字符,js替换字符串的连接符号,js移除最后一个分隔符号
js移除最后一个字符 js移除最后一个分隔符号 js替换字符串的连接符号 >>>>>>>>>>>>>>>> ...
- U3D 精灵的点击监听
U3D游戏中,可能会用到点击对象,完成某项操作, 方法一:可以通过接收Input对象的输入,进行利用 方法二:给对象绑定一个collier 组件,然后就能后使用内置方法 这里有点不同,方法一,是不管哪 ...
- XML解析(转)
非原创,转载自http://my.oschina.net/khakiloveyty/blog/396671 xml解析主要可以使用CData,libxml2以及NSXMLParser,以下对各个方法给 ...
- linux命令sed学习笔记
sed其实就是两个主要的知识点,那就是“怎么选择”和“怎么操作”!
- php redis 【摘自网上,只为参考】
ubuntu下安装php redis sudo apt-get install redis-server 测试redis是否安装成功:注意:要开启redis redis-cliset test hel ...