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);

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 83,429评论 1 182
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 30,030评论 1 152
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 35,146评论 0 106
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 19,365评论 0 91
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 24,733评论 0 154
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 20,515评论 1 91
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 13,152评论 2 168
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 12,545评论 0 84
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 11,090评论 5 118
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 14,380评论 0 132
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 13,027评论 1 131
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 13,865评论 0 137
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 8,644评论 0 19
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 11,484评论 2 122
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 14,664评论 3 132
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 10,223评论 0 3
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 10,596评论 0 84
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 15,276评论 2 142
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 15,730评论 2 138

推荐阅读更多精彩内容