Skip to content

利用coreText实现图文混排 类似H5的新闻界面

Notifications You must be signed in to change notification settings

tianliangyihou/News_coretText

Repository files navigation

效果图:

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也是看了一点,不过马上就要过年了,这一拖不知道要拖多久了。


下面是关于上图效果的一点简单介绍: Wechat.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);

About

利用coreText实现图文混排 类似H5的新闻界面

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published