使用YYLabel实现文本垂直布局和文字填空

文本垂直布局

最近做的古诗词项目，有一个需求是文本从右向左垂直布局，像古文一样的阅读方式。使用UILabel和UITextView都是很难实现的，最终选定YYLabel，因为它有设置一些属性就可实现垂直布局。YYLabel垂直布局的原理是

    YYLabel *lab = [YYLabel new];
    lab.textColor = [UIColor blackColor];
    lab.verticalForm = YES;      //文字垂直展示
    lab.textVerticalAlignment = YYTextVerticalAlignmentTop;  //文字从顶部垂直展示
    lab.exclusionPaths = @[[UIBezierPath bezierPathWithRect:CGRectZero]];

约束YYLabel的上下和右边距离，并设置以下两个属性，即可实现文字垂直自动折行。在这里preferredMaxLayoutWidth决定了其最大的隐式高度，当文本内容超过了这个高度，就会换行了。

    lab.numberOfLines = 0;
    lab.preferredMaxLayoutWidth = 300;

设置行间距、段间距、字间距

    NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc] initWithString:@"你想先做哪一套试卷"];
    attrString.yy_lineSpacing = 10;
    attrString.yy_paragraphSpacing = 10;
    attrString.yy_kern = [NSNumber numberWithInteger:10];  //字间距
    attrString.yy_font = [UIFont boldSystemFontOfSize:16];
    lab.attributedText = attrString;

在实现这样的效果时，遇到了问题。设置了垂直排列，自适应宽度，在对label赋值以后，可以得到label的最终宽度，除以多少列，就能知道一列的宽度，这样我就可以画红色的竖线了，实现书本的效果。但是我这样得到的一列宽度，但是这个值是不准确的。在文字多的时候，可能有5列8列，这时候就出现了问题，最右侧两列看起来文字是居中的，但是到最左侧两列文字却靠近左边线，不是居中的效果。无论如何调整字间距、行间距，都不能达到想要的效果，然而也没有在YYLabel中找到列间距的属性。列宽不能确定，所以我决定尝试，一列文字使用一个YYLabel，这样我就能确定的设置这个label的宽度，每一列的label宽度都一样，画的红色线条也根据这个宽度画，最终能实现均匀排列的效果。但是我如何确定一列有多少个文字，对文本内容进行一列一列的分割呢，这都要基于每一行文字的高度是相同的，验证得出确实如此，每一行文字高度相同，只有算出一个字的高度，并且知道一列的最大高度，就能算出一列最多多少个字，对文字进行分割，绘制YYLabel。

文本中间穿插控件，实现文字填空效果

使用YYLabel可以实现上图的效果，在文本中间插入带边框的UILabel。拿到数据，我知道空格在这段文字的第几位，把文字分成左右两部分。

    NSString *leftStr = [_model.sentence substringToIndex:_model.word_index];
    NSString *rightStr = [_model.sentence substringFromIndex:_model.word_index+1];

    NSMutableAttributedString *attrString = [NSMutableAttributedString new];
    if (leftStr.length) {
        NSMutableAttributedString *one = [[NSMutableAttributedString alloc] initWithString:@"能就江楼"];
        one.yy_lineSpacing = 10;
        one.yy_paragraphSpacing = 10;
        one.yy_kern = [NSNumber numberWithInteger:10];  //字间距
        one.yy_font = [UIFont boldSystemFontOfSize:22];
        [attrString appendAttributedString:one];
    }
   
    UILabel *blankLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
    blankLabel.layer.cornerRadius = 5;
    blankLabel.layer.masksToBounds = YES;
    blankLabel.textAlignment = NSTextAlignmentCenter;
    blankLabel.font = [UIFont boldSystemFontOfSize:22];
    blankLabel.textColor = [UIColor blackColor];
    [blankLabel addTarget:self action:@selector(blankLabelTapAction)];
    blankLabel.backgroundColor = [UIColor colorWithHex:@"FFE4D8"];
    blankLabel.layer.borderColor = [UIColor gapOrangeColor].CGColor;
    blankLabel.layer.borderWidth = 1.0;
    //加一个属性，来表示空格状态，来修改label边框和背景颜色
    blankLabel.layer.borderColor = [UIColor lightGrayColor].CGColor;

    //插入label
    NSMutableAttributedString *attachText = [NSMutableAttributedString yy_attachmentStringWithContent:_blankLabel contentMode:UIViewContentModeCenter attachmentSize:_blankLabel.frame.size alignToFont:[UIFont systemFontOfSize:22] alignment:YYTextVerticalAlignmentCenter];
    [attrString appendAttributedString:attachText];

    //拼接空格右边的文本
    if (rightStr.length) {
        NSMutableAttributedString *two = [[NSMutableAttributedString alloc] initWithString:@"暑否"];
        two.yy_lineSpacing = 10;
        two.yy_paragraphSpacing = 10;
        two.yy_kern = [NSNumber numberWithInteger:10];
        two.yy_font = [UIFont boldSystemFontOfSize:22];
        [attrString appendAttributedString: two];
    } 

数据模型里要有个表示状态的字段，例如输入状态就是橙色边框和背景颜色，待输入和已输入状态就是灰色边框白色背景。