内容摘要

  • 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 . . .]

 
http://blog.csdn.net/chenyblog/article/details/51172776  是原文地址   感谢分享 

Label设置行间距的更多相关文章

  1. Label设置行间距--b

    内容摘要 UILabel显示多行文本 UILabel设置行间距 解决单行文本 & 多行文本显示的问题 场景描述 众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行 ...

  2. 设置textView或者label的行间距方法

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  3. 【代码笔记】iOS-设置textView或者label的行间距方法

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  4. UILabel设置行间距和字间距并计算高度-b

    #define UILABEL_LINE_SPACE 6 #define HEIGHT [ [ UIScreen mainScreen ] bounds ].size.height //给UILabe ...

  5. QLabel设置行间距(使用html的语法,比较巧妙)

    1.设置行间距 QLabel没有设置行间距的函数,所以这种办法是行不通的.只能采用其它类似的方法来实现,例如设置行高,使用样式代码如下: <p style='line-height:18px'& ...

  6. iOS UILabel设置行间距和字间距

    实现UILabel的文字,设置行间距和字间距. 效果图: 代码: let lblTitle = UILabel(frame: CGRect(x: , y: , width: KScreenWidth- ...

  7. 使用CSS设置行间距,字间距.

    字间距1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离 ...

  8. C# 、winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示

    C# .winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示 解决方法一:设置label的Tag属性值与skinEngine的DisableTag属性值相同即可.默认值是9 ...

  9. C# RichTextBox设置行间距

    之前从CSDN上下载了一个代码,参看之后,改了一些内容,感觉设置行间距更具体,不会因为字号的变化而受到影响,具体代码参看: CSDN:http://download.csdn.net/detail/n ...

随机推荐

  1. type动态创建类

    在一些特定场合,需要动态创建类,比如创建表单,就会用到type动态创建类,举个例子: class Person(object): def __init__(self,name,age): self.n ...

  2. Java程序控制结构

    分支结构 循环结构 跳转结构 一.分支结构 概念:程序从两条或多条路径中选择一条去执行,这种结构称为分支结构 1. if结构 特点: ① 条件表达式的形式可以为: boolean的变量 boolean ...

  3. Python 的 sys 模块常用方法?

    总结就是,os模块负责程序与操作系统的交互,提供了访问操作系统底层的接口; sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境. sys.argv ...

  4. 引入maven以外的jar包

    这里有2个案例,需要手动发出Maven命令包括一个 jar 到 Maven 的本地资源库. 要使用的 jar 不存在于 Maven 的中心储存库中. 您创建了一个自定义的 jar ,而另一个 Mave ...

  5. the sum of two fixed value

    the sum of two fixed value description Input an array and an integer, fina a pair of number in the a ...

  6. 可视化操作,实现横向柱形echart图 无边框

    图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  7. 微信小程序点击保存图片到相册

    wxml部分的代码   <view class="footer-r" bindtap="save"> <image src="../ ...

  8. java 类加载及实例化的调用顺序

    1.没有继承的情况 单独一个类的场景下,初始化顺序为依次为 静态变量和静态代码块(看两者的书写顺序),继承的基类的构造函数,成员变量,被调用的构造函数. 代码呈现: public class Test ...

  9. Web学习之CSS总结

    银角大王武Sir的博客地址 1.positoin属性固定元素的定位类型 说明:这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而无论该元素是什么类型.相 ...

  10. node.js从入门到放弃《什么是node.js》

    1.什么是node.js Node.js是一个后端的Javascript运行环境(支持的系统包括*nux.Windows),这意味着你可以编写系统级或者服务器端的Javascript代码. Node. ...