美文网首页
iOS 富文本图文对齐、图片文字不在一个水平线上的解决办法

iOS 富文本图文对齐、图片文字不在一个水平线上的解决办法

作者: HaoyuiOS | 来源:发表于2021-09-16 17:21 被阅读0次
    出问题的效果图
    看图可以发现,文字和图片的中心不在一个水平线上,而且看起来图片的底端高于文字的底端,其实这两者底端位置是一样的,这个现象的出现是图片边缘有一部分透明区域导致的。
    回到正题,怎么处理才能让图文中心对齐呢,后台返回的是一个H5格式的字符串串
    AttributedString是通过 NSHTMLTextDocumentType拿到的
    于是开始变着花样在百度谷歌搜索iOSH5富文本等等等等...找到一个改变图片大小的方式
    直接改动H5字符串改变图片大小
    一看有效果就钻牛角尖了,开始尝试添加各种h5里设置约束的参数,结果没有一个起效果的,试到后来我都快吐了,但组织交代的任务没有完成,我还不能倒下,经过艰苦卓绝的努力终于找到解决问题的方法:那就是设置富文本基线偏移量的属性NSBaselineOffsetAttributeName(其实最开始我尝试过更改这个属性,但当时不知道如果从头到尾全部添加偏移量的结果就是毫无效果...)
        // 首先拿到字符串
        NSString * normalStr = attribute.string;
        // 这里查找图片上一个字符 「
        NSRange range = [normalStr rangeOfString:@"「"];
        // 设置基线偏移,已知图片位置为range.location + 1,length 为1。
        [attribute addAttribute:NSBaselineOffsetAttributeName value:@(-10) range:NSMakeRange(range.location+1, 1)];
    
    这里算是讨了个巧,因为我们后端返回的字符串都是这种格式,在图片前面有且只有一个@"「"符号,又知道图片在计算length的时候长度是1,所以才有了这种写法,如果字符串格式不固定的话可能需要小伙伴们尝试别的拿到图片下标的方式。
    大功告成
    ps:因为对富文本的处理不够熟练导致走了不少弯路,姑且记录一下,如果有任何问题,欢迎在评论区留言 ~

    相关文章

      网友评论

          本文标题:iOS 富文本图文对齐、图片文字不在一个水平线上的解决办法

          本文链接:https://www.haomeiwen.com/subject/ubargltx.html