利用TextKit进行简单的图文混排

最近做的项目属论坛性质,其中大范围的涉及到图文混排,帖子标题前有图片,像“顶”“荐”赏“精”图片,如图:

由此,自已封装了一个工具类,仅做参考:

1,首先上一份完整的代码,业务需求是根据后台返回的标识显示图片,其中参数topic存放所需标识和标题,参数isShow是因为悬赏帖有的地方会单独在界面有个标识,无需在标题前显示,标识分别如下:
// topic.topiclevel 置顶, topic.topicrecommend 推荐, topic.topicessence 精华, topic.topictype == 2 悬赏

//
//  LTIntegrateTextAndGraphics.m
//
//  Created by MaLingYun on 16/3/4.
//

#import "LTIntegrateTextAndGraphics.h"
#import "XMTextAttachment.h"

// 在话题前插入“顶、精、推、赏”图片的位置
static int typeIndex;

@implementation LTIntegrateTextAndGraphics
// 调该方法实现图文混排
+ (NSMutableAttributedString *)integrateTextAndGraphicsWithTopic:(BPTopic *)topic withRewardIconIsShow:(BOOL)isShow{
    if (topic.topiclevel || topic.topicrecommend || topic.topicessence || topic.topictype == 2) {
        
        // topic.topictitle 是帖子标题,原始数据
        NSMutableAttributedString *originalString = [[NSMutableAttributedString alloc] initWithString:topic.topictitle attributes:nil];
        // 添加空格是为了插入图片
        NSString *str = [@"   " stringByAppendingString:topic.topictitle];
        NSMutableAttributedString *mString = [[NSMutableAttributedString alloc] initWithString:str attributes:nil];
        
        return [self insertImageInTitleWithString:originalString  withMutableAttributedString:mString withTopic:topic withRewardIconIsShow:isShow];
    }else{
        // 若无任何标识,即普通帖
        NSMutableAttributedString *mString = [[NSMutableAttributedString alloc] initWithString:topic.topictitle attributes:nil];
        return mString;
    }
    
}
+ (NSMutableAttributedString *)insertImageInTitleWithString:(NSMutableAttributedString *)originalString withMutableAttributedString:(NSMutableAttributedString *)mString withTopic:(BPTopic *)topic withRewardIconIsShow:(BOOL)isShow{
    typeIndex = 0;
    NSMutableAttributedString *string = originalString;
    if (topic.topiclevel) {
        string = [self attachmentWithImageName:@"topic_level" withIndex:typeIndex  withMutableAttributedString:mString];
    }
    if (topic.topicrecommend) {
        string = [self attachmentWithImageName:@"topic_recommend" withIndex:typeIndex  withMutableAttributedString:mString];
    }
    if (topic.topicessence) {
        string = [self attachmentWithImageName:@"topic_essence" withIndex:typeIndex  withMutableAttributedString:mString];
    }
    if (topic.topictype == 2) {
        if (isShow) {
            string = [self attachmentWithImageName:@"it_small_reward" withIndex:typeIndex  withMutableAttributedString:mString];
        }
    }
    
    if (topic.topiclevel || topic.topicrecommend || topic.topicessence || isShow) {
        return string;
    } else {// 帖子只为悬赏帖且不显示悬赏标识 则 只返回原始数据
        return originalString;
    }
}
// 核心方法,添加图片
+ (NSMutableAttributedString *)attachmentWithImageName:(NSString *)imgName withIndex:(int)i withMutableAttributedString:(NSMutableAttributedString *)mString{
    XMTextAttachment *attch = [[XMTextAttachment alloc] initWithData:nil ofType:nil];
    attch.image = [LTUtils LTImageNamed:imgName];
    
    NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
    // 插入的位置为2的倍数,这样图片不至于挨在一起
    [mString insertAttributedString:string atIndex:2 * i];
    typeIndex  += 1;
    return mString;
}
@end

在核心方法中,我一开始并没有重写NSTextAttachment,而是直接设置图片的Frame,数值是大概猜一下然后一点一点调整的,代码如下:

attch.bounds = CGRectMake(0, -2, 15, 15);

对,没错,你们说的对,这样写是不专业的表现......

图文混排嘛,顾名思义图片与文字在一行,那么图片的高度如何随字体大小(行的高度)改变而二者保持一致?

我重写了NSTextAttachment,在里面:

//
//  XMTextAttachment.m
//
//  Created by malingyun on 16/3/4.
//

#import "XMTextAttachment.h"

@implementation XMTextAttachment

- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex {
    // y值之所以是-2,是因为若为0,图片的位置比之文字会偏上
    return CGRectMake(0, -2, lineFrag.size.height, lineFrag.size.height);
}

@end

图文混排,我现在就接触到这里,以后有深层次的研究再更新。

至此,小马述一家之言。

你可能感兴趣的:(利用TextKit进行简单的图文混排)