CoreText 实现图文混排

效果图：

1.gif

上面的效果是用CoreText实现的。

demo的github地址 https://github.com/tianliangyihou/News_coretText

如果你对CoreText也比较感兴趣的话，建议可以看看下面这篇文章，了解一些文字排版的基本知识：

链接：http://www.cocoachina.com/industry/20140521/8504.html

然后再看看下面这个老外用swift4 写的一个比较好的效果，介绍也写得很清楚（都是英文）。很多介绍CoreText都提到这篇文章：
https://www.raywenderlich.com/153591/core-text-tutorial-ios-making-magazine-app

还有唐巧写的猿题库中的一篇CoreText的知识：

链接：http://ju.outofmemory.cn/entry/53649

再之后可以看看这个github上的一个关于CoreText的开源库，代码比较少，读起来比较容易：

https://github.com/12207480/TYAttributedLabel

这个是github上一个有2300多个star的库，demo写的也很详细

再再之后可以读一下YYKit作者写的 YYText，学习一下异步排版和渲染和更多的效果
https://github.com/ibireme/YYText

本人最近也是刚刚读完TYAttributedLabel，顺便写了个上面的效果。YYText也是看了一点，不过马上就要过年了，这一拖不知道要拖多久了。

下面是关于上图效果的一点简单介绍：

WechatIMG91.jpeg

这三个文字其实是3个按钮，这样写起来虽然有点麻烦，但是可以练手

CoreText是一个文字排版引擎，是不具备将图片或者View也渲染到你要显示的控件上的。但是幸运的是CoreText可以通过设置代理，给需要的地方预留下空间，这样的话就可以以后将View add到相应的位置。

- (void)replaceTextOfRange:(NSRange)range withModel:(LBModel *)model{
    
    unichar objectReplacementChar = 0xFFFC;
    NSString * objectReplacementString = [NSString stringWithCharacters:&objectReplacementChar length:1];
    NSMutableAttributedString *muAttrS = [[NSMutableAttributedString alloc]initWithString:objectReplacementString];
    
    CTRunDelegateCallbacks runCallBacks;
    runCallBacks.version = kCTRunDelegateVersion1;
    runCallBacks.dealloc = textRunDelegateDeallocCallback;
    runCallBacks.getAscent = textRunDelegateGetAscentCallback;
    runCallBacks.getDescent = textRunDelegateGetDescentCallback;
    runCallBacks.getWidth = textRunDelegateGetWidthCallback;
    CTRunDelegateRef runDelegate = CTRunDelegateCreate(&runCallBacks, (__bridge void * _Nullable)(model));
    [muAttrS addAttribute:(__bridge_transfer NSString *) kCTRunDelegateAttributeName value:(__bridge id _Nonnull)(runDelegate) range:NSMakeRange(0, 1)];
    [_muAttributeStr replaceCharactersInRange:range withAttributedString:muAttrS];
  //这里self.models的作用是给model一个强引用，否则代理回调时候，model已经销毁了
    [self.models addObject:model];
    CFRelease(runDelegate);
}

设置代理后，当排版需要的时候，就会回调下面的代理方法

#pragma mark - CTRunDelegateCallbacks
//CTRun的回调，销毁内存的回调
void textRunDelegateDeallocCallback( void* refCon ){
}
//CTRun的回调，获取高度
CGFloat textRunDelegateGetAscentCallback( void *refCon ){
    LBModel *model = (__bridge LBModel *)refCon;
    if (![model.name isEqualToString:@"imageView"]) {
        return model.ascent;
    }
    return model.height;
}
CGFloat textRunDelegateGetDescentCallback(void *refCon){
    LBModel *model = (__bridge LBModel *)refCon;
    if (![model.name isEqualToString:@"imageView"]) {
        return model.descent;
    }
    return 0;
}
//CTRun的回调，获取宽度
CGFloat textRunDelegateGetWidthCallback(void *refCon){
    LBModel *model = (__bridge LBModel *)refCon;
    return model.width;
}

这样的话就可以你需要添加的View或者图片的地方预留下相应的空间。

gif图片的播放大概有两种方式：
1 高内存，低cpu
demo的方式 :

优点：简单粗暴
缺点：图片较大或者帧数较多，占用内存过大

2 低内存，高cpu
可以读读YYImage： https://github.com/ibireme/YYImage
或者也可以看看本人写的一个图片浏览器，也是参考了YYImage的处理gif的方式写的
https://github.com/tianliangyihou/LBPhotoBrowser

优点：低内存 灵活多变 可控性强
缺点：要想实现较好的效果，需要手动实现，实现复杂。

最后的那个文字的环形环绕和上面的实现稍微有些不一样,并不是通过代理来预留空间的：

        CTFramesetterRef endframeSetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)endAttributeStr);
        UIBezierPath *bPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0,screenBounds.size.width,screenBounds.size.width) cornerRadius:screenBounds.size.width/2.0];
        [bPath addArcWithCenter:CGPointMake(screenBounds.size.width /2.0, screenBounds.size.width /2.0) radius:screenBounds.size.width /2.0 - 35 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
        CGMutablePathRef endPath = CGPathCreateMutableCopy(bPath.CGPath);
        CTFrameRef endFrame = CTFramesetterCreateFrame(endframeSetter, CFRangeMake(0, 0), endPath, NULL);
        LBLabel *endLabel = [[LBLabel alloc]initWithctFrame:endFrame contentHeight:screenBounds.size.width];
        endLabel.backgroundColor = self.backgroundColor;
        UIImageView *catImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"cat.jpg"]];
        catImageView.frame = CGRectMake(0, 0,(screenBounds.size.width /2.0 - 35) * 2, (screenBounds.size.width /2.0 - 35) * 2);
        catImageView.center = CGPointMake(screenBounds.size.width /2.0, screenBounds.size.width /2.0);
        catImageView.layer.cornerRadius = (screenBounds.size.width /2.0 - 35);
        catImageView.clipsToBounds = YES;
        [endLabel addSubview:catImageView];
        endLabel.frame = CGRectMake(0, suggestedSize.height, screenBounds.size.width, screenBounds.size.width);
        [self addSubview:endLabel];
        CFRelease(endframeSetter);
        CFRelease(endPath);

CoreText 实现图文混排

效果图：

你可能感兴趣的:(CoreText 实现图文混排)